Chippr App UI/UX
Here's the Chippr Mobile App I designed from the ground up between 2016-2017
1. Project Overview
What is Chippr?
A San Diego based startup focusing on developing social apps for minority communities. Chippr is the second in its series and it is a genuine LGBT social and resources application. Its main function is to help people make genuine connections with each other and allow them to discover resources they didn't otherwise know exist.
What will you find here?
1. Multiple researches conducted that led to the final implementation.
2. User persona and how I refined the user workflow.
3.. Usability testings and the changes I made.
2. Research
UX Competitors Analysis and User Interviews
By researching the user experiences of our competitors through the app store reviews, online forum survey and in-person interviews, it provided me with an insight of the existing user experiences, both the good and the bad. It allowed me to paint a better picture of what the users wanted.
Conclusion
I noticed a few things:
1. Currently available LGBTQ apps are all focused on dating (thus putting profile picture at its focus).
2. A lot of users complained about the lack of authenticity and how useless those apps are beside using it for hooking up.
3. Some people feel trapped because they have no other easy ways of meeting LGBTQ people.
3. Users Personas
Personas
In order to understand the user journey further, I compiled the user interviews and researches (thanks Carlos Hernandez for helping me with that), I was able to create three personas. Each of the personas were split into three sections: facts (age, status, income and etc.), behaviors, needs & goals.
Key Findings
Through understanding the customer journey and personas, I was about to conclude the following findings:
1. People want a real life experiences on an app where personality and common interest also play an important role in meeting people.
2. Create an interface where it is safe for people to browse the app in public without "outing" people.
3. Easily access, share and ask LGBT related questions and information (finding LGBT related resources).
4. Mockup and Workflow
Mockup
With the key findings in mind, I started to work on a low fidelity mock up using Sketch. The goal is to create a user interface where profile pictures aren't at the center of user's focus, but instead, the focus is on user's personal posts and recommended local events. Through this we can achieve a safer, more informational and more genuine experiences for the users.
Workflow Testing
After I created our first low fidelity mockup using Sketch and Invision, I send it out to a small sample of users to test out the workflow. I found that the majority of them did not like the fact that we forced them to register before they even get to see what this app is about (as seen in #1), so we quickly modified the workflow to where login is only required when you want to comment on a post or register for an event (as seen in #2).
5. Design and Usability Test
Design Clickable Mockup
After creating my color palette, I used Sketch and Invision App to bring the newly created workflow into high fidelity design. I created clickable mockup through Invision which was later used for usability testings. User would simply download the mockup app through a personalized link to test out some of Chippr's features on their phone.
Design and Usability Test
Usability tests are mainly designed to check the user experiences of the features that are heavily impacted by their usability. Several usability tests were conducted among groups of 8 people. One of the tests asked the testing subjects to perform the following tasks:
1. Draft a post to post on Chippr.
2. Upvote a post you like.
Result
Among 8 testing subjects, 2 of them clicked the wrong button when asked to draft a new post on their first try and averaged about 4 seconds when asked to figure out where to upvote a post.
However, after our UI design change, all 8 testing subjects got it correct on their first try when performing the first task and took less than 2 seconds to perform the second task.
