Vitality online account

I was contracted by Fresh Egg, an award-winning customer experience agency, to lead the design of this project and work in-house with Vitality. My role included translating user stories and business requirements into user flows, wireframes, prototypes, and a UI design that adhered to the internal design system. I worked closely with Business Analyst Divyashree Bajpai and Product Manager Andrew Roast, as well as members of the Vitality UX team.

An evolving prototype was built out to prove each complete journey design to senior stakeholders, as well as give an overview of the functionality to system architects and offshore back-end development teams. This was required before any work was allowed to progress to front-end development.

The prototype comprised of three main journeys, all of which interacted with each other;
• Registering a new member account
• Managing and updating an account
• Retrieval of forgotten account details (x4).

By building this out and adhering to, or adapting the established design system, I was able to identify and reuse a large number of design components, to create familiar journey flows for current users.

While the main brief was to update the current functionality to the new design language, there was definitely potential to add improvements. After checking with the development team and system architects, I proposed the following three user improvements, which were all accepted as new design requirements.

Whenever a member either changed or forgot their details, a message would be sent to their verified email address so they could securely complete their task. Previously this had been an embedded link. But what if a member didn’t have (easy) access to their email on the very device they were using at the time? In the multi-screen world we all inhabit, I felt we should have a better solution.

“Users have a higher chance of completing their primary goal with a code-based solution rather than a direct link.”

I researched alternatives, and OTP’s seemed to fit what we needed. After consulting with developers and architects on the viability and security aspects, I proposed the change to product owners and senior management. You can read more about my proposed solution and the reasons for it in my blog post, One-time passwords –vs– embedded links.

A small but useful change to the mobile UI. Multiple pop-up modals were used across various user journeys. Following the guidance of Luke Wroblewski on today’s larger mobile device screens, I re-positioned all positive action buttons and modals to the bottom of these screens, making them easier for users to reach.

Previously a checklist had been included for users to follow in creating their password;

• 8–15 characters • One number • One uppercase letter • One lowercase letter • Password shouldn’t contain username.

There was a lot of information to absorb relating to acceptable password formats, which gave the possibility of users creating unmemorable passwords in order to comply.

I researched better alternatives, and decided to use a password strength checker. Here users could create passwords and get live feedback on how secure they were before saving.

New components were created or adapted from the existing design system, and added to Vitality’s online pattern library once approved.