Project Length: 5 weeks
Project Date: 2015
Key Role: UX & UI designer
Collaborators: Tarang Gala, Gina Knox & Colin Wilson
Helping Students Help Themselves
Goal: create a peer to peer platform to help students get help
Deliverable: mobile app, user story & concept validation video
What we made.
This app was born out of our need for on-demand help at art school, whether it be for essay editing or lifting something heavy. The app allows students to request help by filling out a short form. When they are done, they simply hit send and their request appears in the "missions" section of the app for other students to view. Then anyone on campus can accept a mission. Once the mission is accepted, a chat opens with both parties so that they can arrange the details. A vital part of requesting a mission is offering "lemons". Lemons are a digital currency that lives within the app. In order to request help, you must offer lemons and when you help someone you receive lemons.
We made this prototype which allowed me to test the concept with users in order to get feedback and plan our next steps.
The interactions in this applications are particularly simple in order to allow the content to be the star. Our signature interaction is the swipe between lemons on the home page. This is meant to be a casual way to flip through missions while getting some joy out of scrolling through the content.
This prototype was made with Framer.js
I made these screens which allowed me to express what the details of the app would look like and see how the complex main features all tied together.
The visual system for the app is based on our our brand name, Lemonade, which is a play on the phrase “when life gives you lemons, make lemonade”. So the app is designed to be light, bright and joyous. We incorporated a lot of iconography rather than photography in order to use our color scheme to the greatest advantage. The type is light but large and friendly so people feel comfortable reading the words of others. The secondary font is fun and used sparingly to highlight key interactions.
We made this video which allowed us to express our users’ needs and demonstrate how our concept would solve them in an emotionally-fulfilling way.
This video shows several different stories that we learned about while doing research. Combining these with our product was a way to express our concept to users in a matter of minutes.
We made this video which allowed us to document and share our user tests in an engaging and fun way.
The video highlights real user feedback we got while showing people our prototype. This was probably the most valuable deliverable we created. We didn’t often have a large amount of time to do user testing for school projects, and hearing users’ reactions allowed us to make quick changes to our concept.
How did we get there?
Research and Iteration
We did these brainstorming sessions which allowed us to work through complexities and synthesize the user research we did.
This gallery is very long so as to show the extent of iteration and research synthesis involved. We spent two full weeks of this project on the design process and learned a series of important things from these white-boarding sessions. For example:
1. Students have a lot of problems and we can’t solve them all, so let’s figure out a way for them to solve them on their own.
2. Create an MVP (minimum viable product) for these students and then do testing to confirm our beliefs.
3. Students thrive from social interaction, so let’s create a social product.
We made this video storyboard which allowed us to express our concept quickly in order to get feedback and adjust our direction.
The video is meant to be silly and whimsical so we didn’t get too the idea. It was our very first stab at taking our learnings and ideas from our white-boarding sessions and turning them into a real idea.
We made these competitors diagrams which allowed us to analyze how we wanted to create features to differentiate ourselves.
This was an interesting exercise because we realized that our service had been thought of by many people. We did research into these services and took notes on how to improve our own.
We made these wireframes which allowed us to analyze how we wanted to create features to differentiate ourselves.
We ran this like a design sprint: every minute all four team members would draw a screen based on a set of features, and after a few rounds we discussed and redrew the screens based on all of our options.
Wireframing Round 2
We made these wireframes which allowed us to show low-fidelity screens to users and get some initial feedback. These also are a great way to evaluate the user experience of the application.
I really enjoy making fun little screens like these because they are a great way to get a feel for what interactions might look like and to find out where you need to put icons or photos. These wireframes helped us figure out the small details of what the user would see on the screen.
I made these wireframes which allowed me to play with different color stories and elements which helped me start to test the UI.
These screens show several versions of the color story and UI, including different options in each one. For instance, the sliders shown here are very different from the sliders in the screens below.
Animation Guide & Final Screens
I made these final mockups which allowed me to not only show the final version of the app, but also what every use case would be and what interactions we would be using when prototyping.
This was a very large document created to show our prototyping lead what the animations would look like. It also gave us a comprehensive document that helped us find any bugs not sorted out in past iterations of the user experience. Once we triple-checked the UI and UX, we started to create the framer prototype listed above.
Next Steps & Key Learnings
The next step in our process will be to flesh out our prototype farther in order to show it to a larger audience and get things like an on-boarding experience prototyped. Once that has been accomplished, we would do another user testing/ validation session. I think the most important things I learned from doing this project are how to scope features and how to create a minimum viable product.