UX/UI Designer
Soar Coaching and Consulting
A full redesign for a business coach
Platform: Website
Role: UX Research, UX Design, UI Design
Tools: Miro, Milanote, G-Suite, Figma, Usability Hub
Our task
In this case, two teammates and I were tasked with completely redesigning a responsive website for a client, Jacqueline, who runs a business coaching and consultancy company called Soar. According to the client, our main goal was to attract new business and increase the number of consultations she was booking through the site. We pursued this redesign as an opportunity to help the users, in this case, potential clients, gather information about Jacqueline’s services so that they would feel ready to book an appointment.
Finding fault with the current website
In order to find out why the website was not attracting clients, we needed to conduct some exploratory research. We interviewed one current client of Jacqueline’s, as well as four potential clients. We then made an affinity map based on the findings. Here’s what they had to say:
Who are our users?
Jen puts a face to our users. She’s a businesswoman who keeps getting passed up for a promotion at work and has come to the conclusion that she needs help to reach her full potential. Her main goals are to find a leadership coach she can connect with, who has professional work experience, and she wants to see that the coach has worked with successful people in the past. She’s frustrated because all coaches seem to be the same.
Analyzing the competition
It was time to find out who the competition is in the leadership/coaching space so that we could gain a competitive edge. Our main takeaways from conducting our visual competitive analysis:
Minimal use of color allows for the content to stand out
Bright colors can feel dated
A mix of san serif and serif fonts give an approachable and polished look and feel
White space increases readability and adds a sense of elegance to a page
Visual Direction
Each team member created a mood board and a style tile. These were the top two picks by users after doing preference testing. After getting client feedback, we decided to go with the blue one. The client felt it best represented her personality, and 2/3 participants chose it as the favorite. Blue is often described as peaceful, tranquil, and secure. It is seen as a sign of stability and reliability. Our typography choice was a mix of a traditional serif and a modern sans serif for a sense of elegance while still remaining approachable.
Exploring screens for the redesign
Due to working remotely, we went straight into low fidelity designs instead of sketching. We did this so we could easily collaborate and converge our ideas for screens.
I made these low fidelity wireframes to establish information architecture and map out the shell of the interface. Since this was a redesign, we already knew what screens needed to be made and what our overall user flow was going to look like. My initial thoughts were to add more white space, add images to break up the text and create visual hierarchy that the site was missing.
What features do we need?
After converging our low fidelity ideas for screens- we started exploring mockups. I worked on the home screen and the packages screen. The first round of mockups included several changes from the initial site including:
Packages Screen
• “What Can Soar Do For You” Section was created, users said they wanted this in our first interviews
​
• Displayed packages horizontally to save space and add interest
​
• Each package now has a “Book Now” button to make contacting Jacqueline as easy as possible
Home Screen
• Geometric shapes to guide the user's eye through content and keep them reading, add a modern edge and add personality
​
• More images
​
• More white space
​
• Client Testimonials on the home screen to make them more accessible
First-round prototype
With those features added, I created our first round prototype so we could conduct formative usability testing.
Testing our first prototype with users
We tested our first round prototype with 5 users. 5/5 liked the new website better than the old one, siting that the look and feel was much more professional, and the content was easier to find. However, we did get some common feedback from our users:
Iterations
After getting feedback from users, we iterated on our design by implementing the three high priority changes.
1. To give the users more opportunity to contact Jacqueline, we added a CTA to every coaching package
2. We moved the “What Soar Can Do For You” section to the home screen to show the value proposition upfront
3. We added a section detailing Jacqueline’s approach to coaching to the services screen to give more context and information to our users
Final prototype
Here’s our final prototype with the changes implemented and added micro interactions to enrich the website and provide visual feedback to the users. In final usability testing, 5/5 users got through the flow easily, preferred the new look and feel, and reported that the information on Jacqueline’s site was now easily accessible
Before and after
Home screen before
Home screen after
Packages/services screen before
Packages/services screen after
Style guide
I made a style guide to help ensure a continuous brand experience. No matter how, when, or where a customer experiences Soar, they are experiencing the same underlying traits. It's this consistency across every touch-point that helps build a brand and brand loyalty. It will also help our client or developer to build the website later.
My thoughts
I was both excited and nervous about this project — excited because I was doing something I love and nervous because sometimes working with a client when you’re a small team is nervewracking. Despite my nervousness, I knew this was the perfect opportunity for me to hone my design skills and practice communicating with a client.
I had a blast doing this project and I hope you enjoyed reading about it too. Thank you so much for reading!