UX Design Immersive: Project 1 Case Study
A write up on my very first foray into the world of user experience design. Project 1 case study from the General Assembly User Experience Design Immersive. Here’s looking to a brave new career in user experience!
Working in pairs, quickly design a rough interactive paper prototype of a simple mobile app to effectively solve a common problem in your partner’s life.
Materials / Tools
Paper, pens, POP app
Overview of processes employed per phase
- Research phase: Concept mapping, co-created sketches, 1:1 interviews
- Design phase: User flows, Wire flows, Interface sketches
- Prototyping and testing phase: Rapid prototyping with POP app, observations of users testing the app
Research and observation phase
My partner for this exercise was Kirsty and my first task in this project 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. We sat together and I asked her broad open questions about her life and habits.
While we talked, I created a concept map, that she could also see. As the conversation progressed, I iterated the concept map to try to dig a little deeper into areas of potential interest. The final concept map is shown below:
The key problem identified related to her experiences when going to the cinema with her boyfriend Tom. Tom is a screenwriter and has a professional interest in movies, and also a much more flexible working day. The key problem insight came from the following statement from Kirsty:
“It’s usually his choice of movie…he goes more often (alone) and watches movies I also wanted to see.”
Further probing during 1 on 1 interviews with Kirsty revealed that, 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.
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 in order to create a hypothesis for the design and testing phases:
Kirsty confirmed that the storyboard (demonstrating the as-is and to-be states) seemed sound and we were able to use it to highlight the “tagging” of movies, and “communication of tags” as two key elements to the app’s design.
With this information, I created the following hypothesis to guide my design and testing phases:
Having worked together to identify the core features for the prototype app, I then started on some initial user flows and sketches to make sure that there was a logical sequence of steps that Kirsty could follow to achieve a set goal. There were several iterations of the user flow and changes to the exact nature of the goal that we wished to achieve as I tested the user flows with Kirsty.
In addition, through conversations around the user flow, we identified areas of interest that, though related to the problem, were not priorities for the initial prototypes (such as a calendar to coordinate when Kirsty and Tom should go to the cinema, and chat functionality to help coordinate dates and movies with friends) but that could perhaps be areas to explore in future versions.
The final user flow agreed upon is shown below 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:
The wireflow I constructed was perhaps a little bit too detailed to begin with and, as a result, I didn’t have time to iterate it many times over. I also noticed, later in the process, that I hadn’t considered each and every flow present in the user flow and so then had to design the screens for those with less research to back up the design process. Having said that though, the initial sketches were heavily informed by the wireframe screens that had been covered.
Prototyping and Testing Phase
I photographed and uploaded the sketched screens to the rapid prototyping POP app. The hotspots and buttons identified in the wireflow were activated in POP and Kirsty, and other testers, were then asked to use the prototype to achieve a goal.
I asked the testers to speak out loud while they were testing the app so that I could write down their thoughts and observations to help me iterate and create a better version.
In the first round of testing Kirsty said that the browsing and sharing flows were really clear and intuitive but that there were two key areas she was having difficulty with:
“I really didn’t get that I had to swipe to share, I thought I just had to tap. It made me feel stupid that I couldn’t get it to work”
“I like that I can see which of my friends also like the movie but then when I seen who wants to go I might also want to tag interest”
From this feedback, my second iteration prototype changed the swipe to a tap and I also enabled users to share their interest in a movie from the “friend” screen. This second change would have resulted in changes to the user flow that, ordinarily, I would have made. However, this being rapid prototyping and iterating, I simply made a note and updated my interface sketches.
In the second round of testing with multiple users, including Kirsty, additional feedback was raised that could be used to inform future iterations of this app. For example:
“Tagging “interest” or “seen” on the homepage seems really instinctive but not so much on the detailed movie page. I’m not sure why exactly as I can see it’s the same icon, and separate a bit from the friends link… maybe because the star and the friends are in line with each other? Or maybe because on the details page (where I can scroll) I’d expect to see some kind of prompt? Like “Interested?” Or “Seen it?”” Kirsty L 18th March
“I guess that the arrows in the movie detail screen take me to different movies but I find that a bit confusing really — maybe add the movie title to the top or something to make that more obvious? I don’t know — that bit is just not really clear…” Adam B 18th March
“I can understand that the star at the bottom here (global elements) is the list of people interested in that movie…Ah ok no — so these are my favourites and seen movies — ok so I would want to see those pages to confirm my hunch and avoid misunderstanding…” Adam B 18th March
“I’d want it to be integrated with facebook and some kind of chat so I can invite friends and have chats about movies… like if I’d want to organise a date or something… also I’d like to be able to have a private chat that not everyone can see…” Adam B 18th March
As a side note on my ability to conduct a test, in future, I would like to take more time to explain the context and problem statement that the app strives to solve. I’d also take the user flow diagram with me to inform the specific test scenarios I would like the participants to complete. I found that I wasn’t always getting relevant or appropriate feedback because I hadn’t set up the test correctly.
The outcome of the rapid prototyping experiment is that the original hypothesis, for an app that allows tagging and sharing of movie interest, could indeed solve Kirsty’s problem. Of course, further changes would be required to the product to improve on the functionality that is offered and perhaps additional functionality, not included in the scope of our user flow would be required to truly achieve the desired solution. However, in Kirsty’s own words:
“I am able to achieve the original testing goals.”
Kirsty L. 17th Mar 2016
Kirsty was able to tag her interest in a movie and share this with Tom. Meaning hopefully, that he would amend his behaviour and would watch a different movie when he went to the cinema on his own.
The second round of testing highlighted the following as areas that could be improved in future iterations:
- Navigation between movies in “detail” mode. Some users weren’t clear that they could scroll through movies in the homepage AND in the detail movie view. As a result they kept going back to the homepage to scroll through movies. Testers suggested moving the position of the movie title near the top of the movie detail page but this could also perhaps be resolved by labelling the navigation arrows e.g. “next movie”.
- Starring movies in detail view. The call to action in the detailed movie view was a source of significant confusion. As Kirsty commented, this could be resolved with a label posed as a question perhaps.
- Icons. Despite being a rough sketch, the eye icon was also confusing to some testers. They were unclear on whether it meant they wanted to see the movie or if they had already seen it. Further testing with users could help identify a more appropriate icon to signify the desired message.
- Create pages for global elements. All testers said that they would want to “double check their hunches” that the link on the global elements page was their own list of starred movies. This would be a quick win to help users learn the app more quickly.
- Integration with social media and chat. During the second round of testing, there was quite a lot of interest in the wider potential integrations that the app could offer. Though much further down the line, users were interested in how they might add friends and send private messages about movies, within the app.