The ingredients 🍉

The brief

Working in pairs, design a prototype of a simple mobile app to effectively solve a common problem in your partner’s life.

Time and team

• 2 weeks 
• Just me :)

My role

This was an individual project so I carried out all aspects of the research, design and testing.

Skills and tools

• User interviews 
• User flows
• Sketching 
• Rapid prototyping
• User testing
• Visual design

The quest 🌴

Discovery

My partner for this project was Kirsty and my first task was to try to identify a problem in her life that would be the focus of my prototype mobile app. In order to gain some insight into her life, we started with some high level user research in the form of concept maps. The key problem identified related to her experiences when going to the cinema with her boyfriend Tom. As a consequence of their differing workday patterns, and a lack of communication, Kirsty’s cinema-going experience wasn’t always what she hoped it would be; Tom had already watched all the movies that Kirsty wanted to watch. So, when they would go together, she’d have to watch something that she wasn’t as interested in.

Vision and hypothesis

Based on the initial findings from the concept mapping and user interviews, I created a storyboard to test the context in which a mobile app might be used to solve Kirsty’s problem. I used the storyboard to help identify the key functionality required by the app.

I used the storyboard with Kirsty to highlight and confirm my assumption that the “tagging” of movies, and “communication of tags” were the two key elements to the app’s design.

With this information, I created the following hypothesis to guide my design and testing phases:

"I believe that an app that allows registering and sharing of interest in a movie, at a selected range of cinemas will achieve a more balanced cinema-going experience for Kirsty and Tom. I will know this to be true when I see Kirsty and tom going to more movies they both want to see together, and Tom going to fewer movies that Kirsty wanted to see alone."

Design

I started drawing out user flows and sketches to make sure that there was a logical sequence of steps that Kirsty could follow. The final user flow is shown and though it focuses on the main objectives identified earlier of tagging and sharing interest in movies, it also now includes steps to allow browsing of movies (in summary and detail), tagging movies that have been seen, and the ability to choose whether or not to share an update. These new features were only discovered from testing the user flows with Kirsty and asking her about her needs at each step of the flow.

Once the user flow enabled Kirsty to achieve the specific goals outlined and agreed, I used the document to map out how those process steps would translate into screens in a wireflow. Multiple steps of a process may be achieved in a single screen and so it was crucial to plan what would go where, and importantly, how Kirsty would be able to fulfill all of the different user flow paths, through the app. Buttons and “interactive hotspots” were identified which then went to inform the interface design sketches: 

Testing

The paper prototype was tested initially with the participant and then digitised using POP prototyping for testing again with a wider user base. The interface design was iterated based on feedback gained from user testing. For example, a swipe gesture was changed to a tap following feedback that the swipe wasn’t clear. I refined some of the icons to make them more intuitive and simplified some of the actions too. I also enabled users to share their interest in a movie from the “friend” screen.

The refinement 🌺

Visual design

The second phase of this project was to come up with and apply a visual design to the app. The first step in this process was to define a theme. I created mood boards to start exploring ideas for image treatments, colours and typography. The app is for movie aficionados like Kirsty who enjoy the immersive escapism offered by the cinema experience. They value the heritage and glamour of cinema as well as the latest developments – I wanted to explore how those values could be visually communicated. Word association exercises, brand affinity mapping and semantic differentiation really helped me clarify the tone and voice of my app.

Despite having made a few new interface sketches I found that I couldn’t really “see” ways of improving the design until I had actually taken time to go back to basics and sketch out the information architecture behind the scenes. Taking this step back helped me determine what information needed to be on what page and how certain elements should be grouped. It also clarified the hierarchy of the functionality on a page.

Digital wireframes were created from the sketches and then the colours and typography applied. A style tile template was used to guide the design and ensure consistency across all pages. I tested the stylised templates with three groups of three users and iterated my designs with their feedback each time. I had prepared a test questionnaire to ensure I asked objective questions about my designs and to ensure that I got feedback that was useful for improving the designs.

The evolution 🍍

Throughout testing I had great feedback indicating that the visual design was accurately evoking the brand personality. There were however, still challenges around the amount of information presented per screen and in future, I'd like to further refine that. Other users expressed an interest in integrating chat or messaging functionality that could be interesting to explore in future.

Explore other projects

Want to know more?