UX Case Study
Website re-design
My role: UX / UI Designer
Summary
A client, who just opened his own business asked me to give him advise and use my expertise to make the website look better. He doesn’t have the knowledge and the time to create a competitive website . The existing one has some flaws, and looks unprofessional. In my case study below you can follow up the steps of the design process, understand my design decisions and at the end you will be able to see the new product .
Discovery
Identify the issues and find the right solutions
User research
Collecting data points about the user's needs -and factors, that influence their decision.
Information Architecture
Explain the different processes involved in accomplishing a task from the MVP
Design process
Wireframing, design the mood board, color palette, typography, designing mock-ups
Development & User tests
Prototyping and show the final product, user tests, conclusion, lessons learned
01. Discovery
What are the problems?
UI Design
The competition is big and if the website is not catchy the user will leave the page without giving a chance to read it through. The colors and pictures with the combination of the name are in my opinion a bit misleading. I thought at the first glance that the site offers boxing workout classes only for women. The mood of the page should match with product.
Functionality issues
It was not clear in all cases that the buttons/links are clickable. The sub menu is in a very light green color which can be difficult to read for people with vision problems. I was not sure where I am on the page, it was confusing sometimes. The system didn't allow me to book a training at the trainers picture I had to go back and forth to see who is gonna train me.
Not responsive
I have tested the website on my smartphone and the interface looks quite broken plus the functionality is also not working perfectly. Some buttons don't work which has worked on the PC. The target group uses mostly the phone for internet surfing, ticket bookings, so it would be wise to consider an adaptive or responsive design.
02. User research
As user research methods I chose to do some personal interviews in the first round. You can see the answers summed up in 3 groups. In the second round, I illustrate some statistics based on the results of the questionnaire created by Google Forms. Combining these two methods helped me to get rid of biases and identify the actual user needs, behavior and pain points.
I heard about the website from my friend that this will be the new hype in Vienna and sure we had to go and try it out. I find the idea really cool! In my opinion the website is very basic, I missed more pictures of the gym and maybe some videos of the training sessions.
I find the website a little cold. I miss much more photos about the gym, what I saw online was pretty dark. I also favor the sticky menu, I don’t like to scroll up and down all the time. I also miss some live training videos and maybe some customer review would be also not that bad.
I think the website is OK, but could be done much better. I would add some more pictures, maybe introduction videos of the trainers and some testimonials of the people who tried the training already. Customer reviews would be also helpful. Because of the pandemic I would also consider an online course.
82 people answered the survey questions that I have prepared with the help of Google Forms. I searched for target audience within online training groups/communities based in Vienna.
Would you like to see more pictures of the location?
90% of the people were not satisfied with the amount and the quality of the pictures.
Would you like to see some videos of the training sessions?
100% of the attendees answered this question with a yes.
Would you like to read about reviews and testimonials about the training?
80% answered yes for this question.
Do you use your phone or your desktop for internet surfing?
60% answered that they use their mobile phone.
SOLUTION
New UI
From the user research, I have figured that the UI is fine for the users as it is. I have still decided to make some minor changes regarding the colors and the pictures: will use darker colors (black, blue) because that could represent better the business profile and fits more to the product (workout in a dark place with flashing lights)
Functionality improvement
The buttons will change the colors when the user hoovers above, to inform the user that it calls for action. I also would like to make sure that the user always knows what's happening. If there is no action an error message has to pop up or information about the process issue.
Make it adaptive instead responsive
The smartphone version has to be very good and easy to use because most of the users will book classes via phone. I prefer to make the mobile version responsive and not adaptive, because it is financially a better choice for the business owner.
03. Information architecture
Site map (mobile version)
After the results of user research it was clear how to re-organize the website. Below on the sitemaps I show you how did I change the menu and why. Sometimes the less is more! My point is to keep it simple and fast. In the main menu, I organized all the essential topics. I arranged them in descending order of importance. The first 2 menu points are at the beginning because as it turns out from the user research. Given that the payment transaction is handled by a third party, I do not find it necessary to create an authentication.
Site map (desktop version)
My plan is to make it as simple as it is possible. There is a main header menu and a secondary footer menu. No further sub-menus. New users find some words about the workout on the home page , also the contact form. In the footer you find the secondary information.
User flow map
I illustrated both of the user flows with a new user and with a returning one. The main task is to book a class. My plan is to lead the user from the most visited pages to the pricing page. In those 3 pages I always give the option to the user to press the “book now” button and land on the pricing page.
04. Design process
Brainstorming - mobile
I was brainstorming how could I reorganize the best way the website on the smartphone. The results are marked in my first drafts. For the customer the most important is that the page visitor books classes or/and subscribes. This 2 functions I placed on the first screen when we open the page. It is important that the user can book very easy and fast from most of the pages.
Hi-Fi Wireframes - Smartphone
After I finished the ideation and the research, I could come up with a clearer picture what the user wants and what could be also for the business beneficial.
New functions & content:
- For someone who visits the page first time can be convinient to check out the special intro offer right away from the home page.
- From the interviews I realised that the users miss more information about the classes and the place. Next to the short intro I would add a video about the training sessions and some more pictures about the studio. A slideshow of testimonials and ratings from the returning clients can give a better picture for the new users about this service.
- At the price list the user can book right away the sympathetic package.
- Sticky menu
Wireframing tool: MockFlow
Moodboard
The key words to create the mood of the page were: sweat, club, tough, neon light, workout, cool. My goal was to make the website unisex and trendy. I chose the black background color because the dark mode stays the design trend also in 2021. It reflects that the trainings are in a darker ambient. I used the colors that you can find also in home page picture (training room) except the pink. I wanted to keep it simple, so I decided to stick with black and blue.
Hi-Fi Mockups - Smartphone
In the next step I have created the high fidelity mock-ups for the mobile version.
I chose black and blue colors as primary colors so it is somewhat in harmony the mood of the website. When the user taps on a button it changes the color to dark blue to make sure the user knows the action has happened.
On the original webpage, the pink background and the girl with the boxing glove can mislead the user. The whole mood of the website feels too bright for me. My intention is that the user gets the vibe even before he/she enters the studio. The training will be in the dark with flashy lights and loud music. Somehow I didn’t find it matching with the chosen colors in the original website. Below I would like to represent all the smartphone screen designs below.
Web page comparison (Mobile Version)
I made some screenshots about the original page so you can also see the difference and compare. Just pull the arrow left and right to see the webpage before and after.
I find on the original contact sheet the location letters too big. I have made it smaller in my design.
On the original page when I pressed on the menu options it didn’t change the color neither happened any change which would imply some action. The user also find it annoying that the menu was not a sticky one.
The logo is too big in the middle and I don’t find the point to mention it 2 times after each other, it just takes up lots of space without.
Instead of making a whole fixed block for the COVID-19 measures, I find it is a better option the add this information to a pop-up window, right when the user enters the webpage.
Brainstorming - Web
When I started to work on the web wireframes I was a bit overwhelmed how much space I have. My point was to still keep it simple and not overcrowd with unnecessary information. I have made sure there is enough space for some basic information about the training on the front page. I also thought now is the time to use the map. It could look good next to the contact form and address.
Lo-Fi Wireframes - Web
I put all the main information on the home page, so the user just needs to scroll down. If the user wants to engage more (like buying a ticket for the training or check out closer the training sessions, and trainers) has to go to the sub-folders. The paying process runs through a third party, that is the reason why you will not see some screens about the paying methods.
Hi-Fi Mockups - Web
On the home page, you find all the relevant information that the user would want to know when he/she enters the first time on this website. The header menu is functioning as the primary navigation system, providing more relevant information for the user. I also add a video about the training sessions and a carousel about few testimonials and customer ratings. To get back on the main page the user must click on the logo. In the footer navigation, I structured all the secondary information.
Functionality changes:
- I have designed a sticky menu because the users don’t like to take too much time scrolling up and down.
- The first-time visitors can get right away from the home page to the special intro offer training just with one click.
- Language options in the upper right corner.
Below you can see few of the the desktop mock-up.
Functionality changes:
- Next to the prices I have created a button “book”. The user is able to book the class in a very convenient way. After the booking, it will automatically direct the user to the schedule site. With the back button the user is able to go back to the price list site.
- In the 2nd screen you see the schedules in weekly basis. You are able to choose to see also the schedule of a specific trainer as well.
- In the 3rd screen you see all the trainers, with a short introduction video and description. You are also able to book the trainings here as well/trainer.
05. Development & user tests
Prototype
To show the functionality I have designed a prototype. You find here also in more detail the different pages and functions of the webpage.
User Testing
I used the AdobeXD app to complete the usability tests. You can see below in the video one user test that I have recorded.
App Design:
- Upvote: the design looks much more professional like before
- Downvote: I am not sure about the light blue color of the menu. I would make it a bit smaller, it looks big.
Information about FAME – boxing:
- Upvote: Good structures. I can find all the information that I need. I find it good, that I get information about the COVID measures right at the beginning.
- Downvote: on the mobil version I find the information too much. A read more button would give the freedom to decide if I want to read it through or not. I felt its too much scrolling.
Purchase classes:
Upvote: it’s easy and intuitive, I really like the ticket stiles.
- Downvote: I didn’t find the option how to go back one step.
Trainers :
- Upvote: The short introduction is cool and I like it that you can book classes also right at the trainers.
- Downvote: I find the pictures not professional.
Usability test:
- Upvote: It was fun, and it was not time consuming.
- Downvote: –
Conclusion
Followig the plan, the user interface became more structured and trendy. To present the final product I needed to do 4 iteration and correct some design decisions and add some missing features. The pictures on the website still need to be changed, because the quality is poor.
Considering the results of the user tests I was able to move to the next step and present the prototype to the business owner. I am looking forward to see the design coming alive and I am planing to add some insights to this case study, how did the business revenue change after the changes.
If you enjoyed reading my case study I would appreciate some comments below.
