Background
Research
Design
Testing/Outcomes
Prototype
Reflection
Back to Top

Mobile Home Page Redesign

Redesigning a mobile homepage for a biotech startup to promote lead conversion rate

Status: Live on Mobile
Jump to Prototype ->
TEAM
Head of Marketing
Head of Engineering
Chief Operating Officer
Graphic Designer

TIME
~100 hours
ROLES
User Research
System Audit
User Testing
Prototyping
IMPACT
~30% increase in lead capture rate, equivalent to ~$223k in added annualized revenue
TOOLS USED

01 BACKGROUND

context

What is Motus Nova

Motus Nova is a medical technology startup company that makes at-home rehab technologies for brain injury survivors. Their two products are The Motus Hand and The Motus Foot. Motus Nova uses a subscription based model, where users can rent the product for any number of months and return it when they want to, ideally once users have recovered.

After working on Motus Nova’s sales team for 1 year and as a UX Designer for about 7 months, I felt ready to tackle on a website redesign project. Before starting the project, I met with the head of Marketing and Engineering to discuss the scope and goals of this redesign.

probLEm break down

how can motus nova get more sales?

02 RESEARCH

research objectives

3 research objectives for success

1
Understand how users currently navigate the mobile website
2
Identify UX Blockers, if any, in filling out an assessment on mobile
3
Discover painpoints while exploring the mobile website
Fig 1 Example of user feedback subsmission

research

usability testing on original website

I chose to do two types of preliminary usability tests on the original mobile website, moderated and unmoderated so I could get as much feedback as possible. I was able to recruit 7 users for moderated testing and 7 users for unmoderated testing. By the end of gathering feedback, I had 99 pieces of feedback to sift through!

Both tests required participants to submit feedback directly on the website (seen on the right).

Moderated Usability Testing

Link to Script
‍

Part 1 Silent Observation
 I silently observed while users were instructed to explore the website as they would if they were a caregiver to a stroke survivor, leaving positive or negative feedback directly on the website (Fig 1) when they wanted, as well as talking through their experience
‍

Part 2 Feedback Discussion
I viewed the feedback given and notes taken during the interview to have a discussion on the why’s behind their thoughts

Unmoderated Usability Testing

Link to Instructions
‍

Task based unmoderated usability test using the Hotjar’s Ask platform and panel. Participant’s main task:
‍

Task
Fill out feedback (Fig 1) while navigating through website

AFFINITY MAP

top 3 themes from usability testing

View my entire affinity map here!

discovering our user

user flow

I used Google Analytics to analyze common user paths on our mobile website. I created this user path as well as denoted user drop off rate from page to page.

discovering our user

user demographic

According to Google Analytics, about ~66% of users are 54 years old or younger, suggesting that these users might be caretakers looking into the product for a loved one.

User Flow

User Demographic (age)

persona + Storyboard

empathizing with our user

I’ve talked to hundreds of caregivers during time in sales, so I wanted to emphathize I bit further on their frustrations. I decided to go a step further a create a storyboard of what Carol may be going through.

persona

Storyboard

debriefing with client

TLDR; research summary

After presenting my research with the client, I wanted to discuss a solution that was manageable to implement and research backed.  Below are key findings from the usability tests and interviews.

key findings 1

Poor storytelling

71% of users noted they did not understand the product as a contributing factor to fatigue. In addition, users were not able to understand how the product worked halfway down the website. This got me thinking that it reordering the section of the website was not only important to tell its story cohesively, but also to include the important parts first.

key findings 2

Assessment Frustrations

‍85% of users voiced that the pop-ups were distracting. When asked if they would feel compelled to fill it out based on the website, 70% said no, mainly because they did not understand what the product was.

Slide 15 from Research Presentation
Slide 14 from Research Presentation
View My Research Presentation

debriefing with client

5 design opportunities

Restructuring Content to Tell a Cohesive Story
Design Opportunity 1
Redesigning the Hero Image
Design Opportunity 2
Rethinking "How It Works" to be use for an end user
Design Opportunity 3
Changing Assessment Frequency
Design Opportunity 4
Redesigning the Assessment Form
Design Opportunity 5

03 DESIGN

design opportunity 1 + 4

restructuring content to tell a cohesive story

changing assessment frequency

The first step was the restructure the content from the old home page to tell a more cohesive story. The proposed section breakdown is not only more concise but also gives the user a story that makes more sense by building credibility as soon as possible then explaining it.

I also explicitly labelled where an assessment trigger would be appropriate.

Original Home Page
Section Breakdown

