Lucia Lash Studio mobile landing page mockup.

View the live website at

Project Overview

An up-to-date online presence is key for local businesses to attract new clients. How can I create a brand that depicts Lucia’s personal values and establish an online presence that demonstrates the quality of her studio among others? Working alongside another UX-UI Designer, I design Lucia Lash Studio’s brand and website from scratch, replacing outdated assets to improve new clients’ first impression of the business.

Tools & Skills

Adobe Illustrator logoAdobe Lightroom logo

Branding, Design System, User Research


Figma mockups & prototypes, Webflow website


Hanghong Z., UX Designer
Lucia C., Business Owner

My Role

As a freelance and early career UX-UI Designer, I joined Hanghong Z. in her solo effort to deliver a new website for Lucia Lash Studio. Hanghong had already completed most of the research groundwork, and I took on the project to collaborate in visual design and user research, as well as single-handedly develop the website (Webflow). Though the client set no deadlines for the project, Hanghong and I collaborated smoothly to keep the project moving in a timely manner.

My Contributions

  • Concept testing
  • Wireframing
  • Business branding
  • Building a design system
  • Designing responsive website mockups
  • Interactive prototyping
  • Usability test planning, facilitation, & analysis
  • Webflow development
  • UX writing
  • Photography & image enhancement

Online presence is a local business’ first impression

Finding a new salon can be daunting with an abundance of options to choose from. Among those options, locally-owned salons may have difficulty standing out among franchise competitors. Lucia Lash Studio’s website was last updated in 2015 and with the domain expiring recently, Lucia sought a brand new website to improve her studio’s first impression on potential clients.

How can I create a brand that depicts Lucia’s personal values and establish an online presence that demonstrates the quality of her studio among others?

When looking for a new salon for beauty services, how do you narrow down your choices?

Ask any person on the street, and searching online will be part of their process. A simple Google search may bring up higher-rated businesses, simply because they are franchises with locations across the country. In this scenario, how can local businesses stand out?

Ask any person on the street, and searching online will be part of their process. A simple Google search may bring up higher-rated businesses, simply because they are franchises with locations across the country. In this scenario, how can local businesses stand out?

"I look for modern [website] designs when I look for [salon] services. When more time is spent on web design, the studio itself tends to be nicer."

Analysis of information architecture & concept testing

Using Lucia Lash Studio’s original website as a skeleton, and referring to the websites of the above mentioned franchise competitors and more, my fellow designer Hanghong completed groundwork research for the site redesign. This resulted in a sitemap that met Lucia’s website needs as well as competitor website patterns and client expectations drawn from card sorting tests.

Since this information architecture would be feasible in theory, I tested a low-fidelity prototype of the website with an individual. Being in her mid-20s and inexperienced with lash salons, our concept test participant perfectly matched the persona of a new client at Lucia Lash Studio.

Concept validation test results



  • Layout of services
  • Summarized service information
  • Relevant pricing menu on each service details page
  • Information overload on Service & Price page
  • "Book" CTAs are not quickly noticeable
  • "Visitor Info" page name lacks clarity
  • Booking page lacks business hours

I was shocked that a single concept validation test revealed so many pitfalls in our initial site structure. However, it reinforced the value of qualitative user research methods that involve direct interaction with stakeholders, over quantitative methods that focus on data collection and analysis.

Applying research insights in early-stage design

After sharing these insights with my fellow designer, I applied them to revise the information architecture of the website, as well as the low-fidelity prototype. Some of the major changes I made include:

  • Reorganizing and changing navigation bar interactions,
  • Adding more prominent calls-to-action where necessary, and
  • Improving clarity of page content by adjusting page titles and layouts.

Screenshots of major changes made to the low-fidelity prototype.

Visualizing Lucia’s philosophy

Drawing inspiration from the industry

As previously shown, Lucia’s original website lacked personality as a brand. To begin our rebranding process, we drew inspiration from other websites in the beauty and fashion industry.

