UI/UX

UI/UX

UI/UX

YipYap

YipYap

YipYap

OVERVIEW

OVERVIEW

OVERVIEW

Role: UI designer and UX researcher


Project Duration: April 2021 - December 2021

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.

Problem Statement

Problem Statement

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

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.

Guiding 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.

Defining the Design

Affinity Mapping

The MosCow Method

Design & Testing

Mid-Fidelity Wireframing

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

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.

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.