Case study: Design a desktop website to improve the presence of local business
In the last few years, e-commerce has become crucial for all businesses and it’s almost a must-have. According to UN trade and development experts UNCTAD, the e-commerce sector saw a “dramatic” rise in its share of all retail sales, from 16% to 19% in 2020.
Since 2020 many small and local business has relied only on their online portals or platforms to survive to the “new era” post-pandemic. That’s why as UX/UI Designers we should support them and help them to improve their sites to get better outcomes.
In this case study, I will guide you through the desktop solution that my team and I created for a local Stakeholder in order to improve his business and also be more competitive in the market.
Project Brief
Context: UX/UI Design Bootcamp by Ironhack
Duration: 3 weeks (Part-time)
Topic: E-commerce
Device: Desktop
Learning goal: Learn and implement Design Thinking. Define and solve the problem. Also Stakeholder collaboration and User testing.
Design Challenge: Design or redesign a desktop website for a local business or professional. Focusing our efforts on clearly organizing the information to be most effective for both the customer and provider. Also, we want to tackle Interaction design patterns to make the exchange as streamlined as possible.
Contributors: Xavi Almirall, Ornela Ruci, Victor Pasche and Silvia Vukic
Tools: Figma
Stakeholder
We worked with David Guillen. He is freelancer tennis, padel and beach tennis coach based in Barcelona, Spain. He would like to rebrand his business, starting from his website along with expanding to new business models.
Business Analysis
- Stakeholder Interview
To know more about our stakeholder's needs, we had an interview with David Guillen and his business partner Paco Marín via Zoom. It was a very interesting and deep interview about their business strategy and ambitions with this new project.
“[…] We would like our brand to be classic as tennis, as a sport is quite traditional in terms of rules and history. But we like to combine the concept with a modern touch along with innovation brought by the use of technology and making this easier for the client […]”
David Guillen, GM Racket Sports Co-Founder
Firstly, they want to rebrand and rename their business to GM Racket Sports. Also, we were able to discern through the interview which areas were a priority for them, and it was clear that on top of just creating an academy they had more ambitions like consulting and organizing tournaments and events. Especially when asked about what made him lose clients the topic of technical mistakes came up, that’s why they would like to apply high-end technology to their training.
We kept these 5 pillars in mind when going over the competitive analysis:
- Competitive Feature Analysis
We separated our research between freelance businesses and more established teaching institutions. This helped us further investigate what our strengths and weaknesses were, what was important and what wasn’t in connection to our stakeholder’s project.
The main thing to notice about the feature competitive analysis is that none of the competitors had an internalized booking system, which became relevant throughout the rest of the project. Because the comfort of the user is what keeps him coming back, we could set ourselves apart if we focused on that.
User Research
When searching for our interviewers, we opted not only for the business’s desired target but also for other potential clients. We were able to conduct 7 interviews among people with experience with practising sports and searching for a personal trainer, between 20–40 years old, with a busy schedule but who enjoy exercising and makes them feel happier.
Insights and feedback surfaced that sports and exercise, in general, has taken so much importance post covid times and people would love to increase the frequency despite their busy schedule.
And the insight we paid more attention to was about the way the client communicate with the coach.
“It’s quite time-consuming to set up sessions especially because my coach is quite busy and the back and forth messaging can be quite long.”
Roberto, 32 years old
After the affinity diagram, we were able to shape the ideas gathered with the support of the empathy map, which lead us to define our primary user persona.
This is Roberto. He just moved into a new city for work reasons. He is young, healthy and extremely busy but he knows the importance of practising sports regularly. He would like to improve his tennis technique and find a coach for that purpose. Also, he would love to practice with other players, within the same level of expertise. He can’t dedicate too much time to efficiently organizing sports and social activities, so he usually ends up in the situation to choose between work or exercise.
This is Roberto’s journey when facing the experience to search for a suitable coach, schedule his sessions and enjoy his time by finding other players.
Within this journey, we have identified multiple opportunities such as:
- Availability of online/offline information is overwhelming.
- Difficulty to find a perfect coach based on its needs.
- Organizing training sessions it’s time-consuming.
We employed this info to draft our problem statement which is:
“ GM Racket Sports was created by an expert coach to get people closer to tennis and other rackets sports. We have uncovered opportunities related to the communication and booking process, being the main root causes of delays in the appointment, ultimately causing loss of engagement from the clients who, being extremely busy, decide to not continue with the classes.”
Ideation
After taking into consideration our Stakeholder’s vision and empathizing with Roberto’s needs. We started turning our data and learnings into an opportunity for design. That’s why we defined three HMWs based on Roberto’s journey pain points which are:
These pain points are good design opportunities.
Then we ideated features for each HMW and we used the Moscow Method technique to prioritize the ones we wanted to include on the website, to satisfy the business and user needs.
Which were the “must-have”: coach presentation, up to date calendar to book a lesson, clients reviews and links to social media.
And also we create our Minimum Viable Product (MVP):
The goal of the “GM Racket Sports” website is to clarify all the services available and improve the communication between the coach and his students. By knowing in real-time which slots are available with an up-to-date calendar, users will be able to independently book a class based on the schedule.
Additionally, on the home page, a carrousel of reviews from previous students will unveil feedback on the coach teaching style to provide visibility to those who are searching for a new racket sport instructor.
Links to social media will redirect users to more informative landing pages to provide visibility of all the upcoming events such as sports tournaments and live streaming for all those who want to interact with the racquet sports community.
Design Solution
We started to design our solution by creating the site map with the features and content that we considered most important to fulfil both our stakeholder’s and Roberto’s needs and goals.
Then based on the HMWs I mentioned earlier. We defined a happy path to help Roberto to find a good coach and book the lesson that suits better his needs and schedule.
And according to these tasks we created the user flow.
- Wireframes
Based on our user flow we started with the concept sketches or low-fi frames.
To move forward with the right ideas, we did the concept testing within 5 people. Overall the feedbacks were good however we took into consideration a few quotes about the homepage, calendar and sig-in frames that were a bit critical. Here are the 3 quotes that we paid attention to:
After testing our idea and having all the user insights in mind, we jumped into the mid-fi frames and we got these first frames as a result.
We wanted to know how users will complete the main two tasks of finding the right coach and booking a tennis lesson within the mid-fi frames, so we prototyped it on Figma and we complete 5 usability tests that helps us to refine our final solution. Overall the 5 tests went really well and we got useful feedbacks that we used to improve our solution for Roberto:
- We added the automatic login on the homepage, so If our user is already registered, he/she won’t need to register again to book a lesson. Therefore we removed the login page because our primary persona, Roberto, doesn’t need it because we supposed that it’s not the first time he book a class in the GM Sports website.
- We changed the position of the pair set-up feature to keep the user focused on the confirmation that is the primary content on this frame. The layout is more appealing and balanced now.
You might be wondering where is the solution, right? So here is it! Let me introduce you to our team’s solution for Roberto.
Roberto is craving for another tennis lesson when GM Racket Sports come to his mind. He did join a class with David Guillen a while ago and he really liked it, so he would like to book a new lesson with him or try with other coaches.
So he types “GM Rackets Sports” on his browser and here is where his journey throughout the website starts:
Step 1: Roberto lands on the homepage. The first thing he would like to check is the coaches and their skills and experience. So he clicks on the “Meet our coach” section, he could also click on “Meet” which is on the navigation bar to get to the same page.
Step 2: Roberto scrolls down to see the content of the “Meet” page, checks the lesson rate and finally decides to go for the coach David Guillen again. And he realised that he can book a tennis lesson from there so he clicks on “Book your lesson”.
Step 3: He lands on a Search page where he will filter his lesson, date, time and location preferences. So he selects an individual lesson, in December, in the morning and in the Club Tennis Sant Gervasi. Then he clicks on the “Search” button.
Step 4: A calendar with the coach’s availability in the month and time range chosen by Roberto will be displayed. So he has an overview of the lesson options and he chooses (by clicking on it) the date and slot that suits his schedule which is on Friday, 10th of December from 8:30 till 9:30 am.
Step 5: A pop-up window will appear with the lesson details that he had just chosen where he can check if all the details are ok to proceed with the booking confirmation. Additionally, he could also add an extra lesson or equipment if needed in this frame.
Step 6: Finally, after confirming the booking and because he had an account already, he gets the booking confirmation. Roberto is really happy because the process is easier than before and also is more convenient. On the new website, they had even a community section where not only he could find buddies to play and improve his technique, but he could also socialise more and meet new people in his new city.
Next steps
If we continue working on this project in the future, we would like to:
- Convert the mid-fidelity into high fidelity.
- Consult with the business owner for validation.
- Support the Web Developer who will convert our project into reality.
What I have learnt
I’ve really enjoyed this project because it’s actually a real project that our Stakeholder has in mind to implement in the next couple of months. It was nice having the interview with David and Paco, they were really helpful and they gave us very detailed information. That made our process easier and was crucial for developing from scratch a good solution to increase the bookings and simplify the process for his clients.
Definitely, good communication with your Stakeholder is the main key to defining clear steps, empathizing with them and finding a great solution for their business and of course for their clients!
Thank you so much for reading this! I hope you find it useful. 😊
Before you go, don’t forget to leave your feedback or insights so I can keep improving and learning from you too. See you in my next case study!
