Project Overview
Apio is a responsive web based application and a platform that enables seamless integration of retailer data and commerce operations.
The build of the application was in an early stage when I joined the project. However, it needed a full redesign and UX overhaul and I was brought on to lead this.
The Process
Research
• Conducted a full UX evaluation and audit of the the app in it’s WIP stage
• Research undertaken to understand the main user journeys, business and customer goals along with competitor analysis
• Worked with Stakeholders to define requirements and ACs for the project
Ideation and wireframes (tools: Sketch and Miro)
• Developed ways to improve user journeys, enabling tasks to be completed faster
• Looked at the IA to improve data hierarchy and the UI to improve design layout
• This exercise was undertaken in short bursts and presented back the team for discussion
Building the design system
Apio required a full design system build. The app in its current form was put together with a free UI kit which was basic enough for the developers to work with. However, a much more professional design and long term goal was to ensure a design system was available. Here are a few screens of the design but a more detailed look can be viewed on the Apio design system page.

Highlights of the design system

Screen designs and user journeys
Once a design system was in place, I was able to build out screen designs using the new reseuable components available. This helped to considerably speed up the design process and enabled me to create responive screen layouts and map out user journeys to help both stake holders and developers understand how users would carry out typical actions.

A view of a client dashbaord

Highlights of the dashboard user journey

Application build screen

Highlights of a user and client setup journey

Apio is a web based application and so being responsive was one of the key factor during the design stage. There were many complicated screens that needed to work effectively on both large and mobile devices, so it presented a UI challenge to ensure that the primary information was prioritised and secondary information was available to access via obvious menus.
Developer handoff (tools: Sketch and Zeplin)
• Designed a full style and interaction guide to inform developers. This included, for
example, typography usage, colours and UI interaction states.
• All designs we added to Zeplin for review and asset download
• Engaged regular demos with the developers to ensure smooth running of the build
Back to Top