Staged by Stephanie is a business website connecting home sellers, home owners, and realtors with a one stop shop for home staging, home design, & other home services.
I was tasked with identifying the main usability issues within the site, designing a new way to organize information within the site, and implementing a consistent style guide.
UX Designer
UX Research
Visual Design
July 2021 | three weeks
Home sellers and homeowners need to find services that are tailored to their needs. StagedbyStephanie provides just that, however, her current website currently has some usability issues which is making the process of viewing services and contacting the business difficult for the user.
A complete redesign of the website that streamlines important information to our users, establishes business credibility, and implements a more consistent design pattern across the whole site.
In order to identify the key pain points users were facing with the website, I conducted user research to gain insights from how our users were feeling navigating through the web experience and identified the main challenges they were facing.
Using the original website, I conducted a usability test with 5 participants to discover the main usability issues.
👤👤👤👤 | four out of five users could not find Stephanie's home design portfolio
👤👤👤👤 | four out of five users did not like the inconsistent font style, size, and formatting
👤👤👤👤👤 | five out of five users mentioned an overwhelming amount of information
👤👤👤👤👤 | five out of five users mentioned the navigation bar was confusing
The most common key pain points I identified through conducting user research further assured my predicted assumptions of challenges users were facing while navigating through the website.
👉 Overwhelming amount of information
👉 Inconsistent design across website
causes confusion
👉 Information scattered across the website
👉 Portfolio is hard to access
👉 Users want access to the most important
information (i.e. services, portfolio, contact
information, about, testimonials)
👉 Users want to view credentials in order to
establish SBS as credible
👉 Information overload: Overwhelming amount of information on landing page makes navigating the website difficult for users.
👉 Inconsistent design: Different typefaces, font size, font style, and formatting make the website confusing to users.
👉 Unclear user flow: Information is scattered across the website and user's don't know where to begin.
👉 Hard to access: Users want access to the most important information first i.e. services, portfolios, testimonials, contact, about, without having to navigate to different pages
Based on my initial user research, I identified key challenges that our users were facing and identified the following problem statements:
👉 How might we connect users to the right information?
👉 How might we organize the information architecture in order to simplify the user journey?
👉 How might we establish business credibility in order to gain user's trust?
👉 How might we create a concise and consistent visual style throughout the website?
Before starting to brainstorm solutions to the problems users were facing, I listed out user needs with business goals to see where the align and how I can adjust my design process going forward in order to ensure both sides were met.
✨ With the challenges for this project, user needs and business goals identified, I was ready to start brainstorming solutions considering end users throughout the entire process.
My initial wireframes helped me to brainstorm possible solutions and visualize how the layout of the new website would look like taking into account the most important features our users wanted to see.
I considered the following key changes:
✨ A streamlined navigation bar to showcase most important tabs
✨ Establishing business credibility to users in order to gain trust from clients
✨ Consistent formatting throughout the website
One of the key pain points users identified was an overwhelming amount of information being thrown at them once they landed on the website. This made navigating through the website confusing to the user as they did not understand where they were located within the site itself.
✨ A new streamlined navigation bar helps to organize the most important information that our users are looking for.
👉 The original information architecture had too many tabs that weren't useful to the user
👉The original tabs used different words such as "packages" and "services" that users did not understand
👉The original navigation bar had separate pages set for SBS's design portfolios which made finding them difficult for the user
✨ The new navigation bar included all three services underneath one "Services" tab
✨ The new information architecture displayed the most important tabs to our users based on user research
✨ The new navigation bar separated "About" and "Contact" to create more streamlined pages within the website
Establishing business credibility was important to both the user and the business, as the business wanted to gain trust from their clients, and the users wanted assurance in the services they were seeking.
✨ By including testimonials and credentials in the same area, the user can navigate to a section of the website where business credibility is established and where users start to gain trust with the business.
After sketching out wireframes, I decided to create a low fidelity prototype to test out my solutions and test for usability before continuing the rest of the design process and moving on to the visuals for the final prototype.
✨ Focusing on the usability of the underlying UX was key to establishing what worked and what areas needed improvement.
👤👤👤👤👤 | five out of five users could find SBS's different design portfolios ✅
👤👤👤👤👤 | five out of five users could find where to contact SBS ✅
👤👤👤👤 👤 | five out of five users mentioned the website being more organized ✅
👤👤👤👤👤 | five out of five users mentioned the navigation bar more clear ✅
After creating my prototype from low fidelity wireframes, I put together a survey and conducted a new usability test with the same five participants asking them to perform a series of tasks. I had hoped to gain enough feedback to take into account in my next iteration of designs.
✨ Intuitive navigation: New straightforward navigation bar showcased most important tabs users wanted to see first.
✨ Organized content: New information architecture made content more organize for the user to navigate through.
✨ Testimonials: A testimonial page serves as a platform to show users how others have benefitted from SBS services and establishes trust.
✨ Consistent design: A new style guide created a cohesive look across the website and pleased users aesthetically.
✨ Although the results from my usability test using a low-fidelity prototype brought in some positive feedback, it also showcased areas for improvement within my original design that users wanted to see implemented.
👉 Drop down menu: A drop down menu under services proved to be helpful to users who wanted to navigate to a specific service.
👉 Prominent buttons: Adding buttons to the layout of the page made locating certain areas of longer screens easier to reach to.
After taking into account the user feedback from my second round of usability testing, I created a final prototype that included my iteration of design changes. This is what the new home staging and design website experience is now.
I conducted a third round of usability testing with 5 participants asking them to perform yet another series of tasks within the high-fidelity prototype in order to validate my design solutions and test for any pain points users would face with the new website redesign.
✨ Testing again, and again, and again, is key to the design process and validating design solutions. This also ensures that the design process stays user-centered and empathetic.
Although this was a self-developed project, there was still ways to measure success within the new design solution.
This was my first end-to-end UX case study. I learned a lot from this experience (a lot) but some important ones I'd like to highlight are;
✨ how important it is to understand your users by conducting research before brainstorming solutions
✨ how consistent testing and iterations are key for validating a design solution
✨ how the design process really works in practice
& there is always room for improvement! Although this was a self-guided project and my firs time redesigning an existing website, there is still so much that could be improved upon. For the sake of time I decided to focus on the major issues users were facing first and making the website usable. Some next steps I would consider is how to implement educational information the business wants to share with users and how to rewrite content information to improve the UX writing.