Fit and Fab | Content Design Case Study
Why Content Design?
Imagine browsing a visually appealing website. You love the images and layouts but realise something is missing. What is the purpose behind the site? What is the story behind this picture? What is this button saying? How do I move to a new section? Where are the…WORDS?
As A List Apart founder Jeff Zeldman once said, “Content precedes design. Design in the absence of content is not design, it’s decoration.” Copy helps to define the layout and elements in a design, paving the way for the right content to guide the user in navigating your digital products. The content-first design approach will help us to create conversations with our users and enhance their experiences with our products.
About Fit and Fab
Fit and Fab is a fictional fitness company that provide personal training services (in-person and virtual) for individuals looking to stay in shape. We believe in empowering our users in their fitness journey by allowing them to customise their preferences, from choosing their workouts to selecting their trainer and training location.
Research Results
I conducted a user survey with 20 participants (10 male and 10 female), aged 30–40. My findings were:
- 90% of them exercise 3–5 times per week
- 85% have experienced personal training sessions
- 90% are open to the idea of in-person and virtual personal training sessions
- 80% ranked chemistry with personal trainers and price as top factors when considering whether to enrol for personal training sessions
User Interviews
Apart from user surveys, I also conducted in-depth user interviews with 2 male and 2 female participants. From my conversations with them, I discovered their:
Needs:
Experience of Personal Trainers — “It’s important that I find a personal trainer who helps me stay fit. He/she should correct my technique/s and not be overly laid back or strict.”
Pains:
Pricey Training Sessions — “I don’t want to end up paying so much for personal training sessions.”
Desires:
Try before Deciding — “I will like to have at least 1–2 sessions with a personal trainer before I decide whether to go with him/her.”
Product Features
Based on the user research, I came up with a list of product features and categorised them into 4 categories:
- Must-Have
- Nice to have
- Surprising and delightful
- Can come later
For this article, I will be focusing on the Must-Have features which I have designed wireframes around:
- Homepage
- Sign Up | Log In
- Product Page | Personal Training
- Signup Form
- Checkout
- Success
User Journey
Based on the user research and product features, I mapped out the user journey .
Homepage
For Newbies
Based on user research, while users are keen on personal training sessions, they prefer to try before deciding. With that in mind, I made the Claim Your Free Trial CTA prominent.
The copy for Fit and Fab’s vision is clear and inspiring; it is written in a way to assure users that they’ll see results after their workouts.
For Individuals (without an account) or Regulars
Users falling under either of these two categories have experienced the free trial sessions.
Depending on which stage they are at, they can choose to Log In or Register. Both options are located in the top right corner of the home page.
Sign Up | Log In
For this task flow, we have two groups of users — a) users who have experienced the trial sessions but might not have signed up yet and b) users who have an existing account. For the former group, as they are relatively new, we are trying to encourage them to sign up here.
Copy is clear and simple, and has actionable words.
CTAs are Sign Up and Log In based on best practice research.
Product Page | Personal Training
Under the consideration & evaluation stage, the user will require an overview of the personal training session before deciding.
1 CTA has been included to get the user curious about how the personal training programme works:
Learn More — encourage them to find out more about the programme
Upon clicking the Learn More button, they will get an overview of what they can expect from the personal training programme.
To spur them to take action, the CTA has been included:
Book Now — opening month promo is used to drive conversion
Signup Form
At this point, the customer is probably keen to sign up for the personal training session/s. Understanding the customer’s training preferences will be key to ensuring we provide the best personalised experience for them.
I provided a list of questions and options in the form for the customer. I also included a progress tracker at the bottom right corner of the page to let the user know how far along they were in completing the form.
Checkout
As the checkout is the final step of the purchase process, it’s good to remind the user of their package details before they pay.
Success
Once the user has paid, they’ll receive a success message on starting their personal training. Fit and Fab will also give them a heads up that their personal trainer will be in touch with them.
Their order info will be sent to them via email.
The Fit and Fab task flow is complete!
