Blog

Sometime my mind wanders freely, so I decided to frame it. Explore my blog to see my take on UX ideas. This is (not) a Norman blog and I'll share everyday things.

Frenchbeauty: Case Study

Today I’m going to give a quick run through the FrenchBeauty website creation.

I’ll give you an overview of my methodology, and off course will put the project in context. Then I’ll look into the UX tools I used such as Personas and Wireframe.

I tried to make it clear and concise, with some nice visuals, as sometimes pictures are worth a 1000 words.

Well, if you’re ready, it all happens after the break.

My Method:

method_web

Context: The Business of Beauty as a business

This website was a very challenging and motivational project on a tight deadline. We set-up with Diane (Owner and founder) a very close project relationship to deliver an enticing and professional online “vitrine”.

Frenchbeauty was a total newcomer to the Beauty and Day Spa scene in Dublin. The shop had many challenges to face:

  • Establish the brand identity
  • Create awareness and recognition
  • Convince potential customers of quality of services provided
  • Maintain relationship with customer/ Loyalty

The website was identified as primary tool to helps establish the brand and create awareness.

Thus site needed to:

  • Support Brand marketing plan
  • Resonate with customers by creating relationship
  • Display offers and services in a clear and simple way
  • Allow for direct and multiple communication means

Audience: Who wants to get a skin care treatment?

The owner of FB had a clearly defined target for the salon:

Mainly women from 20 to 50, urban, with good income and responsive to quality, exclusivity and high maintenance.

Men from the same age range were a complementary target, as beauty treatment for urban male is getting more and more common.

The salon was positioned as a “Prestigious” place. It is the inheritor of the French tradition of Beauty and chic (Place like Paris, Place Vendôme, Deauville or iconic brand such as Channel, Dior, Longchamp). This is not your everyday nail booth, this is a place to relax, unwind, feel like a princess (or prince)

To clearly define who the website is talking to, I created 2 personas representing the two main targets:

personas_siobhan

personas_sebastian

Information Design: Can I book now?

Functional requirements:

  • The website will allow first time users to quickly find the offer and treatment.
  • The users can contact the Salon for an enquiry or booking at anytime during the visit on the website
  • The look of the site will support the branding strategy.
  • The website will need to enhance the SEO strategy

Content requirements:

The owner has provided the content for each section/pages. This content has been reviewed to be SEO friendly

So how many pages on that website?

The information architecture was done in a simple and comprehensive manner. The website will have a wide and shallow architecture. Based on the available content, I submitted the following first potential Sitemap for review.

site_map_v1_thumb

We’ve done a bit more tweaking to get to the final site map (see below).

Map Final

site_map_v2

We removed the “Club privé” and “Competition” section because the marketing activity couldn’t justify those empty sections. Why create an expectation, that can’t be fulfilled? But having integrated them into the sitemap can help to add those section in the future.

The content was written in plain english to with the addition of “help” section. Some treatments or product can be mysterious to Sebastian. He needs to feel confortable about what is on offer.

Ok, but how will that come together?

The site was simple enough but needed to be really clear and focused.

So I wireframed a couple of key pages to bullet proof the structure and navigation behaviour.

Homepage Wireframe
fb_diagram_home

Content Page Wireframe
fb_diagram_page

Gallery Page Wireframe
fb_diagram_gallery

Contact Page Wireframe
fb_diagram_page_contact

At the same time, I worked on visual design of the website with photoshop.

I wanted to convey that sense of exclusivity, quality and prestige. The colour, the use of foliage shape and hand-written font are serving that purpose.

The elements agreed on at the prototyping phase are present, but have moved around to the page to convey the best results between usability and visual design.

Here you can see 3 iteration from initial try to final product.

Version 1
proof1

Version 2
proof2

Version 3
proof-final

The results: Live and ready to grow

The website was live in time for the Salon opening and has been included in the entire marketing initiative. A very specific and targeted SEO strategy help raised the site visibility on search engines.

The website is the primary means of contact for enquiries and booking.

Note:
Since the launch, the site has evolved and now sports a new visual design. It has also incorporated an online shop, a blog and the membership page (“ex Club Privé”) is now live
.
I have not worked on the current design.

This entry was posted in Blogpost, Case Study and tagged , , , , , , , . Bookmark the permalink. Follow any comments here with the RSS feed for this post. Comments are closed, but you can leave a trackback: Trackback URL.