Kari Lynn approached me about re-doing her outdated website. She admitted that the current site was a free one that she herself had put together. She knew her existing site wasn't professional enough and rarely used it to market her business. She mainly used it to refer potential customers to her service menu and pricing structure. We met and determined what the main goals of the site were the following: a site that is easy to navigate (many of her clients were older), attractive and modern, male it simple for people to book appointments online, and easy to find services and pricing. Additionally, having an online booking system, which she did not have on the old site, would cut down on missed appointments (and therefore missed revenue), another ongoing problem for her.
For this project, I developed two personas: A primary, Megan, and a secondary I named Amy. Each has different needs and goals. Megan is a young, cost conscious Millennial who prefers booking online and views going to the spa as a treat since she can't do it often. Amy, on the other hand, is an older woman who is beginning to engage in anti-aging activities and sees the spa as a necessity. Her needs are different. She is not quite as trusting when it comes to technology. These two personas were borne out of the research done in the previous phase. View Megan's persona. View Amy's persona.
Performing the task analysis allowed me to easily walk through the flow to identify the key screens necessary to understand how Kari's users would go through the main task of booking an appointment online. Some key things we strive to understand: How they arrived at the site (for example, entering from Facebook or Yelp), where they go as they move through the site, and finally the end of the process where they get the email confirmation. Understanding this flow is vital to the creation of the site and helps us set up the user flow.
Based on the previous task flow and what we know about their habits, this user flow walks through both Megan and Amy's journey through the site, taking into account various decision points along the way. View the full user flow.
Redesigning an existing website gives us the "advantage" of having an information architecture (IA) already in place. The client and I discussed the structure of the site ahead of time. I had every intention of speaking with her clients about the use of the site to get more insight into the architecture, but she was reluctant to give out their information to me. If I had had that research and also usage statistics, information architecture might have turned out differently. However, it was the client's wishes to keep the IA largely the same as the old site. I did not have any data to convince her otherwise. The main difference between old and new site is the addition of the Appointments page.
Here is the resulting site map.
After showing the client some competitor's websites, and nailing down the site architecture, we had a feel for how the site should look. We wanted to keep it very loose and flowing and not get distracted with a lot of detail. This exercise allowed me to start thinking about where content would fall on the page. Here, you see the homepage and its potential layout. Using sketches allows for quick iteration and the generation of ideas very quickly. View the full sketches.
After reviewing the sketches with the client and a couple of iterations, it’s time to start refining in the form of a low fidelity wireframe. Here, I further identified the layout of the interface. Utilizing wireframes in the beginning phases of design, is an efficient way to communicate placement of elements without getting too bogged down in minute details. A huge benefit and timesaver is that the layout can easily be changed. View the full responsive wireframes.
For Kari's moodboard I used some of the feedback gathered during the interview stage. The interviewees were asked about color and ambiance. Water came up a lot in those interviews. People mentioned blues and greens most often because of their calming effects.
View the full mood board.
The logo is the flagship of branding. This process began with coming up with words that embodied what the company was about, followed by rough sketches, and finally into the version seen here.
This is where Kari's branding really starts to take shape. By using the moodboard elements as inspiration we came up with the resulting style tile you see here. The client was presented with a choice of color palettes and she chose the one pictured. This gives us an idea of how the site could look by listing out all the different variations in logo styles, colors, and photo usage. The style tile helps set the mood and tone of the brand and is used in the next step. View the full size style tile.
In this step, I did a more polished, high fidelity version of the low fidelity responsive design mockups done earlier. It’s the same concept, except I applied the aesthetics from the style tile. This version contains all of the fonts, buttons, components from the style tile.
View the full size high fidelity responsive design.
From our responsive design and style tile comes the UI Kit. The UI kit is a standardized inventory of all the components and design patterns and defines how they should look inside of the site. It sets the standard for the developers to follow and for the design of subsequent pages. A UI kit also identifies navigation and button states. View full size UI kit.
The high fidelity prototype is created in preparation for usability testing. In this step, we define what we want to test and why. In this case, it will be our main task flow of booking a service using the online booking feature. We develop a test plan and develop the flow inside of our prototype using a tool called Invision. Interact with the prototype.
An affinity map is created from the findings during the usability testing. The map helps sort, prioritize, and rank user feedback. From those results we are able to see patterns and from those we are able to come up with refinements to implement in the design.
From the affinity map exercise we determine which revisions we want to make to the prototype. We begin by prioritizing which ones have the lowest amount of effort but the highest rate of return. The changes in this case were relatively minor and so nearly all of the changes that users suggested were implemented.
Kari Lynn is a real client. All of the necessary pages will be mocked-up and subsequently implemented before the end of 2019. We will come up with some KPIs so that we can monitor site usage during the year and see if whether or not we were successful in our endeavor to make this into a viable marketing tool where Kari Lynn can gain new business.
Whether it's a UX or LX project I have the breadth and depth of experience to bring it to life. Hire me for contract, freelance, or full time hire. Let's work together on YOUR next project!
