Work Project
Website+Mobile | Pastels Salon
Work Type: Collaboration (Remote)
Project Status: Complete
Project Date: June 2021
Project Medium: Digital
My Role: UI Designer
Tools: Photoshop
Project Duration: 1 month
Total Team Members: 2
Pastels Salon is a high-end unisex salon in UAE that provides cosmetic and grooming services and has recently expanded its business into one of Dubai's most expensive neighbourhoods. With the pandemic forcing offline businesses to resort to online means of conducting their trade, they wanted to maintain and increase their customer-reach in addition to making their online presence reflect the quality of their service and the luxury end of the clientele they usually serve.
In addition to maintaining their business reach with their with their clients, they also wanted to continue their retail business of selling their professionally recommended top quality products. I was solely tasked to create a shopping platform on their newly refurbished website that adheres to their brand positioning in the current market.
Website Mock Ups
What I Did
Design Audit
Understanding the design brief given and derive which direction to take that best renders achieving the UX goals for the website's shopping page
UI Design
Designing the layout of the user interface that reflects the new website branding and the luxury-end of the clientele the salon serves (as communicated to me)
Information Design
Figuring out how best to make the vast amounts of information less overwhelming for the website's visitors
Design Process
1 | UX Intimation
A brief was given on the visual branding and the UX goals developed by the Creative Designer of this project.
2 | Understanding Branding and Identity
The guidelines developed for this brand were studied for the purpose of understanding the branding to better incorporate the visual identity into the UI.
3 | Wireframing
Wireframes were made using this information for the About US, Services and Team web pages.
4 | UI Design
Laying into the blue print created in the wireframes, the user interface was designed.
5 | Feedback
Feedback from the client was communicated by the Creative Designer.
6 | Design Changes
Once the proposed solutions for the issues raised in the feedback were approved, changes were made to the design and all the web pages adapted were adapted for mobile devices
UNDERSTANDING
1 | UX Intimation
I was given brief on the UX goals of this project and the visual guidelines that needed to be followed to implement the branding developed by this project's Creative Designer.
UX Goals:
-
Maintaining their existing customer base while also increasing their customer-reach
-
Ensure their online presence reflects the quality of their service and the luxury end of the clientele they usually serve
-
To concise the information on their old website and make it less overwhelming for their customers to understand the services and expertise they have to offer
My Approach:
To gain further familiarity with the visual identity and the UX goals to be achieved I was given a copy of guidelines to be followed. Keeping these instructions along with the design brief I was given, I created a moodboard as a reference.
Moodboard
 Visual Reference for the Service Prices Page |  Brand Imagery |  Visual reference taken from UI designed for Home Page |  Brand Imagery |
|---|---|---|---|
 Reference for UI from Home Page |  Brand Imagery |  Visual reference for UI from Home Page |  Brand Imagery |
2 | Analyzing Branding & Identity
I studied the style guide that was provided to work as visual guidelines for the UI and noted key points I will have to keep in mind while designing this interface.
-
The intended effect of the visual experience is for the website to give an edgy, modern and editorial feel. Hence, 'New York' typeface has been chosen to be used for Headings.
-
This typeface is suggested to be accompanied with ‘Charlotte Southern’ for sub-headings or keywords. 'Space Grotesk' is required to be used as a paragraphic typeface.
-
The imagery is interesting, bold and representative of the wide range of versatile work that the salon has done. Most of them are done for various themed photoshoots. All of these photographs are the original proprietary of the salon.
-
A balance between edgy and organic is required to be kept.
-
A combination of shapes and typography is to be used throughout all marketing collaterals.
-
Shape guide is given, describing that rectangles with top curved edges, straight-edge rectangle and brush strokes
-
These shapes are to be adapted to the imagery and implement slight overlaps to maintain an editorial look.
Style Guide Provided
DEFINING
3 | Reviewing Business goals and Defining Objectives
This is a paragraph. Use this area to add any information you want to share with users. Just click "Edit Text" or double click here to change the text and make it your own. You can also adjust the paragraph's font, size and color so it fits your website’s theme.
This is a great place to tell users a story about your website and let them know more about what you offer. You may want to share information about your company's background, your team, or the services you provide. Be sure to keep the tone and voice consistent throughout the site so users become familiar with your brand.
4 | Understanding Brand Positioning
This is a paragraph. Use this area to add any information you want to share with users. Just click "Edit Text" or double click here to change the text and make it your own. You can also adjust the paragraph's font, size and color so it fits your website’s theme.
This is a great place to tell users a story about your website and let them know more about what you offer. You may want to share information about your company's background, your team, or the services you provide. Be sure to keep the tone and voice consistent throughout the site so users become familiar with your brand.
PROTOTYPING & DESIGNING
5 | Wireframing
Wireframing was a quick process due to the abundant relevant information, specific instructions and an improved clarity of the requirements; thanks to the moodboard of references, the style guide and insight-laden discussions with my fellow Designer team mate. It was clear to me that the website's layout would be spacious and clean, yet slightly edging over random - using the interruption of shapes and images in between the short paragraphs of textual information to keep the visitors engaged.
6 | UI Design
This is a paragraph. Use this area to add any information you want to share with users. Just click "Edit Text" or double click here to change the text and make it your own. You can also adjust the paragraph's font, size and color so it fits your website’s theme.
This is a great place to tell users a story about your website and let them know more about what you offer. You may want to share information about your company's background, your team, or the services you provide. Be sure to keep the tone and voice consistent throughout the site so users become familiar with your brand.
7 | UX Design: Shop Page
Wireframing was a quick process due to the abundant relevant information, specific instructions and an improved clarity of the requirements; thanks to the moodboard of references, the style guide and insight-laden discussions with my fellow Designer team mate. It was clear to me that the website's layout would be spacious and clean, yet slightly edging over random - using the interruption of shapes and images in between the short paragraphs of textual information to keep the visitors engaged.
TESTING
8 | Feedback
This is a paragraph. Use this area to add any information you want to share with users. Just click "Edit Text" or double click here to change the text and make it your own. You can also adjust the paragraph's font, size and color so it fits your website’s theme.
This is a great place to tell users a story about your website and let them know more about what you offer. You may want to share information about your company's background, your team, or the services you provide. Be sure to keep the tone and voice consistent throughout the site so users become familiar with your brand.
9 | Design Changes
This is a paragraph. Use this area to add any information you want to share with users. Just click "Edit Text" or double click here to change the text and make it your own. You can also adjust the paragraph's font, size and color so it fits your website’s theme.
This is a great place to tell users a story about your website and let them know more about what you offer. You may want to share information about your company's background, your team, or the services you provide. Be sure to keep the tone and voice consistent throughout the site so users become familiar with your brand.
CONCLUSION
What I learnt
Every website has a story, and your visitors want to hear yours. This space is a great opportunity to give a full background on who you are, what your team does and what your site has to offer. Double click on the text box to start editing your content and make sure to add all the relevant details you want site visitors to know.
If you’re a business, talk about how you started and share your professional journey. Explain your core values, your commitment to customers and how you stand out from the crowd. Add a photo, gallery or video for even more engagement.
Project Summary
Every website has a story, and your visitors want to hear yours. This space is a great opportunity to give a full background on who you are, what your team does and what your site has to offer. Double click on the text box to start editing your content and make sure to add all the relevant details you want site visitors to know.
If you’re a business, talk about how you started and share your professional journey. Explain your core values, your commitment to customers and how you stand out from the crowd. Add a photo, gallery or video for even more engagement.