Case Study 02
A project by UX/UI designer Luci Cantey
The Business Cardiologist/Nicole Odom Coaching
Nicole Odom is a recent executive coaching certificate grad from Queens University of Charlotte, NC. Before she began her educational journey to becoming a business coach, Nicole was a franchise owner. Dogtopia Doggie Daycare seemed the perfect venture for this dog lover who desired to be her own boss.
During the decade following the franchise purchase, Nicole realized that owning a successful business involved so much more than just a passion for the product or service offering. All of the finance and marketing was an overwhelming storm written in a foreign language. In researching how to understand and save her business, Nicole found that she actually loved the process of the business clean up/organization and embarked on a career change where she could combine her new and old skills to makeover other “sloppy entrepreneurs” just like her.
Roles
UX Research
UX/UI Design
Prototype
User testing
Tools
Paper
Sharpie
Figma Adobe Illustrator
Squarespace
The Solution
What’s the problem?
Problem
Over the last year, Nicole has been working to develop a client list, but has been running into issues attracting clients in a very crowded field with a low barrier to entry.
Audience
The folks Nicole refers to lovingly as “sloppy entrepreneurs”, people who started a business because they love what they do, but have far less interest or knowledge in all the foundations of business that can make or break their success. They come from a wide variety of demographics and backgrounds.
Goal
I wanted to update Nicole’s website to present her immediately as a trusted friend to the frustrated entrepreneur and let them know her solutions are based on a deep, personal understanding of where they are.
Discovery and Research
First things first, what wasn't working about Nicole’s current site?
A survey of 5 local small business owners was conducted to see what appealed to them about the site and what caused them to click back to the Google search results.
When given the scenario that they were searching for coaching services, respondents were shown the site and instructed to just do what they were naturally compelled to do given the scenario, while talking about the thoughts going through their head as they acted.
Positives
Clean look of the site
Negative
Described as “too boilerplate”, looks like a template
Not speaking to users, impersonal
Overuse of generic stock photos (also low res)
Navigation menu lost in noise of photo
CTA without any detail felt pushy
They didn’t feel they received anything informative from the landing page
Tagline fits the cardiologist theme but offers very little in the way of “how”
Competitive Analysis
An analysis of competitive coaching sites shows a trend- many have a feeling of being large and/or impersonal. Most are effective in immediately showing users what they offer, but none have the advantage Nicole has, of having been in the same situation the user now faces.
Gaining user trust with that aspect is a perfect opportunity to make Nicole stand out from the old proverbial crowd. Part of the end goal is also to lightly embrace the Business Cardiologist theme- acknowledge it without overdoing it.
The two sites below were described as “impersonal” and “corporate”. My respondents (who own mostly creative businesses) felt like these organizations were targeting executives, not them.
Adding The Specifics
A SWOT analysis defines the characteristics I need to take advantage of; Nicole’s strengths and opportunities to make her shine in a crowded market, as well as exposing her weaknesses and potential outside threats I need to address with my design.
I need a persona to design for, someone who embodies the key characteristics for potential users of Nicole's coaching. Jenn, a chef who owns a food truck, loves the menu creation and customer facing side of her job, but when it comes to bookkeeping and inventory, her brain scrambles. She needs help easing into that side of her business so she can thrive.
I wanted to conjure the feelings of the user and keep those close to me throughout the design process.
Journey Mapping
Once Jenn the user was fully realized, detailed information concerning her needs, thoughts and actions determines the language and structure of the site. When folks are looking for Nicole's services, they're probably already in an overwhelmed, frustrated state. Realizing their state of mind upon approach drove my decision to prioritize earning their trust and making them feel personally heard. Speak directly to the user, show no judgement. Instead, say "I know exactly what's running through your mind".
Info Architecture
The user needs determine how each page’s content is mapped, as well as how pages map to one another. Making the journey to the information needs to be easy to comprehend. The vertical scroll landing page gives users brief information on all aspects of Nicole and her services, as well as input from a client and a teaser to some of her blog entries. The user doesn't even need to go anywhere else, but clear links can take them directly to more information should they desire it.
One of my main struggles involved what statement to make at the top of the page. Should I emphasize that Nicole too had been a small business owner? Or should I draw the user in by addressing the thoughts we know they're having while they search for a coach?
Making it real(ish)
Sketching the layout first let me focus on the importance of placement and hierarchy, without getting distracted by visual design decisions or minute alignment details. I was able to quickly imagine the different options for the important introduction at the top of the page.
Putting the project into wireframes shows flaws, what isn't working so well in digital. I ended up completely changing the look of the middle two-thirds of my main page once I got to see how it really looked in the digital platform.
Sketching the layout first let me focus on the importance of placement and hierarchy, without getting distracted by visual design decisions or minute alignment details. I was able to quickly imagine the different options for the important introduction at the top of the page.
Nicole’s logo had previously been designed by a graphic artist, we used the established logo to set up a minimal color scheme and select site typefaces.
Putting the project into wireframes shows flaws, what isn't working so well in digital. I ended up completely changing the look of the middle two-thirds of my main page once I got to see how it really looked in the digital platform.
User feedback, the true test
I was able to bring back four of the five entrepreneurs from the initial testing of Nicole's current site, and added a user looking for career coaching. I wanted to test the emotional response of users and how they moved around the site to find the information they needed.
The top of the home page features an inviting photo of Nicole and immediately gets to the heart of the reason why the user landed here, and in relatable terms.
The good news?
Users found Nicole warm and inviting. They trusted her, understood that she too had been a victim of the same confusions that now plague them. Both are very important, but as an initial response they prioritized knowing who she was over what her service offerings are. They wanted to schedule a free consult and could find the calendar and contact form to do so. They were able to find out what they wanted to know regarding her service offerings and responded well to the possibility of a short quiz that would help them determine the best coaching option.
Nicole’s About page further shows her level of experience and skill in a manner both professional and casually welcoming.
To keep my ego in check… learning opportunities
A good intention that users let me know needed to be tempered: my initial choice to ensure the typeface was large enough to be accessible to visually impaired users went perhaps a little too far. Users noted that the above the fold fonts seemed too large and imposing. I realized I could reduce the size quite a bit and still maintain easy readability and improve the cohesion of the elements on the screen. This also allowed for more information above the fold line.
Another area where I learned you can go too far: I wanted to make sure the Call to Action buttons were handy, so users wouldn’t have to hesitate once they had decided to reach out, but users felt like they were being called to action too forcefully. One respondent placed it bluntly “I feel like I’m being yelled at!” The “pushy salesperson" nature of all the big blue CTA buttons counteracted the calm, approachable demeanor Nicole initially presents on the home page. My desire to make sure users had access to the CTA buttons during the vertical scroll had turned overwhelming, exactly what I didn’t want!
After adjustments to button frequency and incorporating several clickable areas into the copy text, next users commented on a calmer scrolling experience. I just needed to give the user more credit that they’d remember where to go when they were ready to move ahead, they’d recall where links were when they wanted more info on a particular topic.
In the initial prototype on the left, big blue CTA buttons dominated a page where the large type proved too difficult for user’s eye to absorb at once. The continuous stark white background was not effective for denoting section changes and caused eye fatigue. In the new iteration on the right, action links were reduced and some incorporated into the text for a less pushy appearance. A comfortable green background helped make different sections of information more distinct.
Users also pinpointed other areas of visual clutter and confusion, such eye fatigue issues with the continuous, stark white background (see above side-by-side of two prototype versions) and the blog presentation.
My effort to add more visual interest to a sterile blog page (with a stock photo banner and only “BLOG” as the title), overshot the goal and became too dense with no clear direction as to where the user should begin reading. A reassessment of layout and element hierarchy led to the second iteration, giving users access to links to purchase the books Nicole mentions in this specific post.
I think sometimes we feel like we need to retain some of the client chosen items when redesigning, as I did with the nature theme banner photo Nicole had been using. In reality, the photo did not relate to her theme or add anything to the blog presentation realizing that put us in the mindset to eliminate it.
The messy before
It seemed top me that the two blocks of text were distinct and I assumed the reader would start reading left to right. Well, we know what assumptions do- users indicated confusion about whether the two sections were related and were unsure where to start,
…and the user friendly after
In the adjusted version, the side bar is still used to break up the page, but is clearly supplemental imagery that corresponds with the topic of the blog post. This is a great place to pop in elements to support The Business Cardiologist theme.
Conclusion
What went well?
Immediate empathy hook - leads reader to want to know more because she expresses that she has biz coach training, leads them to get the specifics after explaining how she decided on biz coaching
Engaging elements - photos and copy
Clear service offerings - listed plainly at the top of page and not far down on the scroll. As mentioned, the goal is to keep users engaged so they stay on the page to see all of the info they need to be convinced to sign up for a consultation.
User response was positive!
What did I learn?
What users need to feel connected - they need to be spoken to not at. They need trust and to feel personally approached by the site.
What information is most important to them - they wanted to know Nicole’s background before they cared to know what she offered.
Even with a feature where a lot of copy is expected, i.e. a blog, hierarchy and layout must ensure blocks of text are not competing and users are easily led to the start of the story through to the end.
It’s possible to inundate users with CTAs and they should be edited with care.
Consumers are concerned about price and it can possibly make or break if they continue considering a product or service.
Additional highlights from the prototype, plus you can view the entire thing right here.
Thank you for reading.
I added a page that went into the details of the 1-on-1 coaching option, which wasn’t clear as an option to users of the initial site.
This page is still in progress. There’s a lot of info Nicole wants users to have concerning her 90 day MBA program and we’re working to pare it down and arrange in a way that doesn’t overwhelm.
I wanted to make sure users could easily navigate the form and make them aware that there was an option to schedule a consultation directly on Nicole’s calendar.
In addition to a contact page, I added a page where users can schedule directly with Nicole’s calendar, making sure to point out that they can still email a question if they prefer.
I received positive feedback around the idea of a short quiz to assist users in determining which learning style would benefit them most. Nicole and I are currently developing and will soon be testing a prototype of the quiz.
Users let me know that verification from other users was a great way to earn their trust. I’m working on a testimonials page that features photos of Nicole’s clients and their businesses to reinforce the idea that a user/potential client can rely on her skills to improve their situation.