Social Proof
Motus Team
How it Works
Videos
Credibility
Why video
Expanded FAQ
Timeline
Drop down FAQ
Footer

Proposed Home Page
Section Breakdown

Social Proof
Credibility
Social Proof  
How it Works
Motus Team
FAQ
Timeline
Footer

design opportunity 2

designing the hero image

Searching through the company's archive of videos and pictures sent from their userbase, I saw that there were many "before and after" type videos.  These were great examples of users who have seen success with the product. I thought converting them to gifs would allow visitors to quickly understand that users are seeing progress with the product.

I had some trouble trying to create a hero image. I wanted the hero image to show that the product works for many people. I drew inspiration from collage-esque boards (ie Tumblr).

After showing to my team the V1 arrangement, the main critique was that it looked too busy and there was not enough information for anyone to understand what was going on. I then created alternate arrangements to see how images might look with text blocks.

design opportunity 3

rethinking "how it works" to be useful for an end user

The original how it works section on the website was about how the device itself worked, however feedback suggested that it was not helpful. The Proposed “How it Works” Section would have steps a user would expect to see starting from receiving the device to returning it. I created a rough step-by-step outline for our graphic designer. From there, he created the gifs for the new How It Works section.

design opportunity 5

redesigning the assessment form

The original assessment form visually looked cluttered, a user even said they would not fill it out because of how many questions it was asking. The “Call Now” tab also was redundant as there was already a call button located at the top of the screen. Because the goal of the project was to increase assessment submissions, the design should be simple as possible to accomplish that.

04 TESTING and outcomes

usability testing round 2

comparing current and proposed mobile website

I wanted to test the effectiveness of my redesign so I tested two groups of participants. One group was tested on the original home page and the other group on the redesigned homepage.  I wanted to test if users in the experiemnt group would understand the product faster and more accurately than the control group by viewing the content on the home page. Both groups were asked to complete the task and answer Q1 and Q2.
Task: Explore the homepage to understand how the company helps end users.
Users then explored the homepage while I timed them. Users were tasked to notify me when to finished looking through the home page.

I then stopped the timer and proceeded to ask the following questions:
Q1: How does the company help its end users?
Q2: On a scale of 1-10, how likely would you fill out an assessment to learn more based on what you’ve seen on the homepage?

other observations 1

Understanding the product was a physical device

In the control group, only 40% understood the the product was a physical device that was shipped to the user’s home. Others assumed it was an app or program could be downloaded. In the experimental group, 100% understood the product was a physical device.

other observations 2

Emphasis on being a subscription

In the control group, none of the participants mentioned that the product was under a subscription. In the experimental group, 80% mentioned that the product was under a subscription. The emphasis on being a subscription on the home page may help visitors quickly understand how to attain the product and also internalize that this product is meant for recovery, unlike a prosthetic (which some users confused the product for in the first usability test).

priority revisions

what i changed and why

05   PROTOTYPE

interactive prototype

Final interactive Prototype

Review "Final" for final mobile homepage proposal & "Original" Flow for original mobile homepage. Expand prototype with expansion icon (top right of Figma block).
View website on mobile: https://motusnova.com/

06 reflections

reflection

advocate for research backed designs

As the sole product designer at a startup, I have placed a strong emphasis on data-driven design. Through access to the company's Google Analytics and Hotjar accounts, I have been able to gather valuable insights into user behavior, which has informed my design decisions. My data-driven approach has allowed me to create designs that are grounded in real user data and insights, resulting in a product that meets the specific needs of our target audience.

I have constantly asked questions like "What would a caretaker want to see on this site?" to ensure that the product is designed with the end-user in mind. This approach has allowed me to create designs that are not only visually appealing but also functional and relevant to our target audience. I am excited to see the launch of this product and am confident that it will be well received.

reflection

what it was like working as a product designer in a startup

This has been an incredible experience for growth. The fast-paced environment, tight deadlines, and high stakes have challenged me to become a more adaptable and resourceful designer.

It has also led me to exercise a high degree of autonomy and ownership over the product, which has been incredibly empowering. Being able to work closely with the engineering team allowed real-time feedback leading us to iterate quickly and bring the product to life in the best way possible. Another exciting aspect of my experience was working with the graphic designer. We were able to share our design perspectives and techniques, which helped us to come up with creative solutions to complex design problems.

Overall, I am thrilled to be a part of this startup and to see our product finally launch. It has been an incredible journey filled with challenges, but also with moments of great creativity and collaboration.

<- Nike Buddies

wecasa ->

MADE IN WEBFLOW BY BIANCA SHRESTHA  • 2023