Website Makeover:
Plushie Hospital
Problem Statement
Wordy and confusing content impedes user understanding
Difficulty navigating web pages, especially for service information
Lack of a footer complicates user experience when scrolling
Solution
Simplify the content by condensing it and using clear language to enhance user understanding
Adjust the placement of the navigation bar to ensure it is fully visible and not obstructed by elements such as the iPhone's notch at the top
Redesign the footer to include visual cues or indicators that clearly signal to users when they have reached the bottom of each page
These refined solutions aim to address the identified problems effectively and improve the overall user experience on the website.
After
Clear and succinct content
After
Navigation bar is clearly shown
After
Footer indicated with another color
Before
Wordy and confusing content
Before
No navigation bar
Before
No clear indication of footer
Responsive Website Project - Process
My role
UX Designer
Duration
2 months
Skills
UX Research
User Interviews
Wireframing
Prototyping
Usability Testing
Introducing Plushie Hospital Website
Plushie Hospital gives your damaged plushies a second lease of life. Its website provides information on how you can do that.
As a plushie owner, I hope to explore the site seamlessly and get clear information about all its services, therefore the birth of this website makeover project.
Gathering insights from other plushie owners
Based on my user interviews with plushie owners whom have explored the site, I categorized the insights into 3 groups as follows :
100%
of the site visitors felt overwhelmed by it’s text heavy content
What is the main problem?
From the user interviews and analysis, the main problems are clear :
Wordy and confusing content impedes user understanding
Difficulty navigating web pages, especially for service information
Lack of a footer complicates user experience when scrolling
An improved website is therefore proposed:
User Flow - enivisioned user navigation within Cleaning Service
Brainstorming
Redesigned Sketches:
High Fidelity Wireframe
Desktop
Mobile
Prototype
Usability Testing Results
Although 100% of users noted significant enhancements in navigation, comprehension of service instructions, and visual appeal due to the website makeover, the usability testing also uncovered additional insights as follows:
40%
of the site visitors struggled to navigate to the service information
50%
of the site visitors would prefer the navigation bar to be lowered
Revised Screens
Based on the feedback I recieved, I redesigned a few screens, the screens on the left are the orignal, whereas the screens on the right are designed after feedback was provided.
Before
Inconsistency of punctuation marks
20%
of the site visitors were unsure if they had reached the bottom of the page
25%
of the site visitors would prefer consistency in punctuations on the “Home” and “Services” pages respectively
What I learnt?
Dealing with the constraint of images
The original images were filled with text making it hard for users to view them
Purpose of the content of footer
It allow users to visit other sections of the company’s website, not mentioned in the navigation bar
What’s next?
Making cards clickable on Home page
Potential users will not be misled , since well known sites such as Airbnb has cards which are clickable
About Us page
Potential users can understand more about how Plushie Hosptial started
Explanation page of sending and receiving toys for repair and repaired toys respectively
Potential users can gather this information from the website without the additional steps of contacting the business to find out.
75%
of the site visitors would prefer the footer to be differentiated
After
Lowered the navigation bar
After
Removed punctuation marks
After
Changed background color of the footer
After
Lowered Home
Before
Navigation bar too near the top
Before
Unable to differentiate the footer
Before
Home to near the top