One Day Sprint: UI prototype for a city explorer mobile app
Design sprints are a battle-tested process to fast-forward into the future and get a clear picture from a realistic prototype. Earlier this month, I undertook a 5 Day Design Sprint to create a clickable UI prototype for a virtual fashion app. Inspired by the results from the process, I decided to launch a one-day sprint for an Adobe XD contest I recently came across.
Here’s how it went down…
Setting the stage
The challenge was to create mobile app prototype for a city using at least five icons from one of the three exclusive icon kits designed for this contest. I decided to create an app based on Bournemouth, a large seaside resort on the south coast of England, known for its beautiful beaches, Victorian architecture and buzzing nightlife.
After examining all three icon kits, I decided to go with the kit by Anton & Irene because I liked the simple, clean look of the icons and I felt the icon style resonated most with my experience at Bournemouth.
The Morning
The goal: To create a (minimum) 6 screen clickable prototype for fellow residents and visitors to experience Bournemouth and discover what the town has to offer.
Potential Issues: Limited time meant that initial user research was limited. City explorer apps on the market were researched. Notes about the interests and needs of the target market were recorded.
Interaction Flowchart: Enter app> Customise experience > Interests Dashboard > Choose Category > View Places > Choose a place or change category or save place to favourites > Review place or read reviews or view photos or get directions
The Afternoon
The beginning of the afternoon was spent creating and refining wireframes. A mood board was put together to inspire the colour scheme and visual language of the app prototype.
Creating the screens: Once I finalised the wireframes, colours and typography, the rest of the afternoon was spent creating the screens on Adobe XD.
The Evening
Creating the clickable prototype: Once the screens were ready, it was only a matter of minutes to prototype the flow and interaction of the app. In my opinion, one of biggest pros of using Adobe XD over Invision was the ability to design interface and interaction within the same application.
Testing & Feedback: I recruited two local residents to test the prototype. Key feedback points:
- Some of the screens are too text heavy. “Perhaps, screen 4 & 5 could display only the postcode?”
- The teal colour makes the app look too “clinical”.
- A good feature would be to be able to visit the website/read more information about a selected place.
Future Direction: Users liked the idea of being able to explore their own city through an app. The feature to “Save Places” was appreciated. The colour palette of the app needs to be redefined to resonate with the emotion of the app. The interface needs to be refined to accommodate the needs of residents who know the locality (i.e. only a postcode would be sufficient) and those who are new and need more detailed directions (a complete address).
