Design Thinking, Workshop Facilitation, Prototyping

Partner Kit

Partner Kit
Year
2019
Company
Sun Life
Role
Lead Designer

Overview

Sun Life’s partner kit is an online video repository that contains a range of videos on key financial topics and strategies. It's a platform for third party financial advisors to choose and customize preferred videos by adding their own details (contact information, value proposition, mission statement etc.) to the beginning & ending of the video. This allows them to send personalized videos to each client, prospects, and centres of influence using video marketing.

 

Objectives

Increase engagement & adoption of the site by:

  • Elevating the user experience
  • Making task completion easier and faster
  • Redesigning user interface 

Problem

Based on the feedback from the team that originally sponsored this project, third party advisors were experiencing difficulties when using the platform to customize videos. This had affected user adoption, engagement & retention. 

Users & Audience

3P advisors: these are independent business owners who can sell Sun Life products as well as competitor products

 

Roles  & Responsibilities

UI/UX Designer & Design Thinking Lead

  1. Leading & facilitating UX workshops
  2. Leading & facilitating design thinking workshops to solve problems
  3. UX Research
  4. Screen Design - User Interface
  5. Prototyping & usability testing

Design & research toolkit

  • InVision Studio
  • InVision App
  • UserTesting
  • Paper Prototyping
  • Usability Testing
  • Research Methods

 

Scope

  • Design should be in both English & French languages
  • Vidyard to develop & implement designed solutions & screens
  • Ensure branding is up to Sun Life Standards
  • Limited budget, hence, a true MVP was needed

Process

After getting a deep understanding of scope and business objectives, it was important to hear directly from advisors their first-hand experiences with the platform. Relying on hearsay from the project sponsors wasn’t enough to ensure success. As a UX professional one of the key principles to remember is: we are not the users - we do not design for ourselves or biases but for the true end users of the product.

1. UX Research & Strategy

Objectives of the questions:

  • Uncover usability issues
  • Understand user behaviour and where their biggest problems lie

It was important to use a strategy that did not interfere with or taint the quality of feedback that we got from the users. Therefore, I had to use proven principles in question design.

  1. Eliminate my own or the teams bias
  2. Eliminate leading questions that anchor users to not be true with their answers
  3. Reduce cognitive burden (difficult to interpret & understand)
  4. Allow users to interpret the questions the way it was designed to be interpreted
  5. Ask open ended questions to allow user to explain their reasoning
  6. Keep is short and sweet

 

Tool : UserTesting

It was important for me to use UserTesting.com for the following reasons:

  • See & record user behavior and how they interact with the platform
  • Understand if there is a disconnect between their actions and the answers they provide
  • Hear them speak rather than write answers to open ended questions, as writing can sometimes prove to be a cognitive burden
  • Make it more interesting for the user so they do not feel bored during the research process

 

2. Design Thinking Labs

After completing the primary research, my director proposed a full day design thinking hackathon with the team and our business partners to go through the process of creative problem solving to design a solution that solves the problem advisors are facing.

I then put together a plan for the day, clearly defining activities, session times, breaks etc. This gave the team and business partners a good understanding of how we were going to meet our objectives. It also provided the team structure and a sense of confidence that I was leading the project well to achieve a desired state. 

Hackathon Plan Document
Hackathon Plan Document - Continued

Empathize & Define - Stage: Understand [ 10:00am -12:15pm ] 

The first step of the design thinking process was to present the findings of my research to the team. The purpose of this was to create a shared baseline knowledge of the problems to keep us aligned and focused.

Research findings & insights consolidated in a presentable document

The next step was to discuss the challenges users faced and then create objectives based on user stories, using the “how might we” format. Lastly, after much discussion we were able to pick an ambitious but manageable piece of the problem to tackle. One that was most valuable to the user. 

Here are the top 5 insights from the research

  1. The purpose of the site wasn’t clear at a glance. Users didn’t know what they were looking at
  2. Users wanted to be able to preview the video before customizing it
  3. The video customization process was confusing. 
  4. Users were confused between “video library” and “video app”. Some thought the video app was a place to store finished videos, others also saw it as a place to create videos.
  5. Users had to manually input their information over and over again anytime they had to customize a new video

Diverge/Ideate  - Stage: Explore [ 12:45pm - 1:30pm] 

This is where we generated as many ideas as quickly as possible. At this stage it was important for me to emphasize to the team and our business partners that it was about prioritizing critical thinking over artistry. For those who weren't design/art savvy, this was important to boost their confidence by teaching them to focus on solving the core problem rather than making it look pretty. I then divided everyone up in teams of two, allowing each team to tackle one problem that came out of the research. To encourage critical thinking, I instructed everyone to work with stickies to map out journeys, processes & outcomes to tell a story that made sense for the user. They were also responsible for challenging each other by making sure that every action made it easier for the user to achieve their desired goal.

To give more clarity to the team and our business partners, I developed design principles to help guide us to create a remarkable experience for our users.

Design Principles

Instead of doing a traditional journey map, I elected for us to use story maps. I explained to the team what story maps were and how it benefited us more than just the traditional journey map.

Here is why I choose story maps over traditional journey maps.

Journey maps are for every customer touch point from awareness to purchase to feedback - basically the entire cycle. Story maps are more focused on specific activities and what to do first.

