top of page

Redesigning an existing website to create a user experience that reflects the users’ needs better and to create a design that maintains a pleasing aesthetic and simple interface.

IMPORTANT NOTE: This redesign is only speculative work and not actual live construction for Stevens Creek Optometry.

Project Overview


Stevens Creek Optometry is a local business in Cupertino, California. Nowadays, many users utilize the internet and browse the web to find information they need. Stevens Creek Optometry has a website with outdated design patterns, and does not give an impressive first impression to users looking for eye care. 

With so much competition in the area, my goal for this project is to redesign the website and create a user experience that reflects the users’ needs better with an easy-to-use interface that provides a satisfactory and meaningful usage.

Original Site - Homepage


Problem: Improve user experience from an already-existing website

Solution: Redesign website with an improved user flow while maintaining a modern yet timeless design

My Roles

User experience designer

User experience researcher

Visual designer


Figma, Photoshop


User interviews, Wireframing, Usability testing, Digital Prototyping, Branding


March 2023 - June 2023

User Research

Expected Mood Statements

When I started drafting the website redesign, I thought about what I wanted the user's first impressions to be when navigating the site for a new optometrist. I've summarized my thoughts into the statements below.

1. The user feels cheerful and relaxed when they interact with the website

2. The user is relieved to easily find key information about the business and have a streamlined process when making an appointment

User Research Summary

I conducted interviews to users with an age range to properly gauge how different users interact with the website and note what kind of information they are seeking out when looking for a new provider. The current website implementation received feedback regarding process and product pain points. Although majority of users appreciated easily finding the business information, the root causes of these pain points were identified as how information is presented to the user and the company’s branding.

To target these pain points, I performed research on websites that provide similar services and conducted a competitive audit. I then created a sitemap based on my findings which is explained more in the Design Process.

Interview Questions & Pain Points

Key interview questions that helped guide my initial design decisions:

On a scale of 1-5, what would you rate your technology fluency? 1 being no knowledge of using technology, 5 being you can easily understand and navigate with different types of devices and websites.

❓ What is your first impression of the original website’s mood and style?

[This website] is so ugly. Very cluttered and hard to read. The homepage has too much text and colors. I would view easier to read websites first.”

Pain Point 1

Website design and aesthetic is dark, outdated, and visually unappealing.

Pain Point 3

Aspects and features of website need to be modified or have additions that convenience the user & helps them save time.

The formatting of the website is very cluttered and there is some icon overlap. However overall, the website contains all information I would need to book an appointment.”

Pain Point 2

Presentation of information is overwhelming and over cluttered.

Competitive Audit

To identify the solutions that are widely used on websites that offer similar services, I looked at 10 other optometry websites and organized the patterns for each main section of the website. Examples of the best practices I found are shown below.

Website is clean, simple, and aesthetically pleasing. Office protocols section could be useful so users that are prospective patients know what to expect.

Iconic Eyes


The middle section of the homepage has information about what the business provides from the type of eye care to different eyeglass brands they carry. This can be beneficial information to prospective new patients.

20/20 Optometry

Berryessa Optometry

This site presents some of the more important use cases for a prospective patient as the first items on the homepage such as large buttons to request an appointment, contact the business, and reviews from other patients.


Competitive Audit Comparison Chart

My competitive audit consisted of going through different optometry websites and taking note of different things that are essential to a user's experience such as first impressions, website interactions, visual design, and content. View the charts below to view my notes for each website.

Note: Clicking on the image will enlarge it in a pop-up


Design Process


Despite the original website’s poor branding and presentation, the content of the information was sufficient and had positive feedback from user interviews. I created a sitemap that was similar to the original website for the redesign.

After considering ease of access for users, I made the design decision to omit additional internal links on informational pages such as provided services and products offered. Instead, the redesign displays all information on one page as opposed to redirecting to other pages.

Original Sitemap


As shown on the left, the original sitemap contained many different internal links. The user would have to go back and forth between pages to view different information that fall under the same category.

Redesigned Sitemap

The redesigned sitemap simplifies pages by reorganizing information to fit on one page so the user is able to view it all at once. Additionally, a clear, separate link for making an appointment is added.


Paper Wireframes

