top of page

MODELRENO

a website usability evaluation and fixation project

#Mobile Web Design 
#Data-driven Design 
#Website Redesign
[Mockup] iPhone 13.png
[Mockup] iPhone 13 (1).png

Overview

Role: UX Designer

Tools: Figma; Google Analytics

Duration: Four weeks

Individual Contribution

This is majorly an individual work in UX Design, collaborating with the company website developer to enhance the overall user experience of the company's website. I conducted user research, heuristic evaluation of all flows on the website, analyzed the website data and redesigned the most business-impactful flow, shipped an evaluation report and lo-fi prototype.

Impact

5/5

clear about company service

40s

increase in website engagement time

4/5

feel safe to leave personal info on website

Overview

Understand the Company

About

Model Reno is an end-to-end service provider that focuses on delivering a world-class bathroom renovation experience through top-quality designs, materials, and contractors. 

The Problem

bi_person-bounding-box.png

​high rate of fake personal information

ant-design_field-time-outlined.png

low engagement time

Group.png

unclear company service information

Their official website has an average of 1.8K viewers, 95% of which are first-time browsers. However, the average engagement time on the website has decreased in the last three months and the information users leave on the website are fake at a high rate and users are usually unclear about the service Model Reno provides on the first-time phone call.

Understand Company

Understand Users

Who Are They and What Do They Want
Understand Users

Analyze Website Data

(Sidenote: Due to privacy reasons and Non-disclosure Agreement, detailed data and part of the business information are not shown in this case study.)

I accessed Google Analytics to understand website browsers' sources and behaviors. Specifically, I fetched information about user demographic, device preference, user traffic and page engagement time.

Main Takeaways
  • Users mainly comes from social media, Ads and self-initiated search.

  • The majority of users access the website through mobile device.

  • The most popular page on the website is an article indicating the cost of renovation in Canada.

  • Users barely use the call-to-action button "Get a Quote".

  • A fair share of users are attracted to the website through the "Design Studio" button.

图片1.png
(part of the data)

Research

I did competitor research according to the information given by the company, then I conducted secondary research and five interviews to understand people's thoughts and feelings in looking for bathroom renovation service. From all information gained, I created a persona about one of my interviewees, Spencer, because he represents a subset of bathroom renovation service seekers who focused on the efficiency and trustworthiness of the service.

"Why does all bathroom service website look the same? Ask me for personal information, claim providing best service and limited information. I feel hard to trust any of them at the very beginning."

Frame 2.png

DEFINE

Pain Points, User Goals and Success Metric

Business Goals and User Goals

Company

Problem
  • low engagement time

  • high rate of fake personal information

  • unclear about company service 

Business Goal
  • Increased engagement time

  • low rate of fake personal information

  • clear company service information communicated

Users

Pain Points
  • lack of trust on the service and end result

  • lack of key information on the website

  • feel unsafe inserting personal information

User Goals
  • find a trustworthy renovation team and the end result delivering added value to the house

  • easy to find key information on the website

  • feel safe and trustful when browsing a website

So far I have understand the company's business goals and users' goals. I proceeded to look at the relations between them and worked out a product requirement. The relations are very clear now:

If users feel safe and trustful when browsing a website, there will a lower rate of fake personal information.

If the company provides clearer information on the website, users will be easier to find key information.

The engagement time showcases the users' experience in browsing the website and interest level of the companies service, which contributes to the final decision in finding a trustful renovation team.

Define

Website(Product) Requirements

The end-to-end experience of a good renovation service cannot only addressed by a website design. It also depends on the communication, results, efficiency, price, etc. However, from the data it is clear that browsing the official website of the company is very likely the first step the potential customers might take. Therefore, it is essential to define what a website can achieve in fulfilling user goals and business goals.

Be Reliable
  • Provide reliable information on the website

  • Provide safe experience in browsing the website

Be Engageable
  • Provide an engaging experience through interactions

