This was a passion project that I started a while ago for a web application from scratch that serves a potential real-life need. It provides customers with a convenient way of finding beauty and wellness certified professionals online (hairstylists, make-up and nail artists, massage therapists) to have them come to customers' locations as the main focus. The secondary focus is also providing an option to go to the professional’s business location.
I designed the web application with a calm and professional feel to it with a focus on the branding and the usabilty of the interface with common functionality. The end goal was to provide an easy way to book a luxurious experience at the customer's location (their home or event), and for those that may have anxiety, discomfort or mobility issues to visit salons/spas.
As someone with a strong UX background, I felt the need to start with some light usability research to test an American competitor called Thumbtack as a benchmark. Normally, in the real world, I would also gather other preliminary research including market research if it's done by market researchers.
As someone with a strong UX background, I felt the need to start with some light usability research to test an American competitor called Thumbtack as a benchmark. Normally, in the real world, I would also gather other preliminary research including market research if it's done by market researchers.
The reason I chose Thumbtack for competitive benchmarking among others in a similar space, is because I thought Thumbtack had the best user experience out of all of them, however, I wanted to test their appointment booking flow to identify if there are any usability issues as well as new opportunities to consider that Thumbtack overlooked. I mainly tested with colleagues and friends that are interested in the beauty and wellness industry. Most thought their flow was clean and easy to use for some of the services they provide.
I also analyzed similar online booking services to identify key UI patterns and what worked and what didn’t from a usability perspective. I collected screenshots of examples that inspired me and what could potentially work for users.
Before sketching out wireframes on paper, I worked on choosing two key user flows to design in the time I had, which were registration and appointment booking flows. Then I drew out the information architecture as how I had imagined for users to achieve their goals using the web application. I also considered a future state of providing access for professionals in the navigation, which would be linking to another portion of the website specifically for professionals.
Now for the fun part - sketching lo-fidelity wireframes on paper! I didn't stop at just one version but about at least 3 or 4 versions of lo-fi sketches. Then once I felt comfortable with the ideas of the user interaction for the onboarding and booking flows, I moved on to Sketch for medium to high fidelity wireframes.
The homepage and registration/onboarding flow were where I spent most of my time working on as the registration/onboarding flow needed logical and critical thinking to be involved. The registration part simple as long as the necessary steps were taken for a user to complete quickly and easily with key UI indicators in the right areas, but I also added an onboarding section to the end of the registration to give users an option to get started with using the online service in a breeze.
During the wireframing process, I iterated the key pages such as the homepage based on how it scaled and what key information to display.
I took time to gather colours that I felt right for the brand and service type. I decided to use a palette that has earthy and relaxing tones to convey the brand's mission, which is to provide customers of all ages a comfortable and luxurious experience anywhere they would like which will make them feel confident in their own environment.
Once I felt comfortable with the set of high fidelity wireframes after testing it informally with a few people I know, I added the colors and graphics that I genuinely enjoyed working on. I also experimented with pairing different font types and sizing. During this process, I iterated and experimented on what these designs and graphics would look like on mobile by using the mirror feature on Sketch.
When time permits, I'll continue designing the rest of the platform.
Have a questions or want to chat about possibly working together?
Feel free to contact me!
