Overview

Length

3 weeks

Role

Designer

Tools

Figma

Team

Solo

View prototype

Prototype

View prototype

Case study

Making social media more social and manageable

Yappy Hour is a social media app which puts the focus in managing and organizing your social life, something many modern social media services struggle with.

What did I expect? What was I trying to solve?

Yappy Hour started out as just a simple concept, make a social media app that's more time based and easy to sort through. While there are some instances of this out there already, most of them are focused around images rather than text. Yappy Hour has a built out direct message system as well with the option to make groups as well.

What did I end up with?

Yappy Hour ended up as a light-hearted and simple prototype. The calendar feature to sort through posts easily is what I'm the most proud of. The app encapsulates what I envisioned for it originally, an app that can get anyone to talk about anything.

What did I learn?

I learned many valuable industry standard Figma skills throughout this project. Designing on an 8-pt grid, utilizing color styles and variables with a 100-900 system, and utilizing Figma's built in logic to create very built out interactions. This project heavily sharpened my Figma skills.

Process

Project Motivation

Developing Figma skills

Project Type

UI prototype

Skills Learned/Used

Figma

View prototype

Prototype

View prototype

Overview

Systematic UI design approach

8-pt grid

While designing this project, I worked on an 8-pt grid. I made sure to adhere to this grid except when dealing with text where I switched to a 4-pt grid to give me more control over the precise spacing needed with certain type. Designing on this grid is important because when the prototype is sent to a developer, the 8-pt system will translate easily to programming languages.

Color systems

I decided to utilize color variables in this project. The color variable system is a setup where you utilize a single hue with differing saturation and lightness (often labeled 100-900). Rather than sticking to plain whites and blacks, adding a drop of the brand and accent colors into the design gives a feeling of synchronization and balance. This system also makes it easy to organize colors and make large, system-wide changes if needed.

The box model

I created all the elements of the project with the box model. The box model is a system where designers will start with small assets and incorporate these within bigger and bigger assets. This allows for universal changes to be made within smaller assets. It also translates to developers as every element in programming languages is encapsulated within a box or div section.

Reflection

What could I have done differently?

Looking back on the project, I wish I had more organized color style naming conventions. This was my first time working with color styles and I have since adapted a more organized naming system for the color styles.

Final thoughts

I'm happy with the finished product considering that it was just a UI project and had no UX research put into it. The final prototype functions well and has a lot of advanced Figma features in it. I'm glad I took on this project, as it taught me a lot and helped me further sharpen my Figma skills.

Explore some more

Home

Projects

About