Product Design for a Content Management System

(This case study is a part of my upcoming UX portfolio. Any comments and constructive criticism are more than welcome!)

Over the years, I had the chance to collaborate with a number of personal trainers (PTs), who hired my design agency to build a website for their business. Although the projects varied in complexity and breadth, there was an interesting commonality between them.

Most of the trainers who came to us tried to build a website by themselves (or considered it), but were either dissatisfied with the results, or found the process too cumbersome to attempt.

This is what got me started thinking about Trainerwall — a simple content management system (CMS), carefully crafted to answer the specific needs and goals of personal trainers, while fitting well within their level of website-building expertise.

Developing Trainerwall was an incredible learning experience for me. While my process certainly wasn’t perfect, it allowed me to try my hands at entrepreneurship, hone my skills and ultimately emerge as a better designer.

I want to share my journey and what I learned along the way.

Table of Contents:

  1. Project Goals
  2. Research
  3. Ideation
  4. Design
  5. Outcome

PROJECT GOALS

At the most basic level, every CMS or a website builder is composed of two interconnected parts: (1) the actual system for building the website, and (2) the website that is created as the result.

With that in mind, I set the following goals for Trainerwall:

  • Create a prototype for a PT-friendly CMS.
  • Create a content and visual framework for a website which will be created through the CMS.
  • Create Trainerwall as a minimum viable product (MVP), relying on Dan Olsen’s amazing book as a guide.
  • Use the project as a playing ground for learning and expanding my design skills.

RESEARCH

Trainerwall targeted two distinct populations — personal trainers, and their prospective clients.

For each of these populations I performed:

  • user research — to identify my target audience and its characteristics,
  • competitive analysis — to determine which of their needs were underserved and could be targeted by my MVP.

A. User Research

#1. Research as related to personal trainers

I conducted qualitative ethnographic research. My goal was to become thoroughly familiar with PT culture, so I could understand their behavior and mental models.

To accomplish this, I immersed myself in studying various resources (books, websites, podcasts, instructional videos, etc.) covering topics like PT education and certification process, the differences between specializations, and the everyday challenges trainers faced in their work. I also spent a great deal of time analyzing interactions between novice and expert trainers on various Q&A forums. This gave me excellent insight into the most common issues PTs faced and the solutions they used to resolve them.

Results

I learned early on that despite their great diversity, all PTs have the same primary goal — to acquire new clients.

In fact, a trainer’s continued success depends in large on their ability to develop and use efficient methods of replenishing their client base.

For most trainers, their business website is an integral part of that process.

My research revealed, however, that there were significant differences in how and why trainers used a website for their business.

I identified the following variables as particularly important in segmenting the PT population:

  • Website significance — how important is website for driving business, in relation to other methods used?
  • Motivation — what is the purpose of the website?
  • Website complexity — what features need to be included on the website?
  • Expected outcome / gain — what are the conversion goals?

Through careful analysis, I identified three main types of PT websites which correlated to the specific co-distributions of these variables.

Three main types of personal training business websites

Each of these types of website caters to a different segment of PTs. Interestingly, these segments correspond to the stages of the life cycle of a PT career.

Segmentation of personal trainers

Tying these findings with the goals I set for my project — creating MVP for a PT-friendly CMS — I concluded that:

(1) the client-centric website fit the best with the product I wanted to create;

therefore:

(2) my target audience represent the trainers who own their PT business as the sole / primary trainer and use client-centric website to attract clients.

Here’s why:

  • For these trainers a website is a crucial part of the strategy to attract and sign new clients.
  • They are likely to require a relatively small number of features for their website.
  • Because of the budget constraints they are highly motivated to build a website by themselves, especially in the initial stages of starting their business.
Comparison of PT categories, based on their website usage trends

The trainers I worked with through my design agency belonged to this group.

I collated my research findings into a primary PT persona. I used this persona to guide my design decisions during the rest of the process, particularly when solving problems relating the CMS part of the project. I planned to initially support this persona with the MVP, and then expand the scope of the product to answer the needs of personas belonging to other two PT groups.

Persona for personal trainer population

#2. Research as related to (Potential) Clients

To find the characteristics of the people most likely to hire James, I interviewed friends who worked with a PT before (or were considering it), researched various fitness and dieting forums, and cross-referenced the PT educational materials for topics relating to understanding and working with clients.

Results
I collated the findings into 3 personas, defined around the following variables:

  • Goals — what do they hope to achieve by hiring a PT?
  • Accountability — do they depend on a PT for motivation?
  • Values — do they value PT’s personality over expertise, or vice versa?
Personas for client population

B. Competitive Analysis

Through my research of various PT Q&A forums, I came up with a detailed list of peer recommended services for creating and maintaining PT business websites.

