During our Human-Computer-Interaction Class we got assigned the task to develop a well designed system for users who have a lack of awareness of fitness facilities, don’t know how to work out, and struggle organizing their own work out life.

That is the reason why we created a design for a Fitness App called “OtterFit” which provides an Outdoor Map of the gym and an Indoor Map which shows where all the Gym-Devices are. We also embedded detailed instructions on how to use these machines and a work out planner.

Heuristic evaluation

The general Theme of Heuristic evaluations are the following:

Understanding Action Feedback
Consistency Freedom Show status
User familiar language Flexibility Prevent errors
Clean & functional design Recognition over recall Support error recovery
Provide Help


These are the ten heuristic evaluations that we used in the HCI Class to identify the different Issue Types:

0 = No problems

1 = Cosmetic Issue

2 = Minor Issue

3 = Major Issue

4 = Catastrophic Issue


With my Heuristic evaluation group, I evaluated the page and also their page for mobile devices, here is one example where they violate the heuristic design rules:

On the page that you get when you call the page on a smartphone, is the landing page for each user. The two menus are confusing. For the user, it is very confusing to see two burger menus.



Interviewing is one of the opportunities to get information about a problem. At the beginning, I wrote the Interviewing Map. This Map includes the Setup, where everything is defined, like the Date, Time, the Interviewer, Location, and also the Equipment & Materials.

Then there is the Intro written down. Here is my Intro:

Hi, I’m Jonas, and I am studying Computer Science at CSUMB. I am currently taking a course regarding human-computer interaction, and I am interested in understanding the motivations of students for maintaining a healthy lifestyle on campus.

Thank you for taking the time to talk to me today about how you make your choices to commute to and from work. I am interested in hearing your stories and experiences in health and wellness on campus. I would like to ask you questions on how you feel about health and wellness on campus.

So, how does this work? I will ask you simple questions and you can feel absolutely free to answer them the way you think. Feel free to answer them honestly. Also feel free to think out loud and say whatever is on your mind. Don’t think too much about giving a better answer, simply express yourself freely.

I am in no way trying to evaluate you, but rather trying to find out more about the experiences of student’s health and wellness on campus. Would you mind if I recorded this interview in audio format to be used only for the purpose of this study? The information from this interview will not identify you personally and will be discarded after the analysis of the study is completed. If it is OK to record, could you please sign this consent form saying that you willingly agree to be interviewed and the audio recorded.

The Questions are separated into four sections, About the Person, this is to see if the Person is the right person for the study and also if there are special needs. The next sections are the Specific Questions where you get the information that you need to build your idea, the Dream section is about the dreams and their you will get the information that you need to build the wishes from the user in the Wrap-Up section you’ll probably get the information about the users real needs.


Affinity diagramming

Affinity diagramming is a group creativity technique by which efforts are made to find a conclusion for a specific problem.  With this technique, we generate a large number of solutions.
These were the questions we asked:

Why would you use this product?

What are the problems with the current theatre’s website?

What are the needs of the users?

What context would the users be in?

Who are the users that are using the website?

When would the users be using the website?

Where would the users be using the website?


The responses were really useful and helped us to generate ideas. These answers were also useful to create the personas later on.


Cardsorting is a part of the affinity diagramming. The focus during cardsorting is to hold the product less on the people, it is a model to organize the cards and ideas.

We sorted the ideas in a different section to see which one got covered the most. We also figured out which ideas could be developed in the different possible ways.


Personas are used during the user-centered design process to focused on the user and remember how a user could be. The user is important to emphasize with them. With a persona, you can better imagine how a user would act and feel in different situations.

A persona should represent the target user and how they could be. There is also the possibility to create an anti-persona which represents how a user would never use the service.

For our project, we created two personas a primary persona and the secondary persona. I worked on the secondary persona. She is called Jane Newman and her quote is “I really want to consistently work out, but I’m not sure how”. She is 20 years old, her major is biology, and she is motivated by personal health.

Scenarios / Use cases

Use cases are used to identify a use for each function and the way the user would use these.

Our Scenarios are finding out and keeping track of fitness facilities and opportunities. For example, on arrival at CSUMB, the user should get in contact with the nearby locations.

Another scenario is, that the user struggles organizing their own work out life style.

To find out what each machine does the user could easily use the integrated QR-Scanner and scan the QR-Code on the fitness machines.

Paper prototyping

Paper prototypes, Mock-Ups and Prototypes are used in the design process to show potential design. Paper prototypes are low fidelity prototypes, that means they are cheap.

Usually there are more than three iterations of a design until you start making it productive, because later on if you have to change something it costs more.

Here you can see our iterations from a low-fidelity paper prototype to the final prototype.

Usability testing

Usability testing is used to test the design (and not the user). Usability testing is really important to verify that you developed for the right user and for the right use-case. You should start with user testing as early as possible and after each user test you learn something from it, after a couple of user tests, the best is 12, you know what you should change in your design.

For our user testing we tested it on paper in 3 tests with 2 iterations and with our higher fidelity prototype, 4 tests and 3 iterations. Our Key-Findings in the user testing was that the QR-Scanner is unfamiliar to some people, and that Icons are really important.

Kategorien: UX