Potentialife

A fresh new user experience design for positive psychology and leadership development platform. Clearer information architecture providing greater accessibility for it’s users to learn when and where it suits them best

VIEW PROJECT

Improving a digital product
with a 20 day time frame

INTRODUCTION

Who are Potentialife?

Author & Harvard University Professor on positive psychology; Tal Ben-Shahar. And Ex-McKinsey & Company, Global Director of Leadership Development come together as Co-Founders of Potentialife.

Selling to large corporations such as Sainbury's, Barclays, Sky, Greencore and Deloitte. Potentialife brings behavioural change to tens, hundreds and even thousands of colleagues. Developing them as more productive, engaged, authentic, energetic and purposeful individuals.

WHERE TO START

What were the key problems?

How was Potentialife's product currently working for it's users and their employers?

For the customer

• Confusing course navigation
• Lengthy page text 
• Unclear data representation
• Confusing form fields
• Multiple platforms
• Difficult to use via mobile

 

For the business

• Difficulty supporting users
• Long onboarding times
• Hard to quantify results
• Challenging CMS systems
• Users on low quality devices
• iOS/Android/Windows Apps
 
 

Potentialife's Original Product DesignPotentialife's Original Product Design

Getting to know the business and understanding Potentialife's customers

To kick things off quickly we ran a couple of workshops to get a complete brain dump from the business as to who they believed their customers to be. During the process we also gathered a fuller understanding of how Potentialife assisted it's users, where the product comes into their lives and how it compares to other competitors within the market

ASSUMPTIVE PERSONAS

Outcomes from the workshop, three assumptive personas

Other than some useful insights into how the business saw Potentialife developing and evolving as a product, we also gained clear insights into the users of the product

PersonasPersonas

INFORMATION ARCHITECTURE

So... how does it work? What's the course structure? Where does someone start? What do they need to do to get through it?

Understanding the entire course structure empowered us to tackle key pain points for both the business and it's users. Coupled with setting the foundations for an improved information architecture and course navigation

Programme_PlanProgramme_Plan

INVENTORY & AUDIT

Content Features, Required Components, Usability, Data, Streamlining & Simplification

Assessing the current platform enabled us to grasp it's scale, discover key page templates, create a component list of required modules, discuss pain points, investigate data, consider current interface issues and begin to brainstorm and wireframe potential features and possible solutions for the sticky points

InventoryInventory

Let's develop a responsive navigation that's understandable and acts as a helpful addition to users course experience

Where am I? What do I have left to complete? What have I completed? How far till the end of this module? Just a few questions we tried to answer with an improved navigation

NavigationNavigation

How do the components required for the programme come together and sit within the interface without confusing our users?

Do the new interface components fit together? Is the flow from one screen to the next logical? Are elements consistently positioned? Would a user be required to learn the interface of each new step? Or are the elements seamlessly positioned, to lower the cognitive load, empowering users to learn in the most efficient and frictionless manner

Mobile Wireframes

Mobile_SampleMobile_Sample

Desktop Wireframes

Desktop_SampleDesktop_Sample
Wall_WiresWall_Wires

USER INTERFACE

Develop a solid foundation for our user interface through the creation of consistent looking components

Our components needed to work seamlessly together. Slowly laying up the different elements of the experience allows us to do this through interface styling and design. We needed to consider, how does our typography look across the product. How does it work with the marketing and the Potentialife brand? What happens to these elements across different screen sizes? Will all our users be able to read the smallest font size? Are the form fields clear and usable? How does a questionnaire look? How do tables fit together and work responsively? is the information required within a table clear and easily understood?

Interactions & User Interface elements working together as one to improve the experience

How do we make questions 100% clear for users? Is it clear that there are a number of answers, and that they relate to one particular question? What happens once a question has been selected? Is it clear for a user which question they selected?

Sample Interaction Flow of Potentialife's Multiple Choice QuestionSample Interaction Flow of Potentialife's Multiple Choice Question

NAVIGATION INTERFACE DESIGN

The navigation needed to be clear for users, providing sight of where they are and what lies ahead for them.

How do we position different required elements of the navigation? What text is more important then others? How do the icons fit into place? How do we keep everything touch enabled? And what do the interactions look like?

Sample of Potentialife's Responsive Navigation Interface Design DetailsSample of Potentialife's Responsive Navigation Interface Design Details

USABILITY TESTING

Is the new interface userable?

How do we know if the solution makes sense? Can users find their way around? Is it clear which step is next for them? Is the data visualisation clear? Is it an easy and seamless journey from the users dashboard, to their first step in module one? Is each required task clear? Does the language make sense? These were just a few of the questions we tried to discover answers to while testing variations  of the product. With each learning new insight we iterated and then tested our improvements.

User Testing ImagesUser Testing Images

PRODUCT ENGAGEMENT

How through the interface can we encourage our users to keep up their engagement with their learning?

Through the use of inspiring imagery on the login screen, a dashboard to share a users progression, how far they've come, what an individual user has achieved, other encouraging words from previous users and what lies ahead through the entire course and similarly what lies ahead within their next modules 

_Home_Pages_Home_Pages

PRODUCT INTERFACE IMPROVEMENTS

Streamlining the product content for a focus learning experience

Through careful consideration of the products content, it's exercises and a process of refinement we aimed to really focus our users experience of each step of a module to empower complete focus on a very clear and straightforward step and exercise. Addressing many pain points getting fed back from the current platform implementation

_Product_Pages_Product_Pages

Summary of improvements

With Potentialife's focused effort on improving its user experience, the team was able to achieve many of its initial goals.

Improved Navigation

• Improved overall product usability
• Clearer sight for users current course location
• Preview for whats on users course horizon
• Responsive, mobile-first solution
• Touch enable interface design
• Creating more intuitive user experience

Improved Interface Design

• Clear hierarchical component structure
• Cleaner art direction and typographical layout
• Easy to view & use course stages and next steps
• More intuitive form designs

• Clearer user interactions & course experience 

Improved Dashboard

• Complete course overview
• Social integration with other course participants
• Easy resume course function
• Badge functionality for encouragement and gamification of product
• Easily accessible product support

 

 

Are you looking to improve your businesses digital offerings?

Share your company's biggest challenge, frustration or problem with improving your digital product's user experience

[unex_ce_button id="content_2pdmeu1ea,column_content_rwoeiymwj" button_text_color="#ffffff" button_font="regular" button_font_size="16px" button_width="auto" button_alignment="center" button_text_spacing="1px" button_bg_color="transparent" button_padding="15px 40px 15px 40px" button_border_width="2px" button_border_color="#ffffff" button_border_radius="66px" button_text_hover_color="#ff6600" button_text_spacing_hover="1px" button_bg_hover_color="#ffffff" button_border_hover_color="#ffffff" button_link="https://airtable.com/shrveDJfe5IgtoTyP" button_link_type="url" button_link_target="_blank" has_container="" in_column="1"]ANSWER HERE[/ce_button]