Stock in the Channel Customer Area Interface
Web Design | Interface Design

Took on the initiative to redesign Stock in the Channel company’s website, making the complex functionality easy to grasp and drastically improving the user interface to accommodate new features. Each page was carefully considered in relation to others for a simpler journey. The website got a cleaner and more modern look with plenty of white space and proper visual hierarchy, easing the us of the website and saving the customer’s precious time.

Tools: Adobe Photoshop, HTML | CSS (Visual Studio)

Problem

•  Overwhelming, hard to navigate and analyse.
•  Actions are presented as buttons and are not intuitive to use.
•  Statuses and processes aren’t immediately visible.
•  Conflicting information priorities due to an incorrect use of colours and font sizes.
•  Pop-up windows and dialogues are used to perform some actions, adding to the visual clutter.
•  Action placement doesn’t correspond with their purpose.

Aim

•  Implement a restricted colour palette and strict guidelines on visual hierarchy.
•  Reduce number of clicks and remove unnecessary steps while keeping the functionality.
•  Make the information easy to digest, navigate and analyse at a glance. 
Overall:  Help the user perform daily tasks quicker and with less stress.

Solution

1. Editable title. Indicated by grey italics.
2. Global (page) actions are nested in the header.
3. Less used actions are hidden in a menu. Accomodates the expansion of actions in the future.
4. Values can now be edited directly in the cell, instead of using an additional pop-up window. Indicated by an underline.
5. Sub-table with a distinctive visual hierarchy and tabs. Provides related and important information in one place, making the content easier and faster to navigate. Also used to provide order details.
6. Custom row with no pre-defined data uses italics to be distinguishable from the rest.
7. Colour coded statuses and processes are now distinguishable and easy to monitor.
8. Unavailable products can be recognised straightaway.
9. Cards unite content of similar nature and functionality.
10. Local (section) actions are nested in card headers.
11. Simplified icons are intuitive to use and save space.
12. Extra links to skip between sections as they can get long. 
•   Space in each cell has been carefully allocated based on the maximum number of characters possible. Cells containing numbers are no-break.
Icon Set and Marketing Images
A versatile set of icons to be used for online marketing and advertising to promote new and existing services. Meant to be combined in different ways based on context and purpose, creating unique and striking collages.

Tools: Adobe Illustrator, Adobe Photoshop
E-mail Template Design
Google Ads & On-site Banners​​​​​​​
Marketing Materials
Stock in the Channel Marketing Website Concept
Various Graphics
Back to Top