I wanted to simplify the original website’s design while still maintaining all of its original content. With my competitive audit, I was able to distinguish main features such as the header, homepage body, footer, and other important key pages that different websites shared similarities with. Using what I’ve identified, I drafted up several versions of the best suited homepage redesign. Details about design decisions are described below in Prototypes.


Low-Fidelity Prototype


Homepage Lo-Fi Wireframe


Services Provided Design Process

Book Appointment Design Process

I wanted to update the appointment booking process into something that felt more intuitive, aesthetic, and could be completed in minimal steps while collecting all necessary information from the user. Key steps included the following:

  • Having the user choose if they are a new or existing patient

  • Selecting a service, date, and time

  • Having the user input personal information required for booking the appointment

  • Review of appointment details

In the original site design, the user needs to click through 3-4 links to get to the page where they start filling out information for the appointment. Additionally, it’s not clear to all users where they would go to request an appointment.

In the redesign, there is a now a clear button on every page of the site to request an appointment and the user only needs to click that button to begin filling out information with clear steps that are easy to follow.

User flow for original site and lo-fi prototype are shown below.

In the original site design, the user needs to click through 3-4 links to get to the page where they start filling out information for the appointment. Additionally, it’s not clear to all users where they would go to request an appointment.

Original Site - Book Appointment User Flow


In the redesign, there is a now a clear button on every page of the site to request an appointment and the user only needs to click that button to begin filling out information with clear steps that are easy to follow.

View the high-fidelity prototype of the redesigned booking process here.

Redesign Lo-Fi Prototype - Book Appointment User Flow


High-Fidelity Prototype

I conducted a usability study on the lo-fi prototype and then used the user feedback to implement slight design changes to try and ensure the most seamless experience for the users.

Redesign Hi-Fi Prototype


Homepages from the original and redesigned site are shown below.

The redesign has more content but is more readable because of the grouping and spacing. Additionally, users can now see a glimpse of services, important business information, and customer feedback.


Original Site - Homepage


Redesign - Homepage

Another significant redesign on the website is the services page. Previously, users need to click a different link each time to view different services, and then return to the original services page to view more.

In the redesign users can now view all information about different services on one page.


Original Site - Services


Redesign - Services

The new design for making an appointment is meant to be easily visible, straight-forward, and visually appealing.

Redesign Hi-Fi Prototype - Book Appointment User Flow


Usability Studies & Implemented Feedback

After I completed my high-fidelity prototype, I conducted another usability study to obtain feedback from the more finalized version of the website redesign. Details about design changes are shown below.

By moving the home image up and displaying important messages over the image, I think it improved the homepage design in the following ways:

  • More information is displayed at the first glance of the page

  • Less blank, whitespace at the top of the homepage

  • The format and location of information does not change if they "We've moved!" message is removed


When initially designing the products page, I thought the best display of product brands was to list it alphabetically. After receiving user feedback, I changed it to have equal amount of brands listed per row.

This condenses the information a little and omits blank space between items in the list.


In requesting an appointment, the user would select whether they are a new or returning patient. Users have pointed out that the items are boxed, but the only clickable items are the small check circles.

I updated the design to make a selection by clicking the entire box, as well as highlighting which selection the user is hovering over.


The web redesign’s vision includes a modern, friendly, and direct brand. Stevens Creek Optometry's original website uses both serif and sans fonts as a primary font. For consistency, I’ll only be using one font throughout the entire website.

The current website has a dark color scheme. Stevens Creek’s building interior uses many neutral tones, so I am sticking with the neutral branding to not stray too far from the brand’s original site. Using its yellow logo, I pulled colors from the logo of yellow variations to add a pop of color to a neutral grey & white site.

Font Used in Website Redesign





Open Sans

Colors Used in Website Redesign






Logo Variations (Original Logo)



Being my first website redesign, I incorporated lessons learned from the Google UX Design Certificate as well as items I've observed from reviewing case studies on other website redesigns.

With this being my second solo UX design project, I still found myself spending a significant amount of time hurdling over challenges I faced while researching and designing. Some of the thoughts and ideas in my head do not translate into the design completely but it's always exciting learning how to pivot.

I hope to further develop my design skills and be able to design with more clarity and confidence.

bottom of page