ABOUT THE PROJECT
HC Studio is a local hair salon in Brookline Village, Boston since 2000. They advocate “Happy Healthy Hair” along with their unique Hairpothecary philosophy to help their clients understand the basic nature of the hair and the intricate link between our overall health and well-being and the health of our hair. HC Studio also supports the local artist community by displaying their works at the studio.
The studio was redesigned by designer Tracy Mowschensoon in 2013, yet their website has not been updated and there is no mobile version of the studio website.
PAIN POINTS
Design: HC Studio’s current website and lack of mobile design are not matching their modern and chic interior design. The clients cannot learn the studio’s personality and environmental “vibe” through their website.
Function: For current clients, the majority book their appointments through phone calls because the online reservation system is not pleasant to use.
DESIGN OUTCOME
With a website that reflects HC Studio’s attitude, clients are able to find the studio’s services, prices, hair artists, and other information through desktop and mobile interfaces. In addition to regular call-in reservations, the new online booking process provides much easier access, saving time for both the clients and the studio.
DESIGN PROCESS – USER RESEARCH
I interviewed potential clients via Survey Monkey, phone calls, and in-person interviews. Through the behavior map, I gathered common behavior patterns to create the primary persona and empathy map to have a better framework for designing.
DESIGN PROCESS – BRAND DISCOVERY + SITEMAP AUDIT
It has been a while for HC Studio to review their current brand feedback, so I made a high caliber of their brand discovery that it aligns their business strategy. In order to give a scope of the project, I also summarized a sitemap audit to see how many templates we might need to create.
DESIGN PROCESS – INFORMATION ARCHITECTURE
The old sitemap had a minimum skeleton information structure – it did not show any prominent messages or call to actions inviting the clients for further interaction.
The new sitemap has many overlapping information blocks (in gray) across the major service subpages – Exclusive, Hairpothecary, Style-In and Color World. Thus, the clients will be able to get more thorough essential information on one webpage rather than jump and gather scattered pieces of information from different pages. The labels in purple boxes are the unrepeated information blocks and the labels in blue boxes are reservation blocks and Newsletter subscribe – calls to action.
DESIGN PROCESS – LOGO+STYLE GUIDE+MOCKUPS
To match HC Studio’s modern and chic interior design and warm friendly vibe, I redesigned the logo and clarified the tone of the style guide.
PROTOTYPE
I welcome any feedback and critique!
Desktop HD (1440*1024): https://invis.io/27UOOEWWRQC#/391858293_Homepage
iPhone xs (375*812): https://invis.io/MPU84YIUB2J
Google documents: https://drive.google.com/drive/folders/1p7um5SihfSteZaVAoPc1vZUzzi7SclJX?usp=sharing
AFTERWORD
Type: Freelance (Individual)
Timeline: Oct – Nov 2019
Tools: Sketch, InVision, Adobe Photoshop, Illustrator
ORIGINAL WEBSITE
Link: https://www.hcstudioinc.com/welcome
