How I made my first mobile (app) prototype

Pure grit, blind faith and sugar highs were all I needed. Sleep and zen are not part of the equation.

GymBeam: The gym app that monitors crowds according to your routine.

Here is the step-by-step process I trudged through in my attempts at being a UX designer. Please follow steps at your own discretion.


1. Hypothesise

Take a broad topic and make 3 sweeping statements that you wish to research and resolve. Beam widely, cause you have have totally nailed the problem areas with many days left to work.

Top 3 pain points as assumed by yours truly.

Note from your future sleep-deprived self: FOOL!

2. Define target users

Go over your bad handwriting many many times to draw out problem areas. Do spend hours looking for ‘problems’ for interviewees who “wouldn’t change a thing about their routine”, “like things the way the are” and “have no problem staying motivated to exercise”.

Constantly refer to the topic map you established to track interview results. Refrain from coming up with ideas and design solutions, no matter how amazing they are in your head. No, just no. Users who enjoy the gym “when most people are packing up and it isn’t too bad” do not want an app that will find them a friend to ‘spot’ their move.

3. Review your interview questions after every interview

Go back to previous interviewees to check in on new findings with subsequent interviews. Be mindful of the fact that this is a luxury and you need to have your interview-game on in the ‘real world’. Come up with new questions each time you hit an area of opportunity or problem.

4. Transfer findings to an affinity map

Close-up view of affinity diagram.

Note down each interview point on a separate post-it. Repress all OCD tendencies in you and arrange the post-its according to problems areas instead of colour or font size. Realise that you had so much fun experimenting with clusters and topics that you are now a day behind your coursemates. Panic.

5. Define problem statement

Learn that some users present more areas of opportunities rather than problems. Discover that users who are set in their ways may not always endow your research with issues they need you to solve but rather need help in becoming better versions of their already amazingly, fit and motivated selves!

6. Set your solution statement

Pat yourself on the back for coming up with a design brief for a group that was extremely resistant to change.

7. Map out your user flow

The mess of what was known as user flows and wireframe sketches.

Then quickly sketch out your wireframe and redo your user flow (wait, what?)! Switch between user flow and sketching phase as you notice that you think in text but express in visuals.

8. Generate wireframe sketches

Selected screens in mid-fidelity wireframes

Revisit affinity map to inform each and every design element you include in your wireframe.

Then go through user flows cause life as a UX designer is tough but it is a bit too late to ponder over that now.

9. Prototype your wireframe

Put in hours of InVision tutorials and cups of teh to create an interactive prototype. Give up and switch to Adobe Experience Design. Then, give up again and go back to InVision. Finally give up for good and move on to creating your presentation deck.

10. Present

Attempt to say the most words/sec as you share days of work over 5 minutes. Miss out on a lot of cool things you had planned in your head.

11. Share your work with users

Arm yourself for another round of ego-bruising and take down notes for the future.

And folks, that is how I made my first mobile (app) prototype.

Link to prototype I just yakked non-stop about: https://invis.io/2Z7ISON7A

Like what you read? Give annusia balan a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.