August 2021 (4 weeks)
Vancouver, Canada (remote)
UI Design
Desktop
Jesse Zonnefeld, SJ Dalmar, Alyce Watkins
Cope Notes is a mental health text service that aims to provide habit changing information in the form of advice, exercises, and thought-provoking facts. Cope Note’s reached out to Springboard to assemble a team of four designers to solve issues of clarity within the free-trial journey and website navigation. The goal for the stakeholder was to improve red routes to ultimately drive clarity and conversion. To tackle this design process we split into a research team and a visual design team. My partner and I focused on the visual and UI design, while also working collaboratively with the research team throughout the project.
Throughout the duration of the project my partner and I focused on the website navigation and issues of clarity within. The research team focused on the free-trial journey to start, but as will become evident in this case study, we decided as a team it was best to refocus our efforts solely on the website navigation. In order to solve the deeper issues of clarity, focusing on one problem would give greater insights into how to serve the user. Our goal would then be to leave Cope Notes with viable research that would help them to make informed design changes moving forward.
Users are having a hard time navigating the website and understanding what the service is. Clarity is the main problem with Cope Notes.
The research methods our UI team used were heuristic analysis, guerilla usability testing, user flow, and prototype testing on a high-fidelity design. By using these methods in collaboration with the UX team, we were able to discover what the true issues were for users.
We had four weeks to complete this project from August 20 - September 9. The following timeline presents a breakdown of how much time we allotted each task.
For the Heuristic Analysis we examined the current Cope Notes website. We analyzed four heuristics we found most important on Jakob Nielsen's: 10 general principles for interaction design. The four that we looked at were: Visibility of system status, Match between system and the real world, Consistency and standards, Aesthetic and minimalist design. We believed by focusing on these four heuristics, overall design clarity and user comprehension would be improved.
We evaluated each heuristic under the following criteria:
The main issues we found were:
• Feedback after a user enters their phone number is not given. Once the phone number is added, "valid" appears, however, the text colour does not meet accessibility requirements.
• User not signed up: arrow is misplaced. After the user signs up, the arrow is confusing.
• Clicking "get started today" the following window is a subscription page, but it is unclear whether it is a trial or leads to paid subscription.
• Under Frequently asked questions when a user clicks a button the answer appears and will collapse when a different button is chosen. This creates predictability for users.
• The "subscribe" page after clicking "get started today" is not clear whether the word "subscribe" is consistent across the whole website in it's meeting.
• The subscribe tab is inconsistent with where the user might think they are located on the website.
• The colours and imagery on the four conversion pages (you, family, a friend, enterprise) are too similar and don't contribute to the different packages
• Clicking "subscribe" without any information takes the user to a random page. The link is inconsistent with what the button informs.
• "Who It Is For" Tab - the reason for having four separate categories is not clear.
• Hierarchy of visual and text elements don't always serve a purpose.
• "Get a Subscription" and "Give a Subscription" buttons are different sizes.
• Clicking "Brochure" under "How It Works" links to Canva and causes confusion because it's a different website
• The input box's width is inconsistent with the margins/padding of the "request a quote" box.
• Visual hierarchy on the pricing page is confusing.
• Reviews are misplaced on the conversion pages.
• Initial information on the homepage - "Think Healthier Thoughts" followed by description and the button - the spacing is inconsistent. The phone is not aligned with the website's margins.
• Rethink hover states for the navigation bar "How It Works" and "Who's It For"
We created our first mockup using the style guide a previous team created. However, minor changes needed to be made in order to meet accessibility requirements by reworking the layout and adjusting some colours to create a fluid experience for the user.
Replaced free-trial banner with a button.
Changed the colour to meet accessibility requirements.
Applied a grid system to unify the page. We later changed this to a larger grid.
Replaced the emotions with neutral wording since Cope Notes wants to reach a larger demographic of people.
Different visuals were applied to the home screen to fit the brand personality.
Created information hierarchy to help guide users.
We added buttons that helps users move quickly between sections.
We drew inspiration from The Nudge, a similar service that sends users a text message with information related to date ideas and activities. Their simple style communicates clear ideas at almost all touch points for the user navigating their site. Our first design used a narrow grid system for the homepage mockup that would later be revised to meet standard practise.
From all of the navigation and design issues we identified in our heuristic analysis, we believed it was important to create a user flow to map out a broader overview of how we wanted users to be guided through Cope Note’s two main red routes: the free-trial journey and subscribing to a plan.
Our team presented the project’s roadmap to the stakeholder, however, with two weeks to go and having had only one real meeting to communicate our ideas with the stakeholder, we decided to consult a mentor to assess our project scope. As a new team with limited resources, our mentor wanted to ensure we were addressing the root of the stakeholder’s problem. This had us re-evaluate our originally chosen research methods and rethink whether we were really gaining a comprehensive understanding of the stakeholder’s problem and the best ways to address it.
Together with the UX team, we unpacked the advice given to us and decided what was feasible given we had only two weeks left to work on this project. Our team decided it was best to:
• Remove the free-trial journey from our project scope
• Create efficient website navigation
• Figure out the root causes that prevent users from understanding Cope Notes’ service
Our team collectively adapted our project plan to generate better research by adjusting the tasks to truly examine the underlying causes that have prevented positive user experiences. As a team, we continued along the path we were on, making the necessary changes to best serve the user (and stakeholder) with the limited time we had left.
While both teams began to execute the new project plan, the UX team had HotJar and Google Analytics research that had been underway for some time. The insights generated from these tools revealed unexpected behaviours from users that would assist our research moving forward. To everyone’s surprise, they found that 80% of users dropped off the website after only looking at the first part of the homepage. Only 6.6% of users scrolled all the way through the homepage from top to bottom.
With this information, we needed to come up with solutions to prevent users from immediately abandoning the page. The following suggestions would be made to the stakeholder:
• The text messages were replaced with a person to humanize the website for people seeking mental health services
• We advised Cope Notes to remove the credentials (CNN, Forbes, Yahoo, TedX etc.) to depoliticize the service
We collaborated with the UX team to identify the hidden issues within the primary red routes during their guerilla usability testing. Based on the findings, the UX team was prepared to discover the true reasoning behind user abandonment upon the initial impression of the homescreen. We also asked them to incorporate questions we had after conducting the heuristic analysis to verify some of the issues we discovered from a design standpoint. We wanted to test the same issues from a user’s standpoint to validate our findings.
While the UX team investigated the deeper issues that cause user confusion regarding Cope Notes’ service, our UI team set out to ideate solutions to rework navigation and create a better user journey through the different Cope Note packages - for the individual, family, friends, and enterprises. We wanted to create an alternative design that the stakeholder could easily implement to resolve some of the interaction design issues. This included:
• Reorganizing how the different packages were presented
• Creating cleaner subpages for each package
• Using a standard grid system and removing unnecessary information
Our third meeting with the stakeholder was positive. We presented our new timeline, the reasoning behind our refocus, and all the feedback from the user testing and analytics. Cope Notes appreciated what we had to show and asked us to test the checkout process in our next round of user testing.
The following before and after photos show the changes we made on the Cope Note’s red routes.
Reorganized the information on the homepage that leads to the free trial.
Reformatted the page in two main parts: the CEO’s bio and Cope Notes’ description.
Reprioritized the information by creating two sections: an overview of the service followed by a subscription fill-out form.
Applied the updated style guide to meet accessibility requirements.
Added photos of users to humanize and personalize the reviews.
The UX Team conducted user testing on our high-fidelity prototype with the same set of questions used during the guerilla usability testing to compare and contrast the results. We also added additional questions to generate more understanding into users preferences.
The following insights were discovered:
• The new graphic on the homepage increased user retention
• Some users expressed disapproval over the informal tone of the FAQ
• Research revealed the users did not understand the reasoning for why four packages existed (for the individual, family, friends, and enterprise)
Our final meeting with the stakeholder was very well-received. We presented our final prototype substantiated by the research conducted by both the UI and UX team to justify the suggestions we were making.
The research we packaged for Cope Note’s gave insight into the problems users were facing that pointed to issues of clarity that exist beyond the scope of the design system itself. All of this information was relayed to Cope Notes to use moving forward, which caused the stakeholder to rethink almost every facet of the website.
Fortunately, the alternative design system and prototype we created could easily be implemented by the stakeholder for the time being, as more research surrounding these new questions could be addressed moving forward.
With the prototyping done, our team was ready to hand off all deliverables that we had completed for Cope Notes. Many issues that users faced were fixed by our prototype which gave Cope Notes a solid direction for future changes to the website.
All of our work and insight was all met with openness and gratitude.
Cope Note's Infographic
If I were to carry on with this project, the four services would be combined into one page and would explain the nuances that differentiate each package. I would also recommend drawing up personas to make sure the personality brand aligns with the target demographic. Additional rounds of user testing would be beneficial to the stakeholder, along with iterations of the UI, to finetune user understanding of the service.
Working for both a startup and a team of driven designers was an experience filled with so many helpful learnings that will assist my UI/UX journey. First off, I was lucky to be paired with a team of great people that made the work we completed so much more enjoyable than the individual projects I worked on myself. As we tackled Cope Notes together, I learned that working for a startup gave us space to forge a path we best saw fit for the project. Rather than just run with the stakeholder’s problem given to us without reflection, my main takeaways from this work include:
• Be discerning of the problem presented by the stakeholder.
• Evaluate the past research conducted to see if it accurately identifies and explores the project’s problem.
• When working with a limited amount of information, it was important to be proactive and use the various UX research methods to analyze the problem given and the solutions previously implemented.
• Showing the stakeholder user testing results is one of the best ways to uncover problem areas to them.
• Presenting the project’s problems to the stakeholder needs to be done with tact and evidence.
• Although we didn’t have time to complete the project, it was important for our team to utilize the time we had that would contribute to the long-term success for our stakeholder.
• Finally, working with great people made the project journey all worthwhile.