Be Informative
  • Be informative of the company service, service r process and end results.

  • Be informative of the company's strengths.

Success Metrics

Increased Engagement Time
Lower Fake Information Ratio
teenyicons_bulb-on-outline.png
Better Knowledge about company Service

EVALUATE

Current: How Are Users' Needs Fulfilled?
Evaluate

Heuristic Evaluation

The next step I took is to see how the users' needs are addressed by the current website. Most importantly, I wonder how users feel about the company's websites and what frustrations they have during the navigation. Therefore I did a heuristic evaluation for:

  • target 1: overall website performance

  • target 2: key CTA flow- Get an Estimate

There are 6 rules being violated and 13 violation items in total and I rated their priority according to severity ratings: 

Frame 1 (1).png
I don't agree that this is a usability problem at all
Cosmetic problem only: fix if time is available
Minor usability problem: fixing this should be given low priority
Major usability problem: important to fix, given high priority
Usability catastrophe: fix this before product can be released

5 high-priority violation items are found:

Frame 8 (1).png

Usability Test

I also reached out to 10 real users for a usability test and collected the following feedback.

Target 1: Website Overall Usability Interview
image 24.png
image 24.png
Feedback
Service range
  • unsure about the service range at the first glance

Appointment
  • unable to make an appointment because no availability is shown

Feeling unsafe
  • feel uneasy to give real personal information

Portfolios
  • no timeline

  • cannot be found until scrolling down

  • hidden before and after contrast

  • only 8 case studies which cannot show in list form

  • cannot know the differences between them before clicking everyone

Target 2: CTA flow-Get an Estimate
Frame 21.png

Evaluation Summary

According to the heuristic evaluation and usability test, the current website has  strengths in beautiful design and professionalism presence. It also features interactions for users to design their own studio and get a quote. However, there are also frustrations as shown in the report which weaken the reliability, engagement and informativeness. Therefore, the redesign should fix existing frustrations and fulfill these unsatisfied needs to make it more reliable, more engageable and more informative (product goal).

Vector.png
Current Website

Fix existing frustrations

Fulfill unsatisfied needs

Product Goal

Prioritize

What first?

Prioritize

I looked at all these feedback and re-design opportunities. I was thrilled, as a UX designer, to ideate a bunch of solutions, which is my favorite part and head towards redesigning on Figma. However, after brainstorming a list of over 20 solutions, I stopped. I retrieved back to the business goals and user goals. I rearranged the frustrations according to usability urgency and business impacts respectively, and listed the order of fixation urgency.

image 35.png

Fixation urgency

1. hidden and unusable consultation button

2. 5 violations in the "Get an estimate" flow 

3. unsafe personal Information collection 

4. unclear company service introduction

5. company strengths not emphasized

6. previous cases: low in number and difficult to tell differences on homepage

7. Others tweaks and non-UX related frustrations

Design Decisions

How and why?

Design Decisions

Design Decision #1

Make consultation entry another CTA button and appear on the homepage.

Tackled Frustrations

No show of consultation appointment on the website and no availability shown if clicked

Related User Pain Point

Lack of trust on the company

Related Company Problems

Low engagement time

Why Urgent: 

Users: directly related to active potential customers who are seeking for renovation service consultation

Company: has great business impacts

How it works

Users can now easily find it on the homepage and be subtly reminded to consult the company service. The tech team also makes sure the available time is updated on the Calendly.

Design Decision #2

Showing progress of steps to be taken.

Frustrations

Violation of Heuristic Principles--Viability of System Status. (1) Users are confused about the following steps. (2) It disappears when users proceed to later stage. 

Related User Pain point

Lack of trust on the company

Related Company Problems

Low engagement time

Why Urgent

This is in the main CTA flow- Get a Quote. If not fixed, the users might quit at early stage and the frustration might lead to decaying trust on the company.

How it works

The progress bar I added indicates all the steps to be taken with more conversational prompts. 

Design Decision #3

Add "saved" notification.

Frustrations