Aim for


  • Neutral colors
  • Bold titles
  • A focus on visuals over text
  • Cold colors
  • Uninviting ambiance

As previously shown, Lucia’s original website lacked personality as a brand. To begin our rebranding process, we drew inspiration from other websites in the beauty and fashion industry.

Expressing Lucia Lash Studio

We confirmed three main identifiers with Lucia; she wanted her website to feel fashionable, clear, and organic. With this in mind, I assembled four distinct style tiles to share with my fellow designer.

Together, we evolved each style tile into desktop mockups of the Lash Extensions service details page, a main page on the Lucia Lash Studio website. We iterated on these mockups between ourselves a few times before presenting them to Lucia. In choosing to present the style tiles as desktop mockups, we helped Lucia visualize the style tiles in action.

Lucia favored the design on the far left. She continued to bring up the jewelry e-commerce example website she liked, so we created a desktop mockup using the jewelry website as a style tile as well.

With Lucia’s feedback on the two designs, we continued to iterate on style tile A’s mockup. While adjusting to lighter and less saturated colors, we experimented with various visual elements and information layouts. We also began ideating designs for the text-based logo that Lucia preferred.

While consulting for logo ideas, we came across Antonio Zacarias’ logo for Somana Salon & Spa. This inspired us to include a hand-drawn graphic as part of our text-based logo. Doing so would align with the hand-drawn botanical graphics used as visual elements in Visual Iteration A2.5 (above center) and therefore help solidify them as part of the brand itself.

Through our several conversations with Lucia, we learned of her love for hummingbirds, who frequent her homegrown garden. We felt hummingbirds were a perfect fit for the brand, as symbols of elegance in nature.

The evolution of the final logo for Lucia’s new brand. From left to right: digital sketch of graphic, Adobe Illustrator vectorized graphic, final text-based logo.

After 14 more iterations, we finalized the visual design for Lucia’s website. Receiving Lucia’s approval to proceed with designing the rest of the website, we built our style guide and design principles with the following four main points in mind:

Responsive design

As the end product is a client-facing website, following responsive design practices, I began to design mobile layouts for each page of the website. My mobile mockups served as a base for Hanghong, who referenced them when designing the desktop version. Below is an example of our collaboration in mobile-first design. The left-hand mockup is one of my initial designs for the mobile landing page, and the right-hand mockup is the initial design for the desktop Story page. This exemplifies how the mobile designs influenced the desktop designs, despite this example featuring two different pages.

An example of mobile-first iterative design: an initial design for the mobile landing page (left) inspires the initial design for the desktop Story page (right).

After the initial iterations of each page for both the mobile and desktop versions of the website, I naturally continued to be in charge of the mobile design, while Hanghong was tasked with the desktop design. We iterated on the designs, consulting each other for feedback between iterations. I completed 3 sets of iterations for the mobile design in order to prepare a high-fidelity prototype.


As a designer, I believe prototypes are most effective when they resemble the final product as much as possible. Because they are created to be used in usability tests with direct stakeholders, the more realistic a prototype is, the more I can learn about how the product will be used, as well as foresee potential issues with the design.

Aside from stringing together mockups in Figma, I applied my proofreading and camerawork skills to contribute to building our high-fidelity prototype.

UX writing

While most of the writing in this project may fall under copywriting, I was able to exercise my UX writing skills due to the bulk of my contribution being grammar and language revisions. My experience in journalism, foreign language studies, as well as my attention to detail has built my reputation among colleagues and friends as a go-to editor for essays and important emails.

Photography & image enhancement

I enjoy videography and video editing as a hobby and volunteered to take new photos of Lucia’s studio for use on the website. I personally visited her studio with my camera, captured new shots of the studio and of Lucia working on a client’s eyebrows. I then enhanced the new images with Adobe Lightroom.

High-fidelity prototype

