A ‘Mobile Optimization Project’ – The process and what I learned

Design & Development Strategy, User Research, UX/UI Design, Front-end Development, User Testing, Project Management, Qualitative Research, Quantitative Research.

As mobile vs. desktop content consumption is now beyond the tipping point in favour of mobile, it would be no surprise that a marketing department needed a mobile-optimized website for content marketing and a platform for a better product strategy for the company on the whole.

These are the 2 drivers that whet the appetite for my company to initiate a ‘Mobile Optimization Project’. Constrained by time and budget, it was decided that there would be no changes to the Information Architecture which had major benefits for decreasing change aversion and that the technology that powered the CMS would stay. Armed with global mobile, company mobile and web page drop out statistics, we began to plan an approach.

Having identified the problem we formulated a brief that would satisfy both the needs of the stakeholder and the user.

Adaptation of the website to be device responsive, adhere to WCAG standards, improve search engine visibility and represent The Tax Institute brand.

The web developer and myself researched front-end frameworks that gave us responsiveness and a pattern library that could be used further into the transactional parts of the site. Branding was workshopped with stakeholders to define what the brand devices would be on site and to standardise the UI. Ultimately it was decided that typography and large scale imagery would be used to supplement the content. The UI would reference Google Material Design and use brand colours, however we had to test the material design pattern library and common desktop/mobile patterns with users.

Prototype testing.

We tested with a small group of users how familiar they were with a ‘hamburger’ and off-canvas style navigation. The users hadn’t had exposure to the company.

The question.

Where would you click to navigate this website?

The Old Website Navigation

Test 1 – The existing navigation

Hamburger Navigation Closed

Test 2 – Hamburger navigation closed

Hamburger Navigation Open

Test 3 – Hamburger navigation open

This validated the direction of the website design and we opened up the menu on larger (than 1024px) screens. Keeping the interaction pattern the same across devices enabled us to implement the build quicker and the benefit to the user was that the interaction performed the same, cross device. We also ran some test on-site with existing users for feedback on the proposed new method of navigating.

Development build.

It was then time for development. Partly outsourced and partly in-house, the site was developed on a template by template basis from existing wireframes. With the decision not to change content, we we’re able to move quickly by changing asset specs and structuring them in the new layout.

Old Education Page Layout

New Education Page Layout

Reducing change aversion.

At go-live we presented the user with a modal popup video explaining what changes had been made and in the event that a power user is completely bamboozled, we had a cookie bar message that displayed a link back to the legacy site for a short period of time and a link to FAQs and feedback.

Feedback loop with satisfaction score.

Over three years of the website being live in all it’s forms, a satisfaction score has been used as a barometer for success. A basic 7 point satisfaction score asking “Overall how satisfied are you with the website?” enabled us to measure our success in the past and in the future. This, amongst one-off email communications was also the channel for website feedback.

And finally, what I learned..

  • Stakeholder buy in is necessary through the whole process, as is user feedback.
  • It’s better to build on a development framework than modify existing code.

…and what I would do if I had more time / could do it again.

  • Be less waterfall
  • Encourage Design Thinking at an organizational level
  • Spend more time in the User Research phase on ethnography, experience mapping and prototyping.
  • and then… Review the technology stack from CRM to CMS.