I then performed a comprehensive analysis of these services, which included some of the market’s biggest players, like WordPress, Wix and Squarespace.

Similarly, I spent a great deal of time visiting and analyzing dozens of PT websites, in order to get a good sense of what solutions trainers were using to attract potential clients.

I analyzed these resources in relation to the needs and goals of the defined personas and identified four underserved needs I could target with my MVP:

  1. Increase my website conversion. — James (PT)
  2. I need to know what to include on my website. — James (PT)
  3. I want to build my website on my own, without hassle. — James (PT)
  4. I want to know if this trainer is right for me .— Anna, Alex & Rajit (potential clients).

IDEATION

Now that I defined personas that represented my target audiences for PTs and their clients, and identified their underserved needs, I needed to figure out how my MVP was going to satisfy these needs in a way that would set my product apart.

1. Conversion through compelling story telling

At this point, it became obvious to me that the needs of personal trainers and their prospective clients were inherently connected.

James’s need to increase conversion on his site, and Anna’s need, for example, to find the right trainer to improve her running, are two sides of the same coin:

  • Since James is using a client-centric website, his conversion goals are to have his visitors contact him (phone, email, contact form, stop by the studio, etc.) or leave their email.
  • For Anna, that means determining if James fits her criteria of an acceptable trainer. She’s relying solely on the website content to make this determination. Depending on the outcome, she may decide to get in touch with James, or she may just close the tab and look elsewhere.

My research showed that trainers like James experience bad conversion rates because of their failure to provide compelling answers to these questions.

While Alex or Rajit (my other two client personas) would look for different answers, their questions are likely to be the same as Anna’s.

I’ve seen many trainers being so focused on using all the right marketing tools to boost conversion rates, that they neglected the very core of what drives those conversions — showing who they are, and why they are the best trainer for their visitors.

In order to inspire trust in his visitors and lead to conversion, I proposed to organize James’s website into sections, each aiming to provide a good answer to one or more of the questions regarding his personality, expertise, work history and track record.

It’s not enough that James simply plops data from a spreadsheet onto his website — the information has to be presented in a compelling manner. The best way to do this is, of course, through story telling.

“Marketing is no longer about the stuff you make, but about the stories you tell.” — Seth Godin

Therefore, I concluded that my content and visual framework for the visitor-facing website (which would be created through the CMS) would feature:

  • methodical, story driven structure — using strategically placed videos, images and text, to —
  • enable PTs like James to tell a story about who they are, what they do, why they do it, and how they are the right person to help their client achieve their fitness goals.

2. Removing guesswork and creating an appropriate website-building experience

With the framework thus defined, it was a lot easier for me think about how to meet the two remaining underserved needs of my James persona:

  • knowing what to include on his business website (in order to get more clients)
  • efficiently build a website on his own.
The uncertainty about the ideal / optimal / good website content (which can get them more clients) is experienced by many new and seasoned PT alike. None of the automated solutions (i.e. Wix, Squarespace) provided an adequate answer.

Since I already determined the content strategy for James’s visitor-facing website, the issue became how to make sure that James is able to actually build a website as such.

I proposed to organize the website building process into predefined modules, each corresponding to a section of the visitor-facing website.

Each module would be composed of predefined content elements that would be filled out by James. Such modular system would provide systematic, focused and easy way to build a website, drastically minimizing the amount of guesswork.

PTs are not designers nor developers, and they are always pressed for time. I found the CMS solutions available at the time to be too complex for their needs. They offer too many customization options, layout editing process which is designer-oriented, and an abundance of features which trainers would never use.

In order to create a website-building experience which is appropriate for PTs, I proposed that my CMS would feature the following:

  • Guided building / editing process — via predefined modules.
  • Simple, “no-fluff, no-fuss” structure — remove all features not crucial to building, editing and managing the website.
  • “Ugly-proof” customization — Flexible, but limited customization option to enable PTs to personalize the website and its content, without worrying about breaking the layout.

DESIGN

The design phase took the longest to “complete”. I started by formulating the design goals, information architecture and user flows for the visitor-facing website and the CMS. I then used an iterative process of designing assets of varying fidelity, prototyping and guerrilla user testing to come up with a set of finalized designs for the my MVP.

1. Visitor-facing website

Design direction

I defined the following design goals, based on the conclusions I made during the ideation phase, and taking into account the defined personas:

  • Organized as a one-page website — offers clear, linear progression of the content (perfect for story telling), optimized for conversion.
  • Divided into discreet content sections — easy to scan through, separates the story into digestible chunks, accessible via main menu, SEO friendly.
  • Modern, clean, responsive design — with features like fullscreen intro section with optional video background, CSS transitions, and JavaScript interactivity.
  • Clear conversion channels — Links to social media, share buttons and prominent contact information help with conversion, alongside main CTA and contact form.
  • Expandable — Seamless addition of features like blog, products, etc.

