“All the websites we go to are black and white. I want ours to be bold, rich, and moody."
Kali and Jessica, Owners of Love + Roots
Summary
The owners of Love + Roots, a beauty salon in Texas, wanted their website to be redesigned and rebranded to match their values and business goals. They disliked their existing website because it was too wordy and they disliked the simplistic look and feel of their website design along with their font choice.
They wanted their website design to resonate with their salon's core value, which is that everyone of all backgrounds is welcome. I spoke with them about their brand identity and design inspiration to understand the design elements, visuals, and imagery they would like to see on their redesigned website.
The key call-to-action button they wanted users to click on most frequently is to book an appointment to increase their number of customers.
Team
UI/UX Designer - Stefanie Torossian
Project Manager - Amber Rajcevich
Website Developer - Trisha Johnson
Website Development Manager - Geoff Reis
Content Manager - Katie Palmer
Role
Client Design Facilitator
UI Designer
Visual Identity
Branding
Duration
2 weeks
Tools
Adobe XD, Adobe Photoshop
What I do.
-
I worked directly with the client to facilitate a design discussion. I led the client through a questionnaire to gather information about their target audience, website goals, and design preferences. This insightful session formed the foundation for the rest of the design process.
-
I began by creating low-fidelity wireframes in Adobe XD to establish the core layout of the client’s homepage. After finalizing the layout, I moved onto the high-fidelity wireframe to incorporate visual elements, such as imagery and brand elements that align with the client’s vision.
To ensure client satisfaction and project alignment, the project manager then facilitated client feedback through email communication, presenting the high-fidelity mockups through a shareable design link.
-
Leveraging the client conversation and inspiration websites (Jose Luise Salon, Meche Salon, Studio Branca), I crafted brand guidelines that captured their desire for a diverse, welcoming atmosphere. The visual identity focused on rich, gemstone-like colors to reflect a deep, moody aesthetic that appeals to their wide-ranging clientele (20s-70s).
Research
During the kick-off call with Love + Roots, I facilitated a design discussion to uncover their brand identity and vision. This session revealed several key insights:
✿
✺
Inclusive Audience
Their target clientele spans a wide range (20s-70s), and their heart-shaped decor reflects a welcoming atmosphere for all backgrounds.
Informative Website
They prioritized a website that clearly communicates their latest styles and services.
✻
✱
Bold & Colorful Aesthetic
The client envisioned a website rich with gemstone and geode-inspired colors, conveying a uplifting and welcoming tone.
Design Inspiration
They referenced websites like Jose Luise Salon, Meche Salon, and Studio Branca to give us a better idea on what visual elements they like.
Ideation
After receiving the homepage content headings from the copywriter, I translated them into a visual framework through initial layout sketches. This exploration process prioritized a user-centered approach, ensuring clear calls to action. "Book Now" and "Shop Now" buttons were prominently positioned at the top of the page to facilitate user engagement and fulfill the client's business goals.
I placed “Book Now” and “Shop Now” at the top of the page to increase customer engagement. I placed the salon’s value proposition below the hero section to inform users on the vast number of services they offer.
Navigation, Hero, and Value Proposition
I sketched the "Meet Our Team" section as a user-friendly carousel, allowing customers to easily explore each stylist's profile as they scroll. I prioritized the user experience by sketching the "Shop" section with a clean 4-column grid layout. This design allows for easy product browsing and scrolling.
Meet Our Team, Shop, and Instagram Feed
The logo was positioned prominently on the left side as a dominant visual element, reinforcing Love + Root's brand recognition. On the right side, I offered clear user navigation with easy access to key information like hours, location, and a site map. The client's primary call to action, "Book Now," was strategically placed here to maximize visibility and encourage user engagement.
Footer
Finalizing the Brand Guidelines
After I made those initial sketches, I looked over the Pinterest board the client sent us. They provided us with visual examples of what kind of gemstone colors they want to see on their website. Using this information, I began to finalize their new brand guidelines. I used rich gemstone colors with a bold serif typeface to complement the color scheme.
New Brand Guidelines
Pinterest Mood Board
Design
Leveraging the initial layout sketches and new brand guidelines, I translated them into high-fidelity mockups within Adobe XD. This process brought the client's vision to life by incorporating the following:
Gemstone-Inspired Palette: The color scheme embraced rich gemstone tones, reflecting the elegance and vibrancy of their brand identity.
Humanizing the Brand: Images of the stylists and salon environment fostered a sense of connection and trust with potential clients.
Cohesive Brand Experience: Background elements seamlessly integrated with the overall design, further solidifying the brand's visual identity.
The developer suggested that I include an Instagram feed at the bottom of the page to direct users to the salon's Instagram page. The developer and I decided to include 12 of their most recent Instagram posts (for the first version) to show users a gallery of their work.
Version 1
Version 2
Version 3
To ensure the design perfectly aligned with their vision, I presented the client with three distinct high-fidelity wireframes. This approach offered a range of layout options, background elements, and color palettes, allowing the client to actively participate in the design selection process and provide valuable feedback on their preferences.
Feedback from Love + Roots
“We've received the mockups and LOVE them, especially Version 1. The mood and colors are perfect in Version 1.”
Kali, Owner of Love + Roots
Revision
The client loved the first version, but requested one edit related to the Instagram feed at the bottom of the homepage:
“…we prefer the IG feed at the bottom to be a singular line of photos (as in Version 2) rather than the double line so that it's cleaner and easier to see.”
~ Kali, Owner of Love + Roots
Once I implemented the edit and resubmitted the design, it was approved by the client, and I moved on to designing two inner pages, specifically their “Our Services” and “Our Team” pages.
Instagram Feed Revision
Results
Following the brand guidelines established in the homepage design, I designed a consistent visual style for the "Meet Our Team" and "Our Services" pages. This ensured a unified visual experience for users navigating the website and reinforced the client's brand identity throughout.
Our Services Page
Meet Our Team Page
Revision
After speaking with the project manager about the “Our Services” page, she requested I add a line heart as a background element to remain sticky as the user scrolls down the page. This persistent element served two purposes:
Visual Cohesion: The heart element appears on the homepage, so introducing it on this page also makes the design appear more uniform and cohesive.
Brand Values: The heart symbol subtly communicates the salon's core values of inclusivity and warmth, creating a welcoming user experience.
Heart Background Element
Prototype
I created text overlays for the Meet the Team page to display each stylist's bio. The client wanted each stylist's name, pronouns, social media, role, level, specialties, and description to be included. In order to not overwhelm users with a lot of content, I created text overlays so users can hover on each stylist's image if they would like to learn more about the stylist.
Meet Our Team
Text Overlay Prototype
Conclusion
Designing Love + Roots was a wonderful experience that allowed me to refine my visual design and prototyping skills. The client is very happy with their website redesign and it is currently live: loveandrootsatx.com/
To ensure an efficient developer handoff, I uploaded all design files, including the images, components, fonts, and icons into a Box folder. The developers faced no challenges translating my designs into code. Thank you for reading!