Studio 107 Website
Create and code a responsive website challenge
My Role: UX/UI Designer, Project Lead, Front-end Developer
My Teammates: Salah Fekkak, Kelly Willcox, Nathan Madden
Objective: Create a responsive website or application that solves a need of a stakeholder
Timeline: 3 weeks
Tools: Figma, Google Suite, Slack, GitHub, Visual Studio Code
Where we started:
-
We chose a project to create from scratch. I had a personal tie to a family friend that owned a business and did not have a website. So, my group and I decided that this would be a great final project for the class. We first met with Kelly the owner of the business and found out what her needs were. From there we went to user interviews and surveys.
User interviews:
-
To get more qualitative data, we interviewed two participants to understand their needs and frustrations better when looking for a new salon or visiting salon websites
-
Through these interviews, we found that simplicity, ease, and inviting/calming ambiance were preferred and sought after by users when looking for new salons and salon services.
-
User Survey:
-
Our survey reached 92 responses.
-
84% of our respondents were female. Most lived in the midwest (which worked out well since Studio 107 is located in the midwest). Over half of the participants ranged in age from 26-35 with the other 50% falling pretty evenly above and below that age range.
-
We found that most users (almost 80%) care first and foremost about the cost of services;
-
Followed closely in importance were location, a list of all services provided, and visuals or a portfolio of the stylist's + cosmetologist's work
-
-
We were surprised to find that booking/scheduling was not a top priority for the majority of users.
-
Competitor analysis:
-
We looked at a range of local and national salons to get an idea of how they interacted with their users and how their websites functioned
-
Overall:
-
We found some opportunities to streamline typefaces and be mindful of whitespace on the website in comparison to some of the competitors,
-
But also found examples of effective card layouts and nice personal touches about community involvement and business history that we wanted to incorporate
-
User persona:
-
To get a better idea of who the user might be, we created a user persona
-
While Studio 107 caters to everyone, in our research we found that most people who went to salons identified as female
-
We took this time in building the user persona to focus on the user's core needs and frustrations as it relates to a salon experience and from this wanted to make sure we took into account: reliability, simplicity, and budget-friendliness through every step of our process to meet their needs.
-
Empathy map:
-
We went one step deeper to better understand and empathize with our users to best identify what they might be experiencing when trying to find a new salon or new beauty service to help better inform and inspire our ideation process
Wireframes and Clickable Prototype:
For this project, we used the software Figma to create our prototype. We found as a group that it is easy to work together and separate on this overall project.
While creating our prototype we finalized our UI Style Guide which made an easy transfer from Figma to a fully coded website.
Conclusion
Message: We are developing a website for Studio 107 to help salon clients have better visibility of their services, pricing, and contact information. Studio 107 is the premier Salon choice because they put their clients first, and they are believable because they value quality over quantity.
Proposal for Future Changes:
-
Hover States
-
Embedding Live Facebook feed
-
Potential link to purchase products (commission link)
Next Steps
-
Publish coded website to domain
Final Coded Website hosted by GitHub pages: https://kyleighn.github.io/Studio107-Bootstrap-Website/
View the published website here: http://brfstudio107salon.com
