Fictiv

Shape magazine was contemplating the idea of launching an online virtual trainer software for its wide female audience. We helped them create a highly usable, friendly, and simple web application that enables women to set their diet and exercise goals, schedule workouts and meals, log their activities, and get statistics about their caloric flow.

In the beginning…

We wanted to understand what women want. Unlike Mel Gibson, we didn’t have the psychic ability to read their minds. The blow drier in the bath tub trick was out of the question. Shape magazine knew a lot about their audience, and we had lots of user research information, but wanted a bit more. Instead of going out to ask more women about how they log exercise and meals, and later get their feedback about the designs, we asked a friend to be part of our 5-day deep dive session. She fit the profile perfectly: she exercised regularly, at healthy food, and kept track of her activities.

Asking the right questions

As we always like to start our deep dive process, we asked lots of questions that would help us understand the problem and set the direction for the solution we’re creating. Here are some of them:

• Why should people log their exercise and meals? Why most people don’t?
• What do the best personal trainers and nutrition advisors have in common? How would their clients describe them?
• How do women currently log their activities?
  • What is boring or complicated about tracking one’s exercise and eating habits?
  • What are other activities that our audience considers fun and interesting?
• How can we provide them with instant gratification, before asking them to work with the application?
• What are the frequent tasks that users would do repeatedly? How can we make them simpler and faster?
• How frequently do they need to log in and work with the app?
• Can they take their meals and exercise on the go? Can they log their activities offline on paper and transfer it later?
• What should happen when they miss a workout or a meal? How do we inspire them to stay on track?

Exploring stories

Our next step was to tell, and listen to, stories about how our users exercise and eat. From each story, we extracted tasks and prioritized them based on their frequency and significance to the process. We tried to find the underlying pattern of each story; instead of just learning about what users do, we wanted to also understand why they did it. We wanted to know what motivates them to eat healthy, to exercise regularly, and what would motivate them to return frequently to the application.

Distilling the requirements

From these stories, tasks, and reasons, we started building a list of high level requirements for the app. We outlined the functional, aesthetic, emotional, and content requirements. We brainstormed a lot around the language that the application should use, and the character it needs to have to convey a strong, friendly and motivational trainer.

Brainstorming ideas

We then started brainstorming ideas about what should be included, without worrying about how it will be designed or implemented. Having a member of the audience in the brainstorming session was extremely useful, because we were getting input and ideas we would have never thought about on our own.

We iterated on the ideas and selected the most viable and desirable ones for the first release. We also created a backlog of ideas to revisit for the upcoming versions of the product.

Exploring design directions

Next, we created high level flow diagrams about how we’d imagine users accomplishing each task using the ideas we collected; how they would create a workout routine, how to enter their favorite recipes, how they would re-schedule a meal, and how they would see progress toward their goals.

For each goal, we brainstormed several task flows, then refined them by combining the best of each. These flow diagrams helped us identify the building blocks of the application, and we started exploring various layout directions and identifying the pros and cons of each.

Because we established usability heuristics early on, it was easier to pick the winning designs. For instance, we knew that we wanted everything to fit on a single page, so we preferred wider layouts than taller one, and we ended with vertical tabs rather than horizontal ones.

After identifying the main building blocks of the application, and exploring several layout for each, we simulated task flows through each of them. We then picked the ones with the highest overall score for all tasks.

Iterating and refining

With dozens of screenshots of ideas, tasks, flow diagrams, and design sketches, we wrapped up the deep dive session. Over the following weeks, we worked with the design and development team to refine the sketches into wireframes, and later into design comps. We also met frequently with the program management team to brainstorm design and interaction detail, and provide feedback on functional specifications.

We are proud of the results we’ve accomplished together on this project. Client and users loved the application, and we’re looking forward to designing and launching the next version.