View on a larger device.
My portfolio is not yet optimized for viewing on smaller devices. For optimal viewing experience, please view my portfolio on a larger device, such as a laptop or desktop.
My portfolio is not yet optimized for viewing on smaller devices. For optimal viewing experience, please view my portfolio on a larger device, such as a laptop or desktop.
View the live website at lucialashes.com.
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.
Branding, Design System, User Research
Figma mockups & prototypes, Webflow website
Hanghong Z., UX Designer
Lucia C., Business Owner
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.
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?
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."
Original Lucia Lash Studio landing page.
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.
Deka Lash Totem Lake location page.
Blue Lagoon Iceland landing page.
Initial sitemap for Lucia Lash Studio website redesign.
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.
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.
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:
Screenshots of major changes made to the low-fidelity prototype.
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.
Examples of website visuals Lucia favored. (Top left, top right, bottom left, bottom right)
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.
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.
Style Tile A.
Style Tile B.
Style Tile C.
Style Tile D.
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.
Evolved style tiles A~D from left to right.
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.
Lucia’s feedback on desktop mockups utilizing style tile A (left) and the jewelry e-commerce website’s color palette (right).
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.
Iterations on style tile A’s mockup focused on color palette, visual elements, layout, and logo design. From left to right: Visual Iteration A2.1, Visual Iteration A2.5, and Visual Iteration A2.6.
While consulting dribbble.com 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:
A Figma screenshot of some mockups in the initial iteration of the website’s mobile 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).
A Figma screenshot of the second (top row) and third (bottom row) iterations of the website’s mobile design.
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.
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.
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.
After personally visiting Lucia’s studio to capture new images for the website, I used Adobe Lightroom to enhance them.
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.
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 UserTesting.com.
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.
3
interviewees
middle-aged woman who frequents salons,
middle-aged woman with limited salon experience,
woman in mid-20s with limited salon experience
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
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.
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
A Figma screenshot of some mockups in the first round of 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.
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 lucialashes.com.
4
5
116
12
concept tests
visual design ideas
iterations
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.
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.
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.
