A Fitness Forum

This is a three week project, and after the first week of project, we experienced our first “pitfall”, one teammate will leave and a new one will join in, to prepare us for the unexpected situations in real work place.

Following is the result of an design practice project, aiming at redesigning forums. Our focus of project is redesigning fitness forums. We view the soul of forum as a virtual community, then we transform their format and extend their content with the pivot remains the same.

Teammates

Mingyuan Zhang

Brant Hughes

Cheryl Wellum

Nava Teja Tummalapalli

Ziyi Yang

My Role

Research

Wireframe and Iteration

High-fidelity Prototype

(For this is a project aimed at practicing our skills, everyone is involved in nearly every stage.)

Tools

Sketch – prototype

Photoshop – refine scanned paper prototype

Methods

Research

We researched current fitness forums, and found they were mostly in the form of “instruction from web manager + ordinary forum”. The instruction part is usually put it in the most conspicuous position such as homepage. The second problem we found is, in most cases, the dialogues under one post are not of one single thread but multiple, but fitness forum’s  plain linear text-based visual design failed to match this.

To search solution for the first issue, we examined how current health and fitness clubs works. We conducted  interviewed people about why they kept going to the gym. We got two insights as I1 & I2 from the interviews. To solve the second problem, we examined data visualization methods by went to d3.js website.

To search solution for the first issue, we examined how current health and fitness clubs works. We conducted  interviewed people about why they kept going to the gym. We got two insights as I1 & I2 from the interviews. To solve the second problem, we examined data visualization methods by went to d3.js website.

Sketch and Brainstorming

The first thing we were trying to solve was its linear text-based design (Pain point 2). We brainstormed on the whiteboard and started sketching. We found in the process of solving pain point 2, we started thinking about the user goal, and then, we related pain point 1 with pain point 2.

ForumPic3
ForumPic2
ForumPic1

Forum

Change from purely chronically sorted linear text-based dialogues into multithreading, keyword management, user rating system.

Instruction

Change instruction part into a hybrid combining system suggested goal and user communication panel.

Community

Change from pure virtual community to “virtual + real community”.

Pitfall

After the first week, Cheryl was forced to leave our team and Brant came. We were so unprepared and angry, because Cheryl was the one leading visual design stuffs, which is just the thing we are about to do next. Then, we adjust our emotions and progress, welcomed Brant and his new thoughts.

ForumPitfall

Move On

Brant’s coming brought us new ideas of visualization of forum dialogues.

His original team was dealing with LGBT forums, and they find word cloud would be an ideal format. Combining word cloud with our keyword and user rating system, we finalized our “forum” part in sketching phase.

First Round Iteration

Click image above to magnify it.
Click image above to magnify it.

Second Round Iteration

We conducted two user testing using the interactive prototype installed on our phone, and identified four problems. Here is the changes:

1. Changed the circles and connections between them to a design with tags in a tag cloud. Default screen shows the trending topics and the tag cloud changes according to the search string

2. Changed the layout of the top bar to reduce the confusion of the plus icon.

3. Changed running icon against each person in the team on the team page to just a circle with different states depending on who is online and offline.

4. We improvised to search to give suggestions with the keywords in the search string.

Third Round Iteration

After Team Presentation, we got several critic on our forum design for:

  • There are too many words in one single page, and it is even hard to touch with one finger unless you can zoom in.
  • “Richer people become richer” – in other words popular tags become more popular because of the size in which they are represented.

We did thirteen version of sketches figure out the “best” one.

To solve these problem, we decided to adopt simpler design element and add filter to it so that users could choose sorting according to different dimensions.

After inviting peer designers to critic these thirteen things, we finally got our final design.

Wireframe

Based on the result of third round iteration, we made our wireframe separately. I choose green as my main color tone as green represents harmony, balance and a healthy lifestyle, which I think is exactly something being pursued by fitness enthusiasts.

Here is mine wireframe:

Reflection

1. Choosing the topic:

Firstly, we decided to focus on a specific type of forum to see what we should do. We did several researches on different types of forums, their features and their layout, things like that. It took us nearly half a week to agree on the forum we should work on.

In the IDP course, Marty suggests that we should choosing our focus by the accessibility of target users, who are also the subjects of interview. This idea is really great! If we could heard it earlier, we would get rid of our endless discussion on what we should focus on and do so many useless research on all kinds of forums. Sadly, when we heard it, we have agreed on our target group. Maybe next time when we were given such a vague topic to work on, we could adopt such method.

2. About the Pitfall:

As my last reflection has mentioned, our team struggled to agree on our target group. Later, we tried hard to find a solution to our project. Then, suddenly, change happened. Chyle was changed to another group. Before, she is our sketcher, has done a lot of research on design things, and actually started sketching. Our work was divided, and everyone has committed to his own work. But now, we need to make change of the workload.

Our new member brought new ideas, we invest a lot of time discussing it, feeling skeptical on our focus again. For the sake of limited time, we decided to focus on our original focus, which is “motivation of the fitness forum user”. But in our discussion, we keep focusing on the new topic Brant brought. It’s exiting, but we still hesitate to switch our focus.

Thins I really learnt is that when each team member have different ideas, one really need to voice it in time. Else, the direction of the project will go into the direction more and more far away from one’s mind. To save both parts time, different ideas really need to be voiced and fully discussed rather than make “compromise”.

3. Time Management:

I tried to manage my time this week. I tried to finish a task as soon as it is assigned, but still, I find it hard to do all the things. As problems could not be solved by increasing efficiency, maybe I need to decrease the number of things I want to do, and make some adjustment to my life habit.