01. The Goal
Create a modern, user friendly, and responsive website that would educate the public about the annuity offerings and help policy holders access and understand their account information.
The problem: Not many leads were being generated from the consumer website. In addition, the website and portal were outdated and hard to use.
The team: Project Manager, UX Manager, UX Designer (me!), Creative Director, Visual Designer
The tools I used: Visio, Sketch, Invision, Zeplin, Aha!, Usertesting.com
The deliverables: Business requirements document, sitemaps, content audit, template library, design system library, mobile and desktop wireframes, prototype, usability study results
Discovery
The research phase was conducted carefully and thoroughly. Workshopping with the stakeholders, we looked at competitor websites compared with their website to determine what they liked and didn’t like, what worked and what didn’t. Following that, we were able to write a business requirements document, analyze their information architecture and propose a new sitemap which would inform the navigation piece across both the website and portal.
02. Desktop Experience
As in the B2B side of the project, the visual designs were built directly from the same Sketch file I used for the wireframes, which meant the visual designer could use all of my layout component and symbols, ramping up quickly on the production and increasing efficiency in the process.
03. Mobile Solutions
The users of this B2C website and portal skewed toward an older audience. Use of smartphones in this user group has been increasing substantially: “Four-in-ten seniors now own smartphones, more than double the share that did so in 2013.” For this reason it was very important to have a good, accessible mobile experience, including large font sizes, good contrast in colors, and easy interactions.
04. The Process
The navigation piece was particularly important because getting it right meant that consumers would be able to easily navigate the website and policy holders would have easy access to their account information – one of the main goals of the project. For that reason, we went through many iterations of this part of the project, before moving on to wireframes of the pages. The content was carefully considered as it was put into wireframes for relevancy and hierarchy. This was achieved by designing in a mobile-first approach.
By understanding the types of content we needed to use through a content audit, we were able to design on a pattern or component level, which allowed for the creation of reusable elements that could be combined in a multitude of ways to create templates. This greatly aided in an efficient handover to the client’s development team at the completion of the project and allowed the client to scale the project as needed once we handed over the work.
05. Final
Once the wireframes had been signed off, they were given to the visual designer to skin. A few weeks later, I was able to take the final visual designs to create a prototype in Invision to conduct an unmoderated usability test with. After writing a test plan, in which we outlined the goal of the usability study, the criteria for the users, the tasks they would complete, and the post-test questions, we built the study in Usertesting.com and ran it. We ended up with a total of 11 usable studies out of 12 participants, and received a lot of valuable feedback. Presenting those insights back to client, we were able to decide which changes to the design should be implemented – they all ended up being minor but important tweaks that greatly enhanced the experience. Overall, a really great outcome!
Usability test – Task success page
For this usability test, we tested users on a total of 5 tasks. Overall, the results of the test were quite positive, with users not feeling overly frustrated by completing the tasks. We noticed a large drop off of success on tasks completed in the authenticated pages, but with a deep dive into the analysis, we determined this could be attributed to users not being familiar with the “dummy” data that was baked into the prototype as well as a lack of understanding about the overall concept of annuities.
Usability test – Task results page
Through this unmoderated remote usability test, we were able to collect some good data about users’ feelings towards annuities. In this case, users felt like the site content didn’t go in depth enough to explain the detail of what annuities are and what they provide. Users expressed a desire to see more information, benefits, charts, graphs, and videos – content items that would make them feel more comfortable about understanding what annuities actually are.
Usability test – Questionnaire result page
After the usability tasks were completed on this test, we were able to ask a few post-test questionnaire questions. Our client wanted to get a better understanding of how users felt about their brand, so we asked for some keywords that users would use to describe the look and feel. The top 4 words were all very positive: clean, trustworthy, informative, comforting.