The "what" of story maps:

  • It gives us a holistic view of a product (backlog)
  • It helps us visualize the backlog
  • Product feature prioritization - this is where it was necessary to have the business partners/vision holders involved to help prioritize within the constraint of the budget allocated and what's meaningful to the user
  • Features broken down to user stories

The "why" of story maps:

  • It helps us refine the backlog
  • It helps with scoping and sequencing
  • It helps determine what to build first
  • It becomes the backbone for user stories
  • It helps Identify gaps, pain points, features

Story Maps

Decide - Stage: Explore [ 1:30pm -2:15pm ] 

After ideation, each team presented their various ideas on the process & experience that solved the problem. We collectively critiqued it, making sure we selected the one that best delivered on our objectives.

Teams presenting their ideas on the user journey & process

Prototype - Stage: Explore & Materialize [2:30pm - 3:30pm ]

I asked each team to create a low-fidelity prototype using papers and markers that best illustrated their solutions. This allowed us to be fast in producing solutions that could quickly be tested. Here are a few of the solutions that came out of the workshop.

 

Paper Prototypes

Usability Testing (RITE Method -Rapid, Iteration, Test, Evaluate)

Prior to the hackathon, we had lined up 5 users that would come through on the day of the workshop to test our prototypes and give feedback. My reason for doing a usability test on site with the paper prototype was:

  1. It was cheap, fast and saved time
  2. Helped us do a good job by uncovering usability issues early
  3. Helped us fix usability issues before putting in more effort to enhance the prototype

I then put in place some usability testing best practices that ensured we got good feedback.

  1. Implement feedback from the previous user into the prototype before testing with the next user. This ensured we were making incremental changes immediately to understand how subsequent users would react to the new changes
  2. Simulating the web experience: since the prototype was a web page drawn on paper, it was necessary to let the test reflect what it should be if the participants were to use it on a computer
  • 1 person played the role of the computer: switching papers (screens) after a user was done taking action on that page in order to go to the next
  • 1 person taking notes and recording everything that took place during the test (observer)
  • 1 person telling the users what task to take

By the time we finished the usability test, we had refined and solved about 80% of the usability issues that we otherwise wouldn't have seen until  later on in the development process. This RITE method allowed us to be efficient.

Designing High Fidelity Prototypes

It was now time to turn those paper prototypes into high fidelity screens. I used InVision Studio to develop the screens needed for implementation. High fidelity prototypes give better context and accuracy to our designed solution. It also provides users with the closest thing to the finished product which allows them to give more accurate feedback. InVision made it easier to design, prototype and test these screens before handing it off to the developers.

Below are some of the designed screens:

"Choose a video to customize" Panel
Video Library: Contains all videos customized by the user.
Account Settings

Constraints & Challenges

Change in direction

We had partnered with Vidyard to build the old version of the site. Primarily because they are our video hosting platform of choice. As the project went on, the business decided to bring the site in-house (to be built by our internal developers on our own CMS ).

This meant:

  • It wasn't necessary to build the full experience with vidyard anymore until we brought it in-house.
  • I had to eliminate the majority of the new experience. I now had to pivot and ask myself and the team “ what is the least amount of changes we can make to gain the biggest ROI on experience for our user”.

After careful consideration we narrowed it down to 3 things

  1. Wording - Clarity on the purpose of the site and how it helps the user. Eliminating ambiguous words that confuse the user
  2. Improve the home page layout
  3. Slightly improve the video customization process by simplifying it

 

Testing digital prototypes with actual users

The purpose of the digital prototype was so I could put it in the hands of actual users (3P advisors) for testing.  Either through UserTesting or another round of in-person usability testing. Due to the change in direction and time constraint, the digital prototype couldn't be tested. The prototype currently sits in InVision waiting for the project to be picked up again as we move towards bringing it in-house.

Outcomes

Based on the change in direction and objectives, below are the implemented screens. Screen design was based on the existing visual identity.

Lessons

Is the MVP truly an MVP? 

I noticed that what we implemented as a pivot to the new experience was the closest thing to an MVP than the new experience itself. The new experience was still an MVP because there were features like analytics, that we knew and agreed to not implement. As part of that, our core design principle was to solve the main problem (usability). However, compared to what was implemented, it really wasn't an MVP. The additional constraints forced us to cut out more features to achieve what became the real MVP. 

 Will the real MVP please stand up?

Things change, always be ready to adapt.

I believe one of the key traits of a designer is adaptability: the ability to adjust oneself readily to different conditions in order to gain a positive outcome. Projects are usually laced with curve balls that have the potential to make or break the outcome. I learned to always assume a positive attitude by hoping for the best and tackling it head on.  I could have murmured and complained but I chose to accept the challenge and make the best of it. 

 “To adapt is to move ahead.” Byron Pulsifer

“Adaptability enforces creativity, and creativity is adaptability.” Pearl Zhu

 

Stakeholders & business partners appreciate it when you bring them along the journey.

It's easy for us designers to go into a bubble and keep designing for a “ta daa…... look what I made, Isn't it awesome moment”. However it's important for us to realize that such practices don't foster collaboration and transparency. Nothing sucks more than being part of a project yet feeling lost in the project. A lot of stakeholders and business partners feel that way and it makes a world of difference to them when we collaborate and even co-create with them. They bring unique perspectives and begin to value more what we as designers bring to the table.

  "If everyone is moving forward together, then success takes care of itself." – Henry Ford

 

Open for hire. Let's work together.
say hi.