Screen%20Shot%202020-11-10%20at%201.00_e

Paris beauty 

company

website

redesign

Project

Overview

Working as the only Designer in the team, I designed and prototyped the official website for a beauty salon in Greater Toronto Area. From September to October, 2020, I established the design system, iterated the product structure, and refined several versions of design. The website has been launched.

Role_Paris Beauty.png

Process

When we started this project, we elected to use the basic User-Centered Design process of Discover, Define, Design, Deliver. This process allowed us to research and explore our chosen space and better understand what our users needed and the best options for delivering a solution. As we moved forward we were able to iterate on our design and validate the direction of our project. Overall, this process was a great means to ensuring that our project delivered a solid solution.

discovery

Our client’s previous website was built via Square, since she believed Square was the platform that could be more effective for her online store development. However, due to some restrictions from the platform, the website had less flexibility for her future business development. The website lacked imagery content and visual element. Besides, there was a major issue with visual hierarchy. Certain parts of the website (calls to action, value proposition, etc.) were more important than others, and our client intended those to get more attention than the less important parts. So we needed to redesign a new website for her and prevent flat designs from falling flat in order to offer a more intuitive and interactive user experience.

before.gif

project Goal

Our goal is to enhance the digital presence of the business's website in order to boost brand awareness, improve effective interaction as well as engagement, attract a younger demographic (16-30) and create the base for a future online educational product.

Design decisions

#1. "Stick" to the Call-To-Action Buttons

With the design goal of generating more engagement, I increased the number of call-to-action button to the each section on the homepage. Besides, I added a hamburger menu and made them sticky to the screen, so that wherever people are scrolling at, they will always be able to conduct the target actions as we expected.

unnamed.png
Screen Shot 2020-11-10 at 1.15.59 AM.png
Screen Shot 2020-11-10 at 1.16.07 AM.png

#2. Redesigned the user flows

The first thing to consider is your user flow, or the path by which the visitor will navigate through your website. After all, web page design isn’t about creating a collection of individual pages; it’s about creating flows. This path is a series of steps that the visitor takes from the entry point (the first page where they land) toward the specific action you want them to take (typically a conversion action, such as a sign-up, purchase, etc.). The following will help you determine your user flows as you design your website.​

Screen Shot 2021-01-14 at 1.21.43 AM.png

#3. Changed the whole color scheme 

color scheme.png

Final Product

homepage1.gif
homepage2.gif
menu.gif
book.gif
contact.gif
service.gif
card.gif
Website
redesign

Website 

Emergency Instruction1.png
station.png
homepage.png
Emergency Instruction2.png

Our user journey for this solution begins at the station. The GRT/LRT has had issues with people stealing their paper display maps. So we decided to include a digital map feature.
 

Here you can see the current paper maps on the left, and our new interactive solution on the right. 

unnamed.jpg

In our solution, a commuter can look at the map, zoom in, search for local events and promotions, and track their train in real-time.
The Station Screen also has a prompt from our mascot: The Littlest Hobo, to download the GRT App and interact with it on the train.