Violation of Heuristic Principles--Viability of System Status. When clicking the save button, users do not know whether it is saved successfully.

Related User Pain point

Lack of trust on the company

Related Company Problems

Low engagement time

Why Urgent

Usability is greatly impacted if not fixed. Meanwhile, this is in the main CTA flow- Get a Quote. If not fixed, the users might get frustrated about the main service and might lead to trust issues on the company.

How it works

A message will pop up to indicate whether it is successful.

Design Decision #4

The progress sticks to the end of flow.

Frustrations: Violation of Heuristic Principles--Viability of System Status. Users are not notified when the task is done.

Related User Pain point: Lack of trust on the company

Related Company Problems: Low engagement time

Why Urgent: Usability is greatly impacted if not fixed. Meanwhile, this is in the main CTA flow- Get a Quote. If not fixed, the users might get frustrated about the main service and might lead to trust issues on the company.

How it works: The progress bar will stick to the top to indicate the process and it will show 100% when all done.

Design Decision #5

Company service and strengths shown on the very first step of the flow.
Company Service and Strengths (2).png

Frustrations

Lack of clear service information

Related User Pain point

lack of key information on the website

Related Company Problems

Users are confused about the company service

Why Urgent

Users: frustrated and confused about the service

Company: cannot promote their service clearly can impact potential busisness

How it works

A page of company service is shown at the very beginning of the key flow attracted by the button "Design studio", which has most clicks shown by Google Analytics.

Considerations: Whether this page will make users feel annoyed by showing on the first page?

    As I am not sure the users' acceptability of this redesign-- whether it is too aggressive to put it on the first page to sell business, I did usability test after I redesigned the whole flow. I was surprised to find that users feel it is okay to put it there since most of them said they are accustomed to advertisement and this is also one of the reasons they access the company website.

Design Decision #6

Be more transparent and consistent on personal information collection 

Frustrations

Feel not safe and annoying when popping up a form in the middle of key flow

Related User Pain point

feel unsafe inserting personal information

Related Company Problems

fake information left on the website

Why Urgent

Users: The unsafe feelings and frustrations will impact users' overall experience in completing the flow

Company: It might inversely impact the company's bussiness. 

How it works

(1)combined info collection with sign-up page

(2)be transparent about where it may pop up again

(3)add a claim of privacy non-disclosure

(4)add "skip for now"

Consideration 1: Whether to delete this page?

From users' point of view, it must be better if this page is deleted. However, obviously this is a business strategy of the company-- get the information from users and email or call them and the company also thinks it is necessary for their business. Therefore, it cannot be deleted.

Consideration 2: How to combine business with usability?

As it cannot be deleted, the question becomes how to make sure it cut down the unsafe and annoying feelings during the way. The rationale behind my solutions are:

(1) Users are informed ahead of where they might pop up again while written in a positive way.

(2) Obvious info collection was replaced by sign-up, which is more familiar to users.

(3) A non-disclosure claim and what they will receive after the step is openly said.

(4) A skip for now is giving a sense of control for users if they are not ready to sign up.

Design Decision #7

Add company service and cases on navigation bar 

Frustrations

Users who seek for cases are hard to find it on the homepage and unclear about the service

Related User Pain point

Lack of key information on the website

Related Company Problems

Low engagement time; unclear about company service

Why Urgent

Users: feel confused and frustrated for not attaining the most important information

Company: Not satisfying the primary needs for users accessing the website will cause a huge loss of customers

How it works

Users will be easy to find the information through navigation bar

Key Flow Lo-fi Prototype

Final Prototype

Impact

I reached out to 5 real users who are looking for renovation service. According to the feedback, the redesigned website succeeded in the three product metrics: 

5/5

clear about company service

40s

increase in website engagement time

4/5

feel safe to leave personal info on website

(The company is also currently conducting a A/B testing on certain features of CTA flow. To be updated.)

See Other Case Studies

image 16.png
image 17.png
image 19.png
bottom of page