Project Overview
Apio is a responsive web based application and a platform that enables seamless integration of retailer data and commerce operations.
You can read the full case study of the app design to understand the project in more detail.

The Apio project required a full design system as the developers built the app using a free UI kit. The free UI kit was fine for the developers to use when building out the functionality but it was certainly not something you could put in front of the end users!
I started off by reviewing the entire app to understand the types of components currently being used, what would need to be designed and how to ensure scalability so we were not limited to only a handful of components.
Having a flexible and scalable library is very important when building a design system. Components should be reusable as much as possible. I adopted the Atomic Design Methodology for this task and would nest and reuse components where possible to ultimately design templates that could be used across a number of pages.
Building the button component
When defining the button component, there are a number of points to consider.
Firstly the pixel sizes used should always be divisable by 4 and 8. The reason for this
is that the spacing system fits perfectly within the 8pt Grid, which is the Material
Design standard for UI design
.
Secondly, the button component should be flexible. It should be able to extend and
contract
depending on the text inside it.
Thirdly, make a point of including a leading and trailing icon. The icon should have
the ability to be hidden or seen. This allows flexibility in a single button component.
Lastly, ensure you have different sizes of buttons and 3 alignments - left, centre and right - so your buttons can scale in the correct directions when using them on your screen or page layouts.

Icon designs
When designing icons I tend use a base size of 64px. Depending on the use of the icon, I will use consistent line thickness so all icons styled the same and appear to live in the same family. Always create icons in plain black on a white background intially but also test them in reverse (white icon on a black background) to esnure they work in a dark mode state.
The icons in the design system always have 3 layers. Layer 1 is the export slice and uses a considered naming convention. Layer 2 is the icon itself with a colour style of black applied to it. Layer 3 is the background and bounding box, that has an initial style of _transparent but can be changed using overrides if required.
Export options are also defined in the design system. They include both bitmap and SVG vector formats. These can easily be accessed when added to zeplin.
Considering form element types such as (but not limited to) inputs, drop downs, tables and data panels
Being an application, there were a number of form elements that needed to be considered. These ranged from standard input types and drop downs, to much more complex data panels (used within the 'application build' section of the app) and table designs.
With all design systems I create, as much as technically possible, I will build components that behave reponsively i.e. expand and contract, whilst staying within their given parameters to work across multiple device sizes.
Here is a snap shot of some of the components I designed with the FORM section of the design system.
Creating the data cards
Data cards in this app contain information about a particular client or company. They give you a snap shot of current success, error and warning messages active within their running integrations. The cards contain their own menu so you can customise them and jump straight into 'application build' mode if a user requires to do so.
I also created graphs in the design system to be used along side the cards within a client or company dashboard.
Both cards and graphs were designed with a light mode and dark mode variation.
The app navigation
Below is a screen shot of the navigation I created for the app. The desktop version could expand and collapse depending on the users preference. The mobile version turned into a sticky footer nav (or 'thumb navigation) for a better user experience.
Examples of templates using the new design system components
Many more components and templates were created during the design of the app and design system. This is a small snap shot of the project.
Back to Top