AY Tech — Activity Explorer App

A report on effective UI/UX design on a responsive web app

Summary

The goal of the Activity Explorer app is to provide suggestions of physical activity to the user based on a series of questions. The app will give the user a result based on answering six questions based around their normal active habits.

The questions for the activity app are as follows:

  • 1- When — when do you want to do the activity?
  • 2- Age ranges — Tell us about your group
  • 3- Transportation — what’s your mode of transportation?/How far are you willing to go (in minutes)?
  • 4- Time — How much time do you have?
  • 5- Budget — Do you have a budget in mind?
  • 6- Level of Physical Activity

Task

  • To design 1–2 screens for the app’s questionnaire, and any sub-questions that may occur
  • To explain my design process and provide any documentation

Tools

Thumbnails sketches, Photoshop, Illustrator, Sketch, InVision

Research

The two questions that I chose to design were questions 1 and 3, When and Transportation. These questions challenged me more than the rest as there were sub-questions which would prove to be a lot more interesting to develop.

I also chose to design these screens for mobile, rather than desktop. In responsive web design, a good rule of thumb is to design from mobile first and onwards to desktop and tablet. The reason for designing this way is to ensure there is enough room for information on a smaller screen. I also decided on a mobile screen because the user would be more likely to answer these questions just prior to beginning the activity(there is an option for “Now” on the When questionnaire).

I began my process by thumbnailing different options on how the information would be sit on a mobile screen and how I would display the sub-questions. The sub-questions would best work as a lightbox, appearing when the user chooses an option that requires more information.

The answer to the sub-question would then appear as an icon beside the initial chosen option. For example, if asked when is the best time to do an activity the user chose ‘tomorrow’, and then answered ‘morning’ in the sub-question then a sunrise would appear next to ‘tomorrow’.

I sent initial wireframe options to various potential users for feedback on which designs they felt would work best when answering a series of questions. They all loved the idea of a lightbox for the sub-question but had different opinions on the layout of the screen. From the feedback, I took different pieces of each design to format a wireframe that was easiest to use: laying out the questions in a cascading fashion with a check-box on the left.

Wireframe sketches

UI Ideation

The Activity Explorer app is designed to get users to do physical activities based on what suits them best, and the visual design needed to reflect positivity and confidence. It also needed to be casual but determined, driven, sporty and healthy.

The colour should be bold, complimentary, bright and healthy. The overall space and shape of the UI would be minimal, simplified, balanced, and athletic. I wanted the movement to feel light, efficient and streamlined.

I created a moodboard with all these features into account:

Moodboard

Upon completion of the moodboard, I began toying around with specific colours, typography, iconography, navigation, and shapes and the interface began taking shape in my style tile:

Style Tile

Prototyping

Once I was settled on my design style for the app, I began designing medium fidelity prototypes of the design. I took into account of the feedback that I received from my wireframe thumbnails and laid out my screens in an arranged and efficient manner. I then sent my prototypes back to the potential market for testing and observation. As these were just two screens, there wasn’t too much feedback. The biggest response was that it was suggested that the lightbox have an ‘close’ button or ‘confirm’ button, in the instance that the user makes the wrong choice and wants to correct. If the scope were bigger, I would anticipate much more feedback.

Low fidelity prototypes

Outcome

Link to inVision prototype:

The final composition of the questionnaire is bold, positive and clean. The colours are complimentary in order to push the boldness but also represents sporty, team-like colours. The typography is clean, clear and confident.

I’m happy with my outcome for this project in the timespan of roughly 10 hours, from ideation, interviewing, wireframing and to prototyping.