Redesign Project: HC Studio _Brookline

HC Studio_Exclusive Mock up.png

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.

Behavior Map.png Persona_Molly Persona_Molly Copy

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.

Sitemap

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.

OLD SITEMAP NEW SITEMAP.png