Information architecture, user flow and wireframes

Information architecture for visitor-facing website

Mockups

The following is a selection of high-fidelity mockups for the visitor-facing website.

“Intro” section
“Intro” section + drawer menu | Full-screen menu
A couple of layout options for “About Me” section
A couple of layout options for “Services” section
A couple of layout options for “Testimonials” section
A couple of layout options for “Contact Me” section
“Contact Me” section + email capture + footer

Prototypes

I used Invision and Marvel throughout the design phase to visualize and explore different design approaches. Here are two prototypes featuring the finalized designs for the visitor-facing website.

Click here to see Invision prototype for desktop
Click the play button to activate the Marvel prototype for mobile

CMS

Design Direction

I defined the following design goals, based on the conclusions I made during the ideation phase, and taking into account the defined personas:

  • Includes core features from the main competitors — such as domain routing, profile management, live preview, etc.
  • Guided website building via modules — customizable, pre-made, pre-styled content blocks.
  • Simple, “no-fluff” approach — Immediate access to the core tasks, such as edit website, blog, settings and profile.
  • Flexible customization options — Customization options centralized on one screen. User can customize each module — choose different layout options, different types of backgrounds (color, image, video), add/hide/remove content elements, add/hide/remove modules).
  • “Ugly-proof” — Every content element of every module is pre-styled and its appearance can’t be modified by the user. Properties like margins, padding, etc. are unavailable to edit, and layout options for each module are predefined. This ensures there are no undesirable or unintended breaks in the layout, and provides a consistent look for the website.

Information architecture, user flow and wireframes

Information architecture for the CMS
User flow and wireframes for the CMS

Mockups

The following is a selection of high-fidelity mockups for the CMS.

Mockup iterations for “Edit Website” Screen
“Edit Website” screen finalized design
Menus for module selection and module options
Live preview — tablet view
Dashboard index page
Design Settings page in Settings

Prototypes

As with the visitor-facing website, I used Invision to create prototypes for the CMS. These were truly helpful in defining and improving the interactivity of my designs. Due to the finicky nature of Invision when it comes to desktop designs and fixed designs elements, I decided to record the prototype interactions for a smoother presentation.

Click play button to see video showcasing the process of editing the website through Trainerwall CMS

OUTCOME

After testing the design prototypes with friends and c0-workers and making final adjustments, I came to a point where my expertise was no longer sufficient to drive the project forward.

I needed the help of an experienced developer with a high level of proficiency — someone capable of building a custom CMS platform, with all the back end considerations it entails, from database design and management, to security and performance.

I initially planned to entrust such a task to Mary, the lead developer in our agency, but at the time I finalized design she no longer had the availability to take on the project.

Since none of the freelance developers we normally worked with had experience with such complex products, and budget being a concern, I decided to put the project on hold for now.

Learning Experience

Still, for me, Trainerwall was always about learning and improving my skills, and in this respect the project was tremendously successful.

Here are some of my most valuable take-aways:

  • I improved and refined my overall design process — Trainerwall had been a complex project — consisting of two interdependent products, targeting two distinct user audiences. Working on it helped me to become better at user research, developing UX strategy, rapid prototyping and visual design.
  • I took on different roles in the process —Through Trainerwall I had a chance to put on many different hats, including some I don’t typically get to wear as a designer — like that of a stakeholder coming up with the initial business goals for the project, or a marketing manager, thinking of the best ways to market the product.
  • I gained experience in implementing the Lean product cycle — While I had been using design thinking principles in my work long before Trainerwall, the project enabled me to refine my process and get hands-on experience with Lean methodology.

Room for improvement

I’m always learning and trying to improve my craft. When I look back at the work I did with Trainerwall, I can see that my process could have been better, particularly in the areas of user testing and usability testing.

Although I validated Trainerwall’s core concepts through my past work with personal trainers, and performed guerrilla usability testing with friends and co-workers throughout the design cycle, I can see ample room for improvement.

Here’s what I would do differently, if I started working on this project today:

  • Get additional validation of my initial ideas for Trainerwall, either through techniques such as a “smoke test” landing page, or by interviewing members of my prospective audience.
  • Use card sorting to determine the optimal organization of information, particularly for the CMS design.
  • Make sure to include representative members of my target audiences in my usability testing.
  • Broaden my usability testing methods, to include in-person paper prototype testing for early design concepts, as well as remote testing with low / mid / high fidelity prototypes using UserTesting or Validately, and possibly LookBack or CanvasFlip for mobile-view prototypes.

Read my other UX case studies:

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.