As the mobile first customer mindset grows, the need to create a mobile first, consistent design system also arose. As part of entirely re-platforming our mobile site, I led the creation of a forward thinking, atomic design system for our mobile platform - scrapping everything we had and re thinking the design from the ground up. My main goal being to clean up our design, modernise and encourage forward thinking.
This was a fast paced project, the full turnaround being 4 months from drawing board to go live. This gave us only 4 weeks to re-design the full mobile site. Ensuring I created solid foundations and rules for the design system before getting stuck in too far made life a lot easier.
Once the system was created, I also had to plan the best way to share it with my team so they can work with it in their designs moving forward, and in turn also grow the design system. I am currently doing this using sketch & craft.
As a start point I defined a clear grid structure that could work consistently for our mobile site.
Using analytics of our most used devices and best practice grid design principles from material design to help aid the decision, I defined a 4 column grid with 20px gutter for use on all mobile viewports
As part of this process I also considered how this would scale to other devices in future.
I also defined clear rules for how to use colour & typography within the design system.
We already had a set of Debenhams brand colours and fonts, so I pulled these out and defined some simple rules for their useage, to ensure we didn't deviate from these and to ensure we create consistent designs.
When defining the typography rules, I also used accessibility principles to ensure the font sizings and styles were optimal for mobile devices, so all fonts are legible and easy to read.
To gain an understanding of the whole journey and find the areas worth focussing most of our attention on, we mapped out the whole journey on the wall and walked through with the team, flagging key experience improvements as we went.
Once we had done this the sketching and wireframing process begun, I worked closely with a UX designer to complete this process quickly & efficiently due to time constraints.
I then started to form basic design elements such as buttons and form fields by using the basic design principles I defined at the start of the project. This meant I then had a set of basic elements that could be used to start building the page templates.
I then began the process of applying these to all pages on our site, and at the same time we ensured to challenge ourselves on anything we felt we could push further.
See below for some before and after comparisons of our old mobile site vs the new mobile site that was created with the mobile first design system
