A complete redesign of their online ordering tool. A new Design System, User Experience and User Interface.
Engrospartner is a Norwegian company founded in 2001. The Company's line of business includes the wholesale distribution of a general line of groceries to convenience stores. Engrospartner is the only nationwide wholesaler that only supplies to this market.
The main goal for Engrospartner was to update and upgrade their tool, which was used by customers to order products periodically to their stores for more than 10 years.
We gathered the main stakeholders for this project from Engrospartner and Noventus, the software company responsible for the initial and future development of the tool.
We started with a one-day workshop that helped us understand their company, goals, issues and desires - related to design and technical matters, which could shape or affect the project.
We could briefly identify and sort the problems their customers had when using their ordering tool and also the difficulties faced by the customer service, on Engrospartner side.
We took a trip to Norway to know and interview our users. They worked in stores from different chains and sizes, e.g, 7-Eleven, Pressbyrån, CircleK and more.
At this point, we were able to test our hypothesis with wireframes and prototypes. The flow designed and tested was improved by users feedback.
Between our findings and confirmations, we were able to define and prioritise the use cases for different situations.
After the research, we improved the user flow and redesigned the screens layout. Our objective was to have a consistent structure that could be recognized in any device, desktop or handheld.
Before moving to the User Interface, we had to establish Engrospartner Identity Guidelines and also update their logo.
With a defined Identity Guideline we were able to develop a complete Digital Design System for the project.
Every element was designed with the responsiveness and brand identity in mind, from icons to complex blocks of components.
All icons were custom made following rules of construction to keep identity consistency. Linear, light and clear. The primary colors were used to color the stroked lines. They’re scalable and have negative versions to be applied in darker backgrounds.
With all the components created, we basically put them together like lego blocks and created every screen we had previously designed with wireframes. Now looking sharp!
We delivered this project with Sketch and Zeplin, outputting different files and assets for developers. The project lasted 3 months and was our first project with Engrospartner. We have so far developed more 2 project with them, as continuation of this tool.
Bellow you’ll find the final result of this project. I’m really grateful I had the opportunity to work in such a project.
Thanks and enjoy!
