Sam Winfield Product Design

Liberty Self-service Portal

Liberty's self-service portal offers a simple, user-friendly interface where Liberty clients can view and manage their risk and investment policies easily on any device.

Our objective was to consolidate functionalities from various existing Liberty applications into a single, easy-to-use interface, informed by feedback collected from users and further user engagement in collaboration with a team of internal Liberty designers.

Achievements

We were able to deliver a completed product that Liberty clients and stakeholders loved.

Not only were we able to deliver an excellent user experience and user interface, but we were effective in bridging the gap between Liberty and their clients. The result identified user needs that Liberty had not previously considered and delivered a product that exceeded the project vision and company expectations.

My role

As design lead, my responsibilities included:

  • building and managing the project design team
  • establishing a design strategy and managing the design process
  • engaging with stakeholders to define and prioritize design goals and tasks
  • enabling effective and efficient collaboration between business, design, and development teams
  • working with the design team to deliver high-quality design solutions, interaction patterns, and processes

Our process

As one of the pioneer projects in the innovation department, Liberty prioritized an exceptional user experience. The project was a rare opportunity to fully immerse ourselves in a structured and thorough user experience design process, engaging with diverse users and exploring essential topics, such as accessibility.


1. Empathize

Understanding business goals

Stakeholder interviews

We engaged with key business stakeholders to identify business goals.

Understanding user goals

Heuristic review

We reviewed the existing applications/functionalities to identify areas of improvement and prioritize design goals.


User feedback review

We reviewed and consolidated user feedback collected by the Liberty customer support department.


Contextual inquiry

We engaged with various Liberty clients to identify user groups and identify user needs, concerns, and current user journeys.


Example: User journey diagrams identified during the contextual inquiry



2. Define

The consolidation and analysis of data collected in the "empathize" phase enabled us to define the design and user goals and prioritize essential user journeys, which informed our user stories.


Example: User stories


Defining user goals and pain points

Based on our findings, we were able to identify various user groups and define their goals and pain points in persona cards.


Example: User persona cards


Defining design goals

Innovate and improve

The project aimed to consolidate multiple existing functionalities and processes into one easy-to-use application. The solution would need to be innovative and focus on improving and reenvisioning the existing functionalities rather than replicating them.


A consistent and simple user experience

To seamlessly consolidate multiple existing functionalities and processes, it was essential to deliver a consistent and simple user experience that addressed user needs and pain points and enabled users to complete their tasks efficiently.


Connect with the user

One of the Liberty innovation department's main objectives was to understand and address their users' needs. Users would be involved in the design process's various steps, and we would conduct usability testing regularly.


Optimize for all viewports

Mobile devices have become a central tool in our daily lives. As such, we needed to ensure that we could meet the increasing demand for mobile services and functionalities and deliver a high-quality, scalable experience that enables users to complete their tasks on any device.



3. Ideate

Design strategy

Once we understood the priorities and defined user stories in line with these, we could establish a design strategy and roadmap.

The innovation department adopted the agile methodology, which provided a solid foundation for design and development collaboration. We worked in iterative sprints to ensure that improvements were a consistent part of our workflow and we could regularly apply new learnings. The development team and business stakeholders were involved in all design decisions to ensure that we aligned business goals and technical restrictions in the early design stages.


Example: Design roadmap

Example: Sprint planning

Ideation sessions

Ideation and exploration sessions were a regular engagement within the design team to discuss design challenges and brainstorm solutions.


Information architecture ideation: Card sorting

Navigation patterns and the information architecture were established and validated through card sorting exercises conducted with Liberty users.


Example: Card sorting exercises

Example: Information architecture restructure



4. Prototype

Low-fidelity

Low-fidelity wireframes and prototypes enabled a quick way to visualize, test, and iterate design proposals to encourage an iterative and explorative design process.


High-fidelity

Once low-fidelity design proposals were approved, we created high-fidelity designs, leveraging the Material Design library and the Liberty innovation department style-guide.


User journey example: As a Liberty client, I want to view the premium for my Evolve policy


Example: High-fidelity mobile designs

Example: High-fidelity designs



5. Test

Usability testing was a high priority for the project. We conducted and moderated usability testing sessions after every design sprint.


Techniques

We adopted various usability testing techniques to validate and inform design decisions:


Moderated testing

We conducted moderated usability testing most often to validate design proposals. We asked Multiple users to complete the same tasks while interacting with a design prototype. Their interactions were observed, recorded, and later analyzed.


Snapshot: Moderated usability testing setup

A/B testing

A/B tests enabled us to distinguish and understand user behavior and interaction patterns. We presented different users with different versions of the same functionality or feature. We then observed their interactions and evaluated various predefined criteria to determine which version of the prototype users most effectively engaged with.


Analysis

We later analyzed usability testing session recordings and notes to identify strengths and weaknesses in the user experience. Weaknesses were noted and explored in the iteration phase of the design process.


Example: Usability testing analysis documentation.



6. Iterate

We adopted an iterative approach to encourage constant improvements and enhancements to achieve the best possible results. We further explored weaknesses identified in the testing phase to improve the user experience.