“Fipple” — social app case study | Interaction Design Capstone Project
This project was build for the final 8th course under the Interaction Design Specialization by UC San Diego on Coursera.
Design Brief: Using the process of design thinking, find the problems in one of the three briefs(Time, Change & Glance) to design a solution around it. Walk through the structured steps designed for this project course to come up with the design for your product — go through needfinding, ideation and paper prototyping to design as many creative solutions possible. Then turn those ideas into one concrete design with the help of Heuristic Evaluations. Test your application prototype, get feedback, iterate and test to keep on improving your designs. After all the refinements, demonstrate your final product design and document your process.
Problem Statement : CHANGE — Design an interface that facilitates personal or social behavior change.
Needfinding
With the brief selected, the first task was to observe the current disposition of any scenario of our choice where our problem statement could be applied. The needfinding observation was accompanied by 3 interviews of individuals from different demographics and see how each was impacted by our scenario under observation, understanding different perspectives on the problem and identifying breakpoints and opportunities for our design.
The scenario I chose to observe was how people find others for any activity requiring company, especially in a new or unfamiliar social environment.
We face change whenever we are introduced to a new and unfamiliar social environment — moving to a new town, at a new job, college, joining a hobby class, gym or any social activity. We also always need people — whether for help with work, to get familiar with a new place, or just good company. But something as simple as going to watch a movie can become a challenging task because you have to find people with the same tastes in films as you. We always have a tendency of approaching our immediate circle first, and if they are not interested, we end up dropping our desired task altogether or performing it alone. There is a potential to improve social interactions among people who are introduced to a new place or undergoing a change in environment.
I interviewed 3 individuals —
a. A student who just started grad school in a foreign country
b. A full-time working professional at a new job in a new city
c. An individual who moved to a new city and was looking to start his own business.
After talking to all of them, a clear need could be identified.
There needed to be a way to find like minded individuals for performing activities that might be a hobby, creative or professional work. Existing apps like MeetUp work on groups and are too broad and often intimidating for people to work with when the need is of only 1–2 people with a personalised screening of individuals. Apps like Tinder have the technology to address this problem but they are focused on one particular thing (like dating) and often have some mistrust or apprehension associated with it. There needs to be a way to let people make better social connections, outside of people they know on existing networks.
Ideation
The first task for week 2 was to brainstorm ideas around specific opportunities identified during the needfinding phase. Volume of ideas was the main goal first. Try and think of as many possible solutions and designs that you can, we can filter the meaningful ones later. Anything is fair game, so be creative. These ideas were then filtered into 15 identifiable needs. A user needs to —
1. Be able to explore a new place/city/environment with someone familiar
2. Connect to a local individual in an easier way
3. Find a way to overcome social awkwardness in a new environment
4. Easily find people for company during meals and explore new foods.
5. Talk to neighbours or nearby people easily
6. Make connections without any romantic involvement/dating.
7. Find people with similar taste in an activity/hobby.
8. Get to know people in the office better for social interaction
9. Find activities in an area suitable for everyone involved
10. Find people of your own age group
11. Form your own activity group
12. Get in touch with professionals in his local area
13. Find a cost effective way to look for people to work on projects with
14. Meet people outside his known network of friends/social media, but still in your locally accessible environment
15. Filter responses and avoid unsuitable company, assess the quality and legitimacy of a social contact
This was followed by a verbal inspiration exercise and inspiration boards where I looked at 5 uniquely designed apps, solving different problems — Tinder, Google Spaces, MeetUp, Foursquare/Zomato and Facebook’s Messenger Bots service.
Storyboards & Prototypes
This is where the fun began! Storyboards are a great way to design potential solutions and how they fit different scenarios. It allows us to discover feasibility of different ideas, the flaws and possible success in it.
I picked two main scenarios around which the storyboards and prototypes had to be created —
- Search for people around you based on your interest/task
- Search for local activities and groups related to your interest/hobby
Paper prototypes were a key part of the process. Using just a sketch pen and paper allows us to focus on designing around our main idea, without falling into the minutiae of visual design. The design had to clearly connect with our observed point of view, depict the rough app flow and how it actually addresses the problem we were designing for.
Use of device frames and UI elements made out of paper is a great way of scoping the app’s user experience.
Heuristic Evaluation
Next step was to evaluate our app using Neilson’s Ten Usability Heuristics.
We conducted a self walkthrough at first to smoothen out the app flow and interactions. This was followed by an in-person evaluation, where a user interacted with our paper prototype while voicing their thoughts and opinion about the app. These observations were recorded and later correlated to the Usability Heuristics list. Each identified problem was categorised and given a severity rating. As the last step of the H.E. process, we conducted Live online evaluations of our app using Talkabout or Google Hangouts where we evaluated our peer’s paper prototypes and documented the Heuristic Violations while they did the same for our designs. (Shoutout to Anna Theres for conducting my evaluation!😄)
Heuristic Evaluation is perhaps the most useful process while designing an app. It’s a great way to identify problems early on in the design process and figure out what works and what does not. It helps you identify key usability violations and think of alternate designs to fix them, while also ironing out minute errors and bugs. This greatly reduces the probability of redesign and failure during the later stages. External participation is key since if we do it alone, we will often gloss over the imperfections of our own design. H.E. should be done at every design stage and whenever a major system change is introduced.
Finally, after going through all the evaluations, we consolidate them and distill our final solution around which we design our application. We also create a development plan to assign estimated timelines and effort required for each upcoming task.
Wireframes
We begin our visual design process with low to medium fidelity wireframes. Right now, we need not worry about the fonts, colors and imagery. We first create the key UI elements, the information arrangement and hierarchy and the user interactions.
As a personal challenge, I decided to design this project adhering to iOS Human Interface guidelines. This choice had two reasons behind it —
1. I had never previously designed for iOS, so this allowed me to familiarise with a new design system and interactions
2. Nearly every application and web interface I had design so far was always based on Material Design and Card UI. So the challenge here was to avoid familiar visual style and still try to make the app feel intuitive and usable
Visual Design
After working through our wireframes and our information design finalised, we finally get to our favorite part of the design process! The visuals for our apps are fully flushed out and made ready for our prototype.
Home Screen — The app divides the user flow into two main tasks
1. Creating Activities, and 2. Looking Around for people and acitivities
The bottom navigation bar gives quick access to major parts of the application that helps facilitate social interactions.
Activity Creation — Creating a new activity is simplified to a singular page with a simple form. All the activities on the app are categorised for tagging and search. You can add people to your activities, make it public for others to request joining it and even share it externally.
Finding People and Activities — A user can look around for people nearby or any activities listed in their vicinity. The search can be filtered using choice of interests, proximity, social connections and a lot more. “Look Around” starts with a simple question asking the user what they are looking to do. A user can pick any category or do a blank search for results matching to all their interests. The results are divided into Activities and People. You can tap to expand the list tiles for more information and send requests.
Also, to leverage some of iOS’ features, I also designed the Peek-Pop options for the search results screen (build with After Effects)
Even though you can keep the subtleties of a design system like iOS, you should not be beholden to them when it comes to addressing a UX need of the app.
Prototypes
To fully demonstrate the app flow, I created a prototype using MarvelApp — https://marvelapp.com/8egge1g
Prototypes help us get a true sense of how the app actually feels when used.
As I underwent the design and prototype process, a lot of challenges and changes came up —
- Change in Navigation model to better make sense of different screens and avoid repeating tasks
• Information arrangements — certain screens had too much text. I had to rethink how to display information in a more concise manner and not overwhelm the user
• Wrong implementation of iOS header size — I messed the status bar + app bar size and had to fix it on ALL the screens AFTER I had completed all wireframes and visuals. (props to Shubham Sorte for spotting it)
This demonstrated how Design is an on-going iterative process and we keep on improving the more we work on it.
User Testing
Finally, we put our fully-flushed out prototype to test with actual users.
A testing protocol was developed to list down the steps and roles for executing the test and debriefing the users. User consent was obtained through signed forms informing them about the way they were being recorded. After the tests were completed, the results were compiled in a meaningful way so as to discern what breakdowns were happening and changes that needed to be made.
The following change requirements were deduced from this initial test.
- Change top right icon on home screen and replace it with the text label “My Activities”.
- Allow quick viewing of events under My Activities
- Redesign List View of profiles, making them look more attractive and compelling
- Add privacy features to limit what information is visible to connections vs non-connections
- Redesign “Shared Interest” meter as no tester actually paid attention to it as realised it later during Q&A.
A|B Test a change
The final task was to take one of the above observed change requirements, and redesign the app for it. This change needed to be an entity that could be quantified in a binary fashion (for eg. click of a button, use of a filter, performing an action etc.)
I went with my the first change of replacing the “My Activities” Icon button with a Text Label button as it was observed during the first test phase that users did not understand what the icon signified and felt lost on navigating to the screen behind it.
Two URLs were prepared using MarvelApp and put to test using UserTesting.com where participants used the prototype and recorded the process, constantly speaking aloud their thoughts and answering the questions on the test script. This test was quite insightful and revealed that it did actually benefit to change the “My Activities” icon to a text label.
Other changes desired —
1. Design a signup and onboarding that explains the purpose and functionality of the app
2. Separate the search for people vs search for activities
3. Make text more readable over images
4. Add “Similar Activities” button to activity results to allow more freedom to explore interest of the user
5. Add more categories
Conclusion
Social apps are moving away from just online existence alone to bringing people closer in reality. If the app experience and interactions are made right, understanding the latent needs of different users, we can create a powerful product to bring people together in a meaningful way. (Hey, if Pokémon Go can do it, why can’t you!) This first iteration of Fippl was an attempt in trying to achieve this goal. More changes will come as the app is built and goes through the first round of actual use.
Beyond creation of a product, this was a great exercise to apply all the skills learnt in this Interaction Design Specialization —Human-Centered Design, Design Principles, Social Computing, Input and Interactions, UX Research and Prototyping, Information Design, Running and Analyzing Experiments — Design can be a much more productive and creative process if we follow a structured stepwise approach to it, constantly keeping user requirements in mind and designing to solve a problem with more than pretty pixels.
Thank you for reading this case study. If you liked my work, check out more on the publication 10to24. Also, follow my facebook page where I share more such design goodness and latest articles worth reading.
P.S. — If you are an iOS developer who would be interested in building this app in your free time, tweet me @theRonnicle. You’d be a cofounder 😋
