USER_Mock_Up.jpg

1st Central Quote & Buy Journey

 

Quote & Buy redesign

Team: Matt Older (UX Designer), E-commerce Manager, Business Analyst, Project Manger, Front & Back-end Web Developers, Web Analyst, Web Optimization Specialist, QA Testers & Head of Customer Experience.

My role: User research, competitive analysis, rapid prototyping, user testing, visual design, CSS troubleshooting, branding & presentation.

Adopting a mobile first approach I began the complete redesign of the quote and buy journey. Effectively combining our user research and data insights I produced visuals and tested prototypes for each interaction on both mobile and desktop. Working collaboratively within a cross-functional team to successfully deliver this project.

 
 

The Brief

1st Central's mobile traffic was looking to surpass desktop in 2017 and with mobile conversion lower than desktop the e-commerce team decided a redesign of the existing journey was required. The project goal was increase conversion across all devices with an emphasis on mobile.


USER RESEARCH

Monthly newsletter 'YOUR VOICE'

Monthly newsletter 'YOUR VOICE'

I created a survey in our monthly customer newsletter 'Your Voice' to get feedback from our customers. Asking specific questions on their experience with the journey to understand the needs, wants and limitations of our users experience.

Working closely with our Web Analyst I helped facilitate several user testing sessions using UserTesting.com and also observed user behavior via SessionCam. With this insight and the results for our user survey I began to identify our user pain points and frustrations with using the existing mobile site.

Session-Cam-Logo.png
  • Buttons are difficult to select
  • Can only see the annual price
  • Long, scrolling page
  • Too much info to read and fill in
  • Limited support functionality
  • Some boxes aren't very clear

 


Competitive analysis

Global_reviews_v2.jpg

Working with Global Reviews and our Insight team we looked a specific areas where the existing journey compared to our competitors, specifically looking at mobile journeys. Combining this and the results for our user research and SessionCam the following suggestions were made for improving the existing journey.

  • Prominent display of annual and monthly price 
  • Price display that follows you and updates
  • Shorter pages
  • Less clutter
  • Consistent CTA’s
  • Use colour blue for help buttons

The Data

The data showed that the share of site visits for mobile was soon to catch up and overtake desktop in the early part of 2017. With an increase of mobile conversion to 30% would see an increase in revenue of £1.2m.

Charts.png

Initial prototypes/User testing

Some initial prototypes where created and tested with users we interviewed for or initial research. From the feedback we received we iterated the design into a more final version for presentation.

User testing of different versions of the home screen

User testing of different versions of the home screen


Interaction design

Once we had iterated several version of the homepage and tested these with users I put together a presentation showing interaction design of the homepage and ancillary pages on mobile.

Final sign of for this project was required at board level. I put together a presentation containing all the user research, data and design iterations which was presented to the CEO and Chairman. Final agreement was given for a development slot and for the project to be completed by Q4.


DEVELOPMENT requirements

Working closely with our business analyst on the project he was able to produce a full set of development requirements to hand over over to the development team in Poland including the mock ups, site speed considerations and Google and Adobe analytics integration.


DEVELOPING THE DESIGNS

Throughout this project we continually tested and iterated the designs with our users. Writing a test plan identifying specific areas we wanted to test we selected users from our initial user research and asked them to test in our UAT environment watching the results through session cam.


Development and QA Testing

CSS Troubleshooting

CSS Troubleshooting

Collaborating with the development team I helped troubleshoot some of the issues raised by our QA testers. I helped recode some of the CSS files and participated regular Skype conference calls which significantly speeded up development and reduced error tickets been raised.


CONVERSION UPLIFT

Since launch there has been significant improvement in conversion on all devices with a particular improvement on the mobile journey.

New-quote-and-buy-numbers.png