Following the split of responsibilities we took on during the visual design stage, I continued to be in charge of the mobile version when creating the high-fidelity prototype. Below is the live high-fidelity prototype we presented during usability tests.

UX Research: usability testing

Graduating from a world-renowned research institute, I have a strong foundation in research and highly value it in my process as a designer. Usability testing is one of my favorite UX research methods, whether done via active facilitation or submitted through sites such as

I prepared the interview guide outlining the tasks to be completed in our usability tests, focusing on two criteria:

We completed 3 usability tests with different participants. 2 participants tested the desktop version, and 1 participant tested the mobile version of the website. I personally facilitated 2 of the 3 usability tests.



middle-aged woman who frequents salons,
middle-aged woman with limited salon experience,
woman in mid-20s with limited salon experience

Avoiding full-screen gates

2 of our 3 usability test participants assumed no additional content existed on pages that featured a full-screen gate. These participants tested different versions (mobile and desktop) of the website and thus proved a major flaw in our designs. However, this may partially be due to the fact that Figma has yet to implement a visible and working scrollbar for scrollable frames in prototypes.

“I didn’t realize that I [could scroll down].”

frequent salon client, middle-aged woman

“It’s not confusing to know what to do — I just didn’t read it right away.”

inexperienced salon client, middle-aged woman

Clearly written instructions

Lucia’s website features a single call-to-action, — to book an appointment. 2 of our 3 usability test participants assumed booking an appointment involved calling upon seeing a phone number. These participants represented the majority of Lucia’s current client base and thus pointed out a pitfall in our UX writing.

Accessibility of a neutral color palette

All 3 of our usability test participants appreciated the clean and relaxing impression the website gives. However, 2 of 3 of our participants found issues with the pale blue color used in carousel sliders. One participant holds a career in accessibility and suspected the color could pose an issue. This was followed by the other participant, representative of Lucia’s current client base, not recognizing the ability to scroll through different slides in a carousel.

“I would check the color contrast of the [carousel controls]. It’s a little bit hard to see.”

inexperienced salon client, woman in mid-20s

Post-test iterations

Drawing insights from usability testing, I proceeded by creating lists of action items for both the mobile and desktop designs. I relayed the list of desktop action items to Hanghong and engaged in post-user test mobile design iterations. I completed 3 rounds of post-test iterations, again consulting Hanghong for feedback between rounds.

Design implementation: front-end development in Webflow

With a background in computer science, much of my experience as a designer is coupled with taking on the role of a developer. I met with Hanghong to finalize the designs in Figma, then immediately began development in Webflow. I single-handedly translated the entire website from design to code within 2 weeks. After launching the live website on April 14, 2023, I promptly addressed two rounds of development adjustments:

Lucia Lash Studio’s live website is available at

Outcome & reflection





concept tests

visual design ideas


page website

As my first endeavor as a professional UX-UI Designer, this project was a blank canvas for me to demonstrate my abilities. On top of this, Lucia was a supportive and open-minded client, listening to all of our suggestions and guiding us with her own opinions as a business owner. Through this project, I discovered other ways I can contribute to a project and team outside of product design and development, such as UX writing and photography. Going forward, I hope to continue to find ways of applying a variety of my personal skills to my design work and become a designer with unique capabilities.

Be transparent with the design process

UX is still a growing field, and one must not assume what others may or may not know. Being able to offer some form of visual update when checking in with Lucia was key to our client’s understanding of our progress, as well as to maintaining a good relationship with her.

Don’t feel limited by a role title

Our client, Lucia sought a new website. Hanghong and I are capable of delivering one with our experiences in design and development, but were never once tied down to a particular role in our process. Thus, this gave us freedom to think outside of the box of “UX design” and consider, “What does Lucia really need?” Taking this client-centered approach led us to overdeliver on our client’s needs; we not only did our jobs, but also put a smile on our client’s face.

Working on a project?

Let's design together →