Overview
SunHub is a learning & content sharing platform for both Sun Life employees and third-party insurance advisors. It provides them with industry-leading content that they can share with their clients on their social media platforms. This positions the advisors as thought leaders to spur discussions with clients on insurance and how it can benefit them. While doing so, they also get access to relevant resources to help them grow their business.
Objectives
- Design the user interface for the newly proposed platform
- Increase engagement
- Increase email subscriptions
Problem
Hearsay Systems is a client engagement platform that allows Sun Life to serve compliant content to advisors so they can share it on social media to engage their clients and deepen relationships. Since the business had made a decision to move away from Hearsay, our team was engaged to build our own internal platform that supported compliant content with social media sharing capabilities.
The request
Design the user interface of a new social media sharing platform for advisors that will replace Hearsay.
Users & Audience
- SLFD & third party advisors
- SLFD advisors are independent business owners who are considered employees of Sun Life because they are contracted to sell only Sun Life’s insurance products
- Third party advisors are independent business owners who can sell Sun Life products as well as the products of competitors
Roles & Responsibilities
UI/UX Designer
- Filled in gaps in journey map for the site
- Designed the user interface for the site based on Sun Life’s brand guidelines
- Built interactive prototypes for testing and feedback for internal business partners & executive leaders
- Developed questions using mixed research methodologies for testing prototypes with clients
- Tested interactive prototypes with clients using UserTesting
- Interpreted and shared insights with the team, business partners & executive leaders
- Made designer-developer handoff easier by driving the adoption of a better system (InVision)
- Designed & built email templates to support marketing campaigns
- Mentored team members to create effective banners & communications
Design & research toolkit
- Photoshop
- Craft by Invision
- Invision App
- UserTesting
Scope
- WEM Microsite creation
- Article listing – Sun Life developed & hosted articles, external articles
- Content filtering by audience
- Advisor type identification
- Email subscription form
- Internal site search engine enabled
- Search results filtered by audience
- Mobile responsive
- Content in English & French
- Using the microsite framework
Constraints & Challenges
Web Experience management (WEM)
The site was built on the WEM platform by our dev teams. This had limited customization, making it difficult to push the envelope on what could be done. We also had to build it using the existing framework of another site. This proved challenging because we couldn't improve on certain experiences although we knew it could be better. Below is an example
Article listing pages: The image you see on your left tested successfully with 80% of clients preferring that layout - they liked how the image spanned from edge to edge giving them a much more immersive experience as well as providing more image context. However, when it came to development, we were confined to a small image square because the WEM platform wasn't dynamic enough to accommodate both a rectangular image on mobile and a square on desktop. The image size for desktop had to be the same as mobile.
Designer-Developer Handoff
Prior to this project, the development team was used to receiving detailed pdfs of designed screens with specs, fonts, pantone colors, etc. It seemed like a lot of work to provide specs for every screen. I decided to champion change by leveraging InVision to eliminate the painful process of specs in a pdf. Although the dev teams were initially resistant to the change, I managed to on-board them by teaching, setting accounts, communicating, and showing them the time-saving value InVision offered. This saved us a chunk of time and allowed us to meet our launch goals.
Gaps in the Initial problem statement
After asking multiple questions during refinement around business objectives, outcomes, needs, metrics, pain points etc, it was clear that the initial request to only design the user interface for this new platform only half the story. I noticed some gaps within the initial request that had the potential to derail the project.
- There were gaps in the user journey for the site. This made it harder to design the user interface.
- Little to no marketing strategy had been done to support this rollout - which meant the scope of our work as a team just changed.
This meant we had to review our timelines and make adjustments where necessary to accommodate the new tasks that needed to get done.
Process
1. Understanding business objectives
The first thing was to understand the business objectives to make sure that we were aligned and that the outcomes delivered on the agreed business objectives.
It also meant that, if for some reason the request did not align with the business objectives then a larger conversation needed to happen with the right stakeholders.
2. Asking questions to make sure we are solving the right problem
After understanding the business objectives, it was important to ask all the questions we could think of as it related to the project. Marketers & content writers asked questions that helped them do a better job. My job was to ask all the right questions from a UX perspective as well as making sure we had a problem-solution fit: is this the right solution for the problem?
3. Journey Mapping
After asking a whole lot of questions, I realized there were some gaps in the user journey that needed filling. I remapped the whole site and filled in those gaps. I used stickies because it allowed me to easily move pages around without having to remap the parts of the journey that needed correction.
4. Designing screens
Using Photoshop in combination with Craft: a plugin from InVision, I was able to design an intuitive interface for both desktop & mobile that helped deliver on the business objectives. It was important to take into consideration the behaviours and attitudes of our audience, most of them being between the ages of 45-60. This meant the interface had to be simple and intuitive to compensate for their lack of tech-savviness.
Desktop Interface
Mobile Interface
5. Developing research questions
As I developed screen designs for the various stages in the user journey, one page left us wondering which layout would be more effective. The article listing page was an integral part of the journey because it had a high chance of determining if users engaged with the content or not. I designed three different screens for the article pages to test with 10 users.
The objective was to know which layout excelled in the following:
- Grabbing the users attention
- Providing enough context to make users want to click on it
- Providing a better scrolling experience
It was important to ask questions that:
- Did not involve my own or the team's bias
- Did not anchor or lead users to choose a particular design
- Wasn’t a cognitive burden (difficult to interpret & understand)
- Allowed users to interpret the questions the way it was designed to be interpreted
- Did not take too long to answer
6. Usertesting
Below are the three different screens we tested for the article pages on mobile
Experience 1
My intention was to see if the article title and description were enough to get users interested in reading the article.
Experience 2
Keeping the same format from "Experience 1", I then added images to see if that contributed or took away from the experience. Understanding fully that users would have to do more scrolling, it was still important to understand the user's preferences and behaviours.
Experience 3
With the last experience, it was more about understanding the effects of the absence of a description. Was an image and title enough to get the job done?
7. Sharing insights & Implementation
After testing, I collated the results and summarized the insights. I gathered together the relevant stakeholders, executives & business partners to present the insights. The research showed that "Experience 2" was the better option to go with. While "Experience 2" seemed like the user would have to scroll more, this shortcoming was quickly negated by the immersive experience of both images and description. We all agreed and proceeded to implement the successful option.
Below is a snapshot of some of the answers to the last 3 questions of the entire test.
The results showed that users preferred all three elements: image, title & description to be present. This proved to drive higher click rates and engagement than having one or two of the three elements in place.
8. Handing off final designs to the development team
After multiple design reviews and approvals, it was time to hand it off to the development team to build. Since I had already onboarded them into inVision, it was easy for the development team to go in and pull design specs and assets for the build.
The inspect mode in InVison made it possible to cut out specs in a pdf to save time and allow us to be more efficient
Lessons
1. Ask, ask, and ask more questions
The initial request to design the user interface seemed simple enough, although there were a couple of missing pieces that needed to be done prior to the completion of the initial request. Our team noticed that the way business partners framed problems could easily affect how solutions were built. On the face of it, it seemed like a simple request but asking multiple questions to get a better understanding of the problem revealed much more.
Don't be afraid to ask questions. It doesn't make you look stupid. Dig deeper to make sure you are solving the real problem - Frederick Sappor
2. Make Bold Moves
I learned not to be afraid to champion change where I believed it needed to happen. I believed InVision would save us a lot of time during the design-developer hand-off process. Although the majority of the people were new to it, I was bold enough to take the risk of onboarding everyone and making it happen.
Fear leaves the works undone. Be bold and proceed - Frederick Sappor
3. Collaboration
This probably is the most important lesson. Although I have written about just my part, it took a multidisciplinary team of marketers, writers, project managers, front and backend developers to get this project done. Speaking the different languages of various stakeholders was key to the success of this project. For executives we had to talk about the impact on ROI, for marketers it was about awareness and lead generation. Understanding and appreciating what everyone brought to the table was a game-changer.
T’challa: 2 people in a room can get more done than a 100 people
King T’chaka: Unless you need to move a grand piano
- From the Black Panther movie
4. Revealed gaps in our in-take process
This project revealed a gap in what was our current in-take process at that time. We noticed how one single request to design a user interface turned into multiple things that needed to be done before we could fulfill that initial request. This forced us to review our intake process during our retrospective sessions. Out of that, we were able to develop a more robust process that allowed us to have a true x-ray vision into incoming work. By doing so, we were able to accurately measure, size, and understand the true nature of the work before we took it on.