UX Designer
This was a course project for the Google certification program in which I needed to redesign a website for a business. It just so happens that my wife owns and runs her own hair salon. Her template website seemed like a perfect fit to work on for a project of this scope.
I asked both salon owners/stylists and clientele to participate in my research for this project. I discovered that salon websites are largely disorganized and unhelpful to both the user and the business owner. Clients expressed frustration with broken or outdated links and photos. Stylists were upset with the lack of professionalism on the site, and Owners didn’t appreciate the hard to use scheduling sections.
As part of my research, I found other websites in the competitive space. In doing so, I was looking for great interactions, accessibility, and overall booking experience.
I created a persona of the main demographic of the salon. While there are some that don’t fall into this group of people, this one represented the majority.
After creating the logo and finishing initial research, I then began working on the design process. Starting with creating a flow.
I created a simple main flow diagram to follow. This is a few of the main flows the client could take. Fail states and other minor flows are not shown due to space constraints.
Once I had a main flow path for the users to take, I began working on creating low-fidelity wireframes.
Once I had the basic flow down, I did a quick usability study on the low-fidelity prototype to find what else I could improve on. The logo and brand was already established. With that I was able to focus on creating the foundation of the website.
Most of the hair industry branding and colors are black and white. Salon Bei is no different.
After the first usability study on the wireframes, I began work on producing the high-fidelity designs. I created 6 web pages and a booking system to encourage users to book their next appointment online.
After connecting my high-fidelity designs into a prototype, I was able to retest it with users to gain their feedback on what I could further iterate on.
I evaluated the app against the AA standards of WCAG. I used various online tools to help pick good contrast ratio colors. This project was quite easy with the contrast, with the branding being black and white.
With this being my first webpage design, I was able to test how my designs coincide with productivity. I took information that bothered users, and the other flaws of design from my UX design knowledge, and was able to create a prototype that offered a more usable and seamless experience for all. Working through my process of low and high-fidelity designs, working prototypes, and finally an accessibility check to assure I didn’t miss any opportunity to perfect the experience for all users, I finally produced a working, stylish website.
