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.

onlineBookingProcess_MOCKUP.png

 

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.pngPersona_MollyPersona_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.

Brand Discovery Worksheet _ PagesSitemap

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 SITEMAPNEW SITEMAP.png

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.

hc studio old logoLogo Designing

HC Studio Redesign Style GuideHC Studio Mockup_1HC Studio_iphone mockup

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

Screen Shot 2019-11-06 at 11.07.48 AM

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s