Pickle App: Case Study
This case study shows the thought process I went through while designing my first prototype for a mobile app. This project was my first portfolio piece as a UX Design student at RED Academy.
The Opportunity
For my first ever UX project, I was to pick a partner, and develop an app they would use based on an interview about their life. I was given a little under a week to complete a cohesive clickable prototype. My process included a short interview, research, storyboard, lo-fidelity paper prototype, and finally, the clickable prototype. The final deliverables were created with Sketch and InVision.
Research
I started by having an interview with my project partner, Rebecca. Although I had prepared a written script, we never actually ended up following it. I knew that Rebecca was new to the city so we chatted about what it’s like to be a newcomer and the setbacks that come with it. She told me she left a nursing job just a week prior and moved to Toronto. Having been in the city for a while myself, I had not realized how frustrating public transit breakdowns can be to someone new. It was becoming clear that for a nurse, time-efficiency is key, and the constant breakdowns of our subway was messing with this girl’s day.
Rebecca told me that Google Maps don’t offer many alternative routes from her home, and the TTC is inadequate in providing live updates on their app and Twitter page. I started looking at current apps that provide transportation advice. I looked at Waze, which was brilliant but focused on drivers, and I looked at Rocket Man-which focused on information about vehicle arrival times but nothing in case of malfunction.
Rebecca had mentioned at some point being shy and quite introverted but friendly at the same time, so that got me thinking of ways I can help a newcomer get accustomed to a new home, without leaving their comfort zone. I was beginning to develop a general idea of what Rebecca needs in an app. I narrowed it down to her 3 main goals and 3 main frustrations. Those goals being:
- Achieve a level of comfort in navigating a new city
- Be the most constructive with her time
- Making new connections
And the frustrations being:
- Unreliable transportation system
- Lack of live updates and support
- Apps that require constant attention
Planning
At this point the idea of a live chat was on my mind. I had worked enough jobs that required public transportation, and I had done enough research to know what devices were available, and what has never been addressed. I was dead set on having the first screen be a location map. The idea was to to open the app to be able to see other users in your vicinity and then be prompted to chat.
My app was going to have 3 main functions: Chat, Favourites, and Report. The Favourites tab was going to serve the function of saving favourite conversations in case the user needed to revisit them later. The Report option was to give the user ability to report a travel route that was currently out of service if they were the first ones to discover a malfunction. And the Chat-was the main advertised feature. The idea was that through anonymous chat users can still be social and have short-lived conversations to share their feelings and perhaps a joke, while also not having the anxiety of interacting with strangers.
Paper Prototype
I was finding it difficult to make wireframes. I kept overthinking the design aspects and the final outcome, so I just went straight to drawing out lo-fidelity prototypes and from those moved on to mid-fidelity.
Problem Resolution
User Testing
Pickle being my first project, I have forgotten to do usability testing until after I had done my prototype. At this point, the apps purpose was clear to me, but the more I looked at every step, the less I could explain it with certainty. I decided to put it through a user test to see what my users could point out that I could no longer see. As my classmates were trying to go through my prototype, the first thing that was pointed out to me was that a page displaying the status of “Favourite” routes should be the home page. Ideally, that would be the last step of using the app, if everything is running smoothly. However, if a certain bus from your regular routine is shut down, you (the user) would then prompt chat.
Another adjustment that was pointed out to me, was that it made more sense to be able to speak to users who are close to the location of the broken down route, as opposed to your own vicinity. This would provide the users ability to think ahead and get feedback from those who can provide input on the location.
Problem Solving
Luckily, the issues my users pointed out during testing were all solvable by rearranging the screens. The unfortunate part of that, was that I had to go back in my process and rework the user flow of every interaction with the app. This took a little more time than I would have liked to spend on user flows, but at this point I was just glad I didn’t do the wireframes.
Clickable Prototype
So for the final prototype, I used my original mid-fidelity paper prototypes, but I transformed them into a digital, working prototype with InVision. I switched some screens around for better flow of the app. Generally, the first few pages should be straight forward, and then one the user goes into the “report” section, they may choose to report a Bus route (the only clickable option for the purpose of this presentation), and obviously, the page to select a certain bus route that is down — is not clickable for the sake of time. It should be mentioned that some pages have a “go back” option with a swipe action, however, in this integration a mouse click will do the job.
Summary
Pickle was my first mobile app prototype as a UX Student. I have learned so much from trying to create this product. From the importance of small details in an interview, to extensive research from every angle, this project has taught me how to be thorough and ask effective questions. Coming from graphic design, it is often easy for me to overlook the functionality of something to favour the design. Pickle has taught me that in User Experience — functionality can make or break a project in moments. I learned how to break a process into steps, much like Adobe Illustrator has taught me to layer my work. In the end I was very happy with this project. It was a great introduction into the field and got me very excited for the logistics that it brings.
10/10 would recommend.
