Website Redesign

Play around with the prototype!

Background

I collaborate with a team of four to assist local businesses in San Diego with redesigning their websites. Our goal is to have a genuine impact, supporting the community while also acquiring valuable experience in website design and client collaboration. Our efforts culminated in successfully helping The Shop La Jolla develop an interactive high-fidelity prototype of a redesigned website.

UX Techniques

Business Analysis, User Interviews, Surveys, Secondary Research, Competitive Analysis, Persona, User Flows, Site Map, Sketching, Wireframing, Usability Testing

My Role

UI/UX Designer

Team

Eddie Li, Ethan Lee,

Melody Tai, Ping Hsuan Wang

Timeline

8 weeks

About Our Client

The Shop La Jolla is a unique blend of art, apparel, and soon-to-be custom furniture, nestled near the picturesque shores of La Jolla Cove. With a commitment to showcasing local talent and craftsmanship, this store is more than just a retail space—it's a vibrant hub of creativity and community.

lrg-full8-stores-line-the-street-in-downtown-la-jolla.webp

Why The Shop La Jolla

The Shop La Jolla truly holds a special place in our hearts. Located at La Jolla Cove, a popular getaway spot for UCSD students, we all share fond memories of grabbing coffee nearby and walking past the store, sometimes greeted by their lovely dog, Storm. As we considered supporting local businesses in San Diego, The Shop La Jolla immediately stood out as a symbol of the city's relaxed coastal vibe and the beauty of La Jolla Cove. We deeply appreciate how the shop integrates San Diego's essence into its offerings, supporting local designers and showcasing a diverse range of products that truly capture the city's spirit.

Overview of Current Experience

They used a Squarespace template to build their current website which has resulted in a website that does not adequately represent their brand. It fails to showcase the full extent of its offerings, leaving out key elements of its business.

Problem / Pain Points

Current site's interface fails to reflect brand qualities and attract new customers.

As a burgeoning business which began in the midst of COVID 19, The Shop heavily relies on online sales, with only a few in-store retailers. Nevertheless, online sales lag behind their in-store counterparts.

Online presence matters

81%

Shoppers conduct online research before making a purchase

(GE Capital Retail Bank, 2024)

Validating with Current Users

We spoke with 6 current customers and identified key pain points related to the website.

Interviewees expressed a shared concern that the website lacked a consistent and visually appealing design, which made it challenging to navigate, explore product options, and complete purchases. The absence of an "About" page on a website can be a drawback because it deprives visitors of essential information about the company or brand.

The biggest pain point we found was center around the absence of both a cohesive design and engaging storytelling.

Challenges

How do we...

Enhance The Shop's branding and product offerings to create a more engaging experience for customers?

Identifying Users / Persona

We spoke with the founders, Nate and Kalli, to understand their customer base. Located in a prime spot at La Jolla Cove, the shop enjoys a steady flow of tourist foot traffic and primarily attracts tourists. The following are their returning customers and regular visitors. There is also a small segment of La Jolla locals. Recognizing that locals are more likely to visit the store regularly, the shop aims to attract more local customers.

To gain more insights about the user types, we conducted interviews with 18 participants. This diverse group included people unfamiliar with The Shop, walk-in customers at the shop, and people on the streets at La Jolla Cove. Additionally, our client invited a few of their befriended frequent customers to be interviewed. This comprehensive approach allowed us to gather various perspectives and gain a deeper understanding of the various customer segments.

We then classify these customers into three types:

Potential customers (tourists/people who have not yet visited the shop)
Returning customers (frequent customers)
Non-frequent customers (locals who have visited but are not regular customers).

Scope

Discussions with founders solidified the project objective of updating The Shop's aesthetic appearance for an improved experience for new and returning customers.

Competitive Analysis

Our client is an art/apparel store that also aims to expand into custom furniture. Considering the diverse nature of their catalog, we selected competitors to cover every possible functionality/design element they might need.

Casa Dega: to cover aspects of a furniture store and also for its general website design (which was our client’s preferred style).

Allview: most of our client’s inventory is from their brand.

Death View Vintage: its vintage style matches the general vibe that our client gives off.

Urban Outfitters: a great example of a competitor with an especially large catalog

MoMA: for references on displaying art galleries and information.

Main Takeaways

Maintain comprehensiveness in the navigation bar to avoid users getting lost or overwhelmed.

Use photos, colors, and font selection on the home page to convey the store's vibe effectively.

Organize the primary menu into clear categories for easy navigation

Include product galleries on the landing page to showcase inventory without requiring users to click into specific categories, addressing a current lack on the website.

Feature Prioritization

After reviewing the features currently on our website and researching our competitors' websites, we chose to prioritize features that require minimal effort yet promise high impact. This decision was informed by extensive discussions with participants and continuous reference to our user personas' attributes and pain points.

Site Map

Check listing and compartmentalizing key contents through several card sorting exercises.

Wireframe

After we defined the core functionalities, we created quick, low-fidelity, wireframes. Using these wireframes, we were able to conduct usability testing with 4 participants. This allowed us to gather some crucial feedback to help us decide what to include in the final experience before jumping into the next iteration of our design.

Overall users had an easy time using the website, we just needed to address a few small issues with the navigation labeling and placement of the page titles. We completed a few rounds of iterations based on testing and feedback to ensure the wireframes included everything we needed. Once the functionality of our design was finalized, we moved on to designing the UI

Moodboard

The mood board reflects a harmonious blend of simplicity, warmth, and modernity. Earthy tones such as warm browns and soft beiges, reminiscent of wood's natural beauty, dominate the palette. In line with our client's focus on furniture, these wooden tones also reflect the essence of their offerings, creating a cohesive and immersive experience for users.

We have chosen Montserrat as our font because it embodies clarity and elegance. The font's clean lines and subtle curves reflect our commitment to simplicity and readability, ensuring users can navigate our interface effortlessly.

Mid-fi

We start applying colors and images to the prototype to create a more visually appealing representation of the final product. This helps us refine the visual aspects of the design and ensure that the final product is both functional and aesthetic.

User Testing

We then tested the mid-fi with 5 participants, here's some insights

Iteration

We make updates based on feedback that identifies navigation pain points, further refining the design to enhance user experience.

Footer

Minimized the amount of space used yet remain informative

Original

Update

Home Page Categorization

Clear product categorization, move the "New In" to another section

Original

Update

Furniture/Art subsections

Art: The main page showcases all aspects of art, including the subcategories "Featured Artists" and "Artwork." These subcategories can be accessed directly from the main page and are also accessible through the navigation bar dropdown menu.

Original

Update

Furniture: The main page showcases all aspects of furniture, including the subcategories "Furniture Catalog" and "Custom Order" These subcategories can be accessed directly from the main page and are also accessible through the navigation bar dropdown menu.

Custom Order

In the updated custom order page, I have made each section clearer and more distinct: "How to Order," "Order Options," and "Submit Form." These sections can also be accessed directly from the top of the page, where buttons will take the user to the corresponding section for easy navigation.