Website
Valeriana Ecosalón
Website design for an eco-friendly salon.
Role
UX UI Designer
Tools
- Adobe XD
- Figma
- Illustrator
- Photoshop
Abilities
- User investigation
- Information Architecture
- Web design
Timeline
March 2023 - june 2023
Team
- Genesis Vicencio
- Tamara Araya
- Javiera Barría
- Kiara Inzunza
Description
See BriefThe project involves developing a self-administered website for Valeriana Ecosalón, with the primary goal of enhancing its online presence and improving the client experience when accessing information about its products and services.
Investigation
See Investigation (in Spanish)To begin the web design process, we started with the investigation stage, where we collected information about the Ecosalon, analyzed design trends, and identified potential issues the Ecosalon might face in managing its clients.
Therefore, one of the first steps we perform is to consider the competence, and then we evaluate the different websites related to hair salons and beauty salons.
In addition, we make an environmental analysis that consists of reviewing the actions the hair salon and beauty salons take, and reviewing the future tendencies that could influence the ecosalon.
Finally, with the SWOT analysis, we identify the strengths, weaknesses, opportunities, and threats to the ecosalon.
User
To make the archetypes, we center the investigation on the Ecosalon target audience, conducting surveys and interviews. The public shares a common lifestyle, with a focus on personal care or the natural environment. Below, we will detail the archetypes detected:
Findings
After we make the investigation, we proceed to detect the weak points to structure the design, focused on solving the problems that users may encounter in the ecosalon.
- The location of the ecosalon allows them to have a noise-free space, but there is a possibility to make it will be more difficult to find the ecosalon due to the lack of visibility.
- People don't know about the term “ecosalón” (or eco-salon in English), and there is also a lack of information about organic products.
- Organic isn't a synonym of safe; allergies should be considered person-to-person to using a product.
- Social networks can be boosted, currently used as a product showcase.
Navigation Map See the map in Figma
After we obtain all of the findings, we start defining the website, this being an e-commerce website with a scheduling section.
We presented multiple maps to organize the information, considering all format screens. We defined a product and services section, an informative blog, and a scheduling section, all of that to solve some of the problems detected in the investigation phase.
Wireframe
With the main structure defined, we make a couple of wireframes, of which we selected one to develop as a mockup.
Style guide
To develop the style guide, we created a moodboard, considering the terms of closeness, attentiveness, and consciousness, in addition to reflecting the natural theme of the ecosalon.
Finally, we defined the style guide, considering the typography, colours, and elements in the website.
Mockup
See mockups in FigmaAt last, we applied all the graphic elements detailed in the style guide to generate the mockups, and later we used them to make the site in WordPress.
