Case Study - iD Mobile website redesign 2018
In a large and successful business environment, a full website redesign is rare. It carries with it a number of risks, especially when incorporating a recent brand update and a redesign of the basket and checkout journey. A full website redesign can of course have great benefits, and with an ever growing wish list of features together with an increasing number of platform related issues, a redesign was agreed in mid 2017.
There were a number of elements which I knew I wanted to incorporate into a new website. I knew I wanted to design the website in an 8 pixel grid and I knew that we absolutely had to consider mobile users far more than had been done so in the past. 70% (and growing) of our visitors do so on mobile devices and the challenge was to focus on this huge base whilst at the same time supporting wider screen widths just as well.
COLLATING HISTOric PAIN POINTS and identifying current ones
Pain points for customers come and go. Customer behaviours and understand of online platforms change over time and because of this it was essential to start the requirements for this project by listing out current pain points. I spent 3 weeks speaking to, collating and prioritising pain points from across the business. This included from teams such as Customer Services, Customer Experience, Marketing and Online. Once completed I then presented a list of these pain points to the business for sign off.
DATA & PEOPLE
Once the pain points were signed off the next phase was to update all the data we were using to base our design decisions from. Similarly to pain points, data changes and it was imperative that we were using up to date numbers when designing. We use a number of data collecting platforms at Dixons Carphone but I primarily used Google Analytics and Hotjar. We have a data team here so I used these data platforms to identify the data sets I required, briefed this into the team.
We also (for the first time within the business) brought in real customers into our offices to gain some real user live feedback from them. I managed this project and created a template for how this would work across the business for future sessions. I ended up with some superb data and feedback which resulted in clear actions for me to take away. We ended up bringing 25 customers over 5 separate sessions.
TESTING
Userzoom was my go to user testing platform for a few weeks. During this period I tested how users reacted to my low fidelity wireframes would receive back results within the hour. Something I was very conscious of was that I didn’t want to over test. ‘Real’ customer data was essential for a project of this scale and I didn’t want to over test. Once I was happy with the direction of travel I moved onto more detailed wireframes before working on the UI.
Summarising the process
It took me approximately 2 months to build out requirements, liase with multiple teams, agree KPIs with the business and carry out testing at multiple stages before proceeding to the UI element of this project.
The UI took about 6 weeks, covered around 2 dozen pages and took place working closely with developers who would then go on the build the website.
The bit that everyone really wants to see (yep, designs)
Below are a collection of designs from Figma. I have chosen rough designs identifying pain points, branding work files which I created just before this project started through to variants of pages which were needed for BAU and campaign phases.
I spent 8 days analysing each check out field and input label, making design changes and matching up these recommendations with data from GA. Here is a piece of work picking out pain points from the current journey.
A selection of wireframes from across the website which I used for some of our User Testing.
An example of some of my branding work which we had wrapped up just before this project started. The detail in this work helped when we moved to the more detailed wireframes and later on the UI.
The checkout journey of the website was as crucial as the previous pages. Here I redesigned all our form fields to make them clearer and cleaner.
The final pieces of the brand work which I worked on were our icons and font choice.
Campaigns are essential to the business. Here is an example of our PDP page in all widths during Black Friday, in which we decided to implement a dark mode across the website.
Our homepage changes on average every 2/3 weeks. I needed to ensure we had creates to support all the variants.
Product and plan cards are key to the iD Mobile brand. Each card had to be designed for all screen widths and all variants had to be catered for.