Tasked with creating a mobile app prototype that solves a specific user problem, I built an interactive prototype that would help my users connect with people in a new city based on their preferences and interests, and then arrange to meet.
The app combined features like profile matching, chat functionality and location-based recommendations with a warm and engaging brand personality. The 2 main focus areas of the design sprint were User Research and Visual Design.
2 week design sprint
The task for the first week of my project at the General Assembly UX Design immersive was to design a rough interactive prototype of a mobile app that would address a key common problem in a class colleague’s (the user’s) life, based on user interviews.
The focus of the second week was visual design — applying fundamental visual design principles and techniques in a user-centric way.
My challenge was to do extensive user interviews and research with my designated user to identify a problem, and then to design the app prototype through an agile UX design process that included:
Interactive low-fidelity prototype of the app in Marvel + High-fidelity screen mockups on Sketch
She’s new to London and lives with her boyfriend. She loves books (reading and writing), interesting conversations and deep connections with friends.
My goal was to identify a current problem without a solution in her life that could be the focus of my app.
We had many chats about her life and interests. Back home in Barcelona, Irene had lots of childhood friends and since she moved to London, she has found it difficult to make new friends who she can connect with. She has gone to meetups and writers’ groups hoping to meet people with common interests but being quite shy, this hasn’t quite worked out for her.
She dislikes big groups and would love to have more opportunities to connect with people on an individual basis.
I spoke to Irene again to delve deeper into her situation and better understand her problem. Dipping my toes into the psychology of introverts, adjusting to life in a new city and the social dynamics was fascinating.
Putting pen to paper, I built a concept map around my user interviews to help me visually organise the user insights by theme.
This highlighted the user motivations and the emotional aspects of the problem and informed what features I could potentially include in my app.
Defining the problem in a simple statement, and refining this based on user feedback, helped anchor my design process.
A simple visual demonstration of my user’s journey through a storyboard helped capture the problem and identify a solution and the desired outcome for Irene.
Friend City is a new mobile app that will connect this user to people based on her preferences and interests, and who she can then arrange to meet.
Building a logical user flow helped move the process forward and start visualising the various steps in the app process.
I revised this a number of times to reflect the user decisions and keep it simple.
I began to build initial sketches based on the user flow and this helped me visualise what features I could add and how much information I should include on a screen.
Checking in frequently with Irene was invaluable in ensuring I got early feedback and was able to take this into account for revised sketches.
This helped changes to include specific app features and navigational elements. For instance, a couple of screens were too cluttered and text-heavy and would benefit from being more visual.
Once I had revised sketches, I began building paper prototypes where I got to play around with user interfaces and add more detail to my sketches including navigational elements, button placements, details on matching profiles, etc.
Constant testing throughout my design process provided me with actionable insights into the actual user experience and helped inform the app screen flow and features.
I uploaded the paper prototype images to Marvel to continue testing on a mobile screen. It ensured that the app was simple, intuitive and focused on the user outcome.
With the app features and flow in place, the next challenge was to apply newly learned principles on typography, colour, shapes, iconography and forms to our screen design. This was combined with an understanding of the app’s brand philosophy and usability.
Building an overarching brand personality was key to all subsequent design decisions.
The user goal in the app is to connect with new friends based on interests and preferences. Through discussions with Irene as well as further research using a brand positioning framework, I honed in on the key attributes of my app’s brand personality:
To further flesh out my brand’s perception and personality, I looked at inspiration out there as reference points.
Once I had a good idea of my brand’s personality, I began developing a visual style that would communicate the brand attributes and bring out the user’s emotional experience.
I began pulling together a mood board to help me visualise the user’s feelings, moods and behaviour. It also provided inspiration for various visual components including a colour scheme.
I picked out colours from my mood board that communicated the brand’s personality and tested them out on some low-fidelity screen sketches to see how they came together.
As we began understanding the fundamentals of design language, I began researching style guides published by companies like Google, AirBnB and BBC.
I pulled together a style guide for the Friend City app which helped me ensure visual consistency and structure in the visual design across the screens.
Components of the style guide included typography (and fonts), colours, buttons, input fields, logo, alignment and layout.
Next, I digitised 3 of my initial screen prototypes and moved these from low-fidelity to mid- and finally high-fidelity.
I user tested these at every stage and iterated my designs so ensure it reflected the brand personality while being usable and readable.
I experimented with a few things for my first high-fidelity mockup, which included:
Feedback on the above was mixed:
I tested a few more images for the second and third screens to mirror the warm emotion from the first. I also experimented with other typefaces and layouts and updated the style guide.
I switched to the Roboto Condensed typeface for my next iteration. Other changes included background image, transparency variations, button placements, etc.
The feedback on these was more favourable but the background image for the 2 latter screens was still perceived as being cold. I continued tweaking and testing both the visual impact and screen readability and layout.
I made further changes in my next iteration:
I tested the final screens on a mobile phone and the user feedback was largely positive. Most people felt the design communicated the friendly, urban brand personality.
While the project was a steep learning curve for me personally, it was an incredible learning experience, and watching my design being born and evolve was amazing.
Building my user interviewing skills and combining fundamental visual design principles with many user tests and iterations helped my design process immensely.
Given more time, I would have liked to add additional features based on user feedback and testing: