top of page
titlepage_slidedeck.jpg

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

Challenge

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

original_homepage.jpg

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

Tools

Figma, Photoshop

Responsibilities

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

Timeline

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

bestpractice_img1.png
bestpractice_img2.png

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.

bestpractice_img3.png

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

competitiveaudit_img3.jpg
competitiveaudit_img4.jpg

Design Process

Sitemap

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

original_sitemap.jpg

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.

redesign_sitemap.jpg

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.

paperwireframes_homev1_4.jpg
paperwireframe_services.jpg
paperwireframes_homev5.jpg

Low-Fidelity Prototype

lofi_comments.jpg

Homepage Lo-Fi Wireframe

lofi_comments2.jpg

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

originalsite_bookappt_gif1.gif

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

redesignsite_LOFI_bookappt_gif1.gif

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

redesignsite_HIFI_entiresite_gif2.gif

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_homepage.jpg

Original Site - Homepage

hifi_comments2.jpg

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.

hifi_comments1.1.jpg

Original Site - Services

hifi_comments1.jpg

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

redesignsite_HIFI_bookappt_gif2.gif

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

usabilitystudyv1_img1.jpg
usabilitystudyv2_img1.jpg
usabilitystudyv1_img2.jpg

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.

usabilitystudyv2_img2.jpg
usabilitystudyv1_gif1.gif
usabilitystudyv2_gif1.gif

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.

Branding

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

Aa

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

Open Sans

Colors Used in Website Redesign

#FFF3B7

#FFE976

#E4B65A

#F4F4F4

#383838

Logo Variations (Original Logo)

weblogo4.jpg
weblogo2.jpg

Retrospective

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