YipYap
Role
I managed and designed this project on my own. Although, a large part of my research did require collaboration with a small group of three other students throughout the usability testing process. Additionally, I worked on creating experience maps, interface elements, and designs, wireframing, and prototyping. I used Adobe Illustrator to create a majority of my branding and icons, and then Adobe Xd and Figma simultaneously to account for my project and industry requirements and standards.
Project Duration
April 2021 - December 2021
Overview
YipYap is a mobile application based on the popular and anonymous discussion app named Yik Yak. This application was created for my senior capstone project, and I had the opportunity to build and present this work during my Fall semester at California State University, East Bay in 2021. My main objective in creating YipYap was to challenge my UX research and UI design concepts. During this time in my academic timeline, I was set on pursuing product design as my career post-grad, and this project acts as my first introduction to composing and presenting UI/UX concepts to a classroom of 30 other design students.
I wanted to redesign my own take on an application that I was familiar with, using the concepts that I had learned to improve the design choices and functionalities of the app that I was basing it on. YikYak fosters community building and discussion via their app, and I wanted to translate that to YipYap by introducing a satirical twist instead. The name of this application is synonymous to "blabbering". It is a shared online space where users can share their frustrations and thoughts in a community filled with other like-minded folks. Although despite its light-hearted purpose, YipYap encourages community and safety above all.
Brainstorm
PROBLEM STATEMENT
Everyone needs a place to vent, but talking to others about personal problems and thoughts can be intimidating. Not many people have a space to go to, but a healthy outlet can be social media. Yip Yap serves as an online journal where users alike can share their frustration and thoughts without the fear of being judged. It is a shared space that promotes humor within a community.
The target audience for this application is young adults and college students between the ages of 18 to 40 years, with a majority of these numbers being 48% women, 30% men, and 22% being undefined. These age groups face difficult growth in areas of academia, mental health, and personal obstacles, and it can be challenging for them to find a space to vent their frustrations, especially in modern society where technology and media make up a majority of their exposure.
I gathered these numbers from a general survey I had sent out via Google Forms. These forms asked for the user's gender and age, whether or not they were familiar with Yik Yak, and if they had used the application or any other like it. I sent it out to each of my classes during that semester, which compiled a sample size of 115 participants.
COMPETITIVE AUDITS
The most comparable market application is Yik Yak. It shares the same space of being an anonymous thought-sharing forum, but its initial iteration garnered much negative feedback due to its lack of user moderation. Aside from this, the branding of the application is terrific. The colorway of the logo is apparent throughout the mobile application, and the navigation, as well as user flow, is straightforward and easy to use.
The Emotional Baggage Check app is an online space for users to share their thoughts anonymously while being able to receive feedback from others through music and text. This feedback is limited to the one other person who decides to respond to someone else's baggage. It's completely anonymous on both ends and the addition of music sharing provides a more catered experience for both ends. The branding of this application is also very poignant and easily recognizable. The brand colors are purposely chosen to replicate a calm and safe space, and the visual elements provide a charming addition. This application does a great job of keeping its navigation simple, and I especially like how you do not need an account to write or receive baggage.
User Research & Interviews
My research process began with sampling the users that would ideally use the project in question. Since this project was created during my last semesters in college, I decided to use both quantitative and qualitative research methods in gathering the demographic and behavioral datasets. My quantitative data was gathered after having sent out a Google Form survey to the students of each of my classes during that time. In these surveys, I asked about their age, gender, and major, and whether or not they had used or were familiar with applications like Yik Yak. I gathered a sample size of 115 participants.
As I went further into my research for my application, however, I switched over to a more behavioral approach in order to gain a better understanding of a user's attitudes and feelings toward what I was creating. This portion of my user research required that I interviewed at least three other students in my class. I asked them primary questions first, which focused on getting to know them and their basic habits on social media. As I got to know them better, I rolled over into the second set of questions, which aided in my understanding of how they might react to using an application that had the concepts I was replicating.
PRIMARY QUESTIONS
- Can you please state your name, age, and occupation?
- What is your favorite color? Does that color have meaning to you?
- How often do you think you are using your mobile devices? Can you list the number of applications that you use daily?
- Do you currently utilize any social media applications? Can you list the applications and state why you might like them?
SECONDARY QUESTIONS
- Are you currently in school? What school or university do you attend if any?
- Are you considerate and/or aware of your mental health? Do you currently utilize any resources to aid in your mental progression and stability?
- Do you utilize any mobile applications currently that replicate a space for you to share your thoughts? And, do you think having this space in a technological world is necessary?
- If you did answer yes to the previous question, what applications do you currently use? And what do you like and not like about them?
- Are the keen on privacy and anonymity and do you wish these apps utilized those features?
- How important is connecting in social media for you? Do you think it is necessary to share feedback or can you utilize a social application that does not have that?
TAKEAWAYS
1. Socializing in a social media application is essential. The connectivity is what makes the application fun and interesting.
2. Social interaction in an application isn't tied to one popular practice. Learning to balance and implement simple interactions between users is what makes an application strong.
3. There is no such thing as an original idea. It is okay to reference former applications that were successful and align with your own application goals, so long as credit is given where credit is due.
PERSONA(S) & USER JOURNEY MAPPING
SCENARIO
Both Eliza and Marcus are using the application. Eliza views the forum page and reacts to a post while Marcus creates and uploads a post and views his profile thereafter.
DEFINE
APPLICATION ARCHITECTURE
Affinity Mapping
The MosCow Method
DESIGN & TESTING
MID FIDELITY WIREFRAME
User Testing & Feedback
1. Reference contemporary social media applications that utilize darker colors to gain insight as to why some features are designed the way they are.
2. Cross-reference a color contrast checker to ensure that text is still readable on-screen when placed against different backgrounds.
3. Have a consistent navigation bar.
4. Take note of texts and images reaching too close to the edges of the screen. Place the frames in a phone prototype to test for readability.
STYLE TILE
FINAL DESIGN SCREENS & LAUNCH
Happy Flow / Path
The general census of the user testing was overall adequate. They appreciated the consistent navigation bar and liked how the text was readable against the darker color palette. They mentioned too that the overall theme of the application matched a lot of familiar social applications they used frequently.
Edge Case
The application does not restrain users from posting content, however, there can be issues regarding deleting multiple posts or notifications.
PROJECT TAKEAWAYS
Challenges
This is my first project utilizing the prototype features in Figma. I had originally laid out the screens using Adobe Xd, but ultimately decided to switch over to Figma to match a more standardized approach.
Going Forward
I think diving deeper into competitive applications would have been more useful in determining the visual designs of the application. The colors and the layout match too closely with Tumblr’s format, so if I were to revisit this project again I would attempt to take a different design approach so as to create something new and enticing to its audiences.