My role: UX/UI designer – re-designing the existing website
A friend of mine, who just opened his own business asked me to give him advise and use my expertise to make the website look good and user friendly. He doesn’t have the knowledge and the time to create a competitive website and he thought maybe I could help. There is already an existing website but it has some flaws. In my case study below you can follow up the steps of the design process and at the end you will be able to see the prototype .
Identify the issues and find the right solutions
Collecting data points about the user's needs -and factors, that influence their decision.
Explain the different processes involved in accomplishing a task from your MVP
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
What are the problems?
The appealing of the website looks amateur and boring. 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.
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.
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 wanted to show some statistics and I sent out a questionnaire created by Google Forms. In the third round, I will contact the marketing person at my friend’s company and get some insights into user behavior through Google Analytics. These methods will help me to identify the user needs -and behavior.
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. The training was really cool, but I must say if I would have seen only the website I am not sure I would have give it a shot.
I am a big fitness fan and Instagram suggested me the site. This is how I ended up on the website. I find the booking procedure a bit confusing and the interface not so professional. The workout was great, I will definitely go again.
I find the page on Facebook. I think the webpage is OK, but could be done much better. The idea is great, but I would make it possible to do some online classes as well. Also the UI needs improvement and some button functions are also questionable.
Did you find the website through social media?
65% of the people find the website through a social media platform (Instagram, Facebook). The rest of the people heard from a friend about it.
Do you think the look of the website needs improvement?
90% of the attendees answered this question with a yes. Most improvement was suggested to be done on the user interface and on the button functionality.
Would you subscribe if you could get information about new events from first hand?
50% answered yes for this question.
Do you use your phone or your desktop for internet surfing?
80% answered that they use their mobile phone.
From the user research, I have figured that the UI needs improvement regarding the colors, picture quality, and mood. I will use darker colors (black, blue) because that could represent better the business profile and fits more to the user group. It will be clean and minimalistic.
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 adaptive and not responsive, because I don't want to put all the information in the same spot where they are on the mobile version.
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
Lo-Fi Wireframes - 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 a 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.
In this first draft I made a separate widget for the mission and for the workout description and a part where you see the address and a map. Later I considered that these parts are unnecessary, because they take up too much space, but I could consider it to add to the desktop version. I would like to show on the front page the most important features, so at the end I decided that I will put the Mission and the workout plan under the menu point “New to FAME Boxing?” I used the address at the Contact section, but I didn’t find the map that essential.
Hi-Fi Wireframes - Smartphone
As COVID-19 is now days one of the hottest topics and influences quite much if someone will go to a training session or not. I created a pop-up about the restrictions right at the beginning when the user opens the website. All the other pages will be under the menu.
Wireframing tool: Balsamiq
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. In the first iteration after the user test it was clear for me what to change / improve. Below you see the results from the last iteration.
I chose black and blue colors as primary colors so it is somewhat in harmony the mood of the website. When the user clicks 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 letters too big. It takes up necessary space.
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. I also find it disturbing that it covered the whole site.
The logo is too big in the middle and I don’t find the point to mention it after each other.
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.
Lo-Fi Wireframes - 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 first 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. In the very right corner, the user is able to change the language. To get back on the main page the user must click on the logo. In the footer navigation, I structured all the secondary information.
Below you can see all the desktop mock-up. This is already the final version (3rd iteration).
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.
Web page comparison (desktop version)
I wrote a little introduction under the trainers names and made it possible to book right at the trainer the courses as well. There is plenty of space between the images, because I didn’t wanted to make it look too crowded.
In the original website every section has a different color. I don’t find it aesthetically smooth. I made the whole background black so the sections blend in more.
05. Development & user tests
To show the functionality I have designed a prototype. You find here also in more detail the different pages and functions of the webpage.
- 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: I missed some introduction videos from the trainers, it would make the choice easier.
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.
- Upvote: The short introduction is cool and I like it that you can book classes also right at the trainers.
- Downvote: I missed some introduction videos from the trainers, it would make the choice easier. Also, I find the pictures not professional.
- Upvote: It was fun, and it doesn’t take much time.
- Downvote: –
Following the plan, the user interface became more structured and modern. After the user tests it was clear what was a success and what needs to be better adapted in the next iteration. In the mobile version, we need to add a “back” button to make it possible to go back one step in case the user changes the mind about the ticket purchase. I also agree that the quality of the trainer pictures are bad and that we need better pictures. I have already suggested this to the business owner. All together the project has got positive feedback and the design and functionality is better than it was.
When the design will be implemented I will make some more updates here about the results.
If you enjoyed reading my case study I would appreciate some comments below.