The Seats

Software: Figma & Adobe Illustrator

Objective

The objective of The Seats is to empower the youth through educating them on the political environment and inspiring them to be more politically engaged by gamifying civics and creating a safe space for people to share their thoughts and interact with community leaders.

My Role

UI Designer
I established the design system, provided feedback on the pre-existing app and corporate website, and designed key screens for the arcade app feature.
Graphic Designer
I created graphical elements that were to be used as game assets.

Design System

Objective & Background

The Seats was going under a rebranding for a more consistent design, and creating a new design system is the first step.
The inspiration behind the color schemes were the two most popular political parties in the United States- democratic and republican.

Challenges

Creating a design system that satisfies the purpose of the product and aligns with the organization's vision
‍It was difficult to ensure that the components I designed effectively addressed the core functions of the product while also representing the broader goals and values of the organization.

Solutions

Consistent meetings with the founders
Since The Seats was a new start-up, I had the privilege of forming a close relationship with the founders and having regular meetings with them. This enabled me to gain a deeper understanding of the organization's goals and visions as well as the purpose of the product.

Impacts

Improving design efficieny and productivity by establishing design consistency from the get go
By defining the design system, this ensures that the design is consistent from the very beginning. This also improves design efficiency and productivity within the design and development team as it sets guidelines as well as providing pre-defined components and hex codes.

City Background

Objective & Background

I created this city background, used for some of the informational games on the app, on Adobe Illustrator.

Challenges

Deciding what aligns with the product's vision
I was given ambiguous guidelines for designing the background regarding to art style and the scene.

Solutions

Working closely with the games project lead
Through meetings and messages, I was able to better understand the vision of the informative games. I learned that the game project lead envisioned more retro-styled games, so I opted for a low-poly art style by leveraging pixel art. I opted for a city background to infuse the idea of civics more due to how when we think of political environments we often think of capital cities.
I kept the game project lead up to date with different design iterations until we were able to create a satisfactory design.

Impacts

Set the guidelines for future games
The game I have been designing for is the first of the set of informative games this product will have. Therefore, this game establishes the design guidelines for other games- as part of the product's goal was to have an overall consistent design throughout all elements of the product. This in turn also makes future game design works more efficient as there will be designs to reference back to.

Arcade

Objective & Background

One of The Seats’ main features is an arcade, where users can play games and learn more about historical events. The key screens are a homepage, a screen showcasing a certain game, and a leaderboard showing all the scores from different users.

Challenges

A challenge I faced was making the leaderboard screen due to how there was so many potential leaderboard designs I could follow through with. I ended up creating a variety of different designs and asking for feedback. Once I finalized the design, I started exploring color options. I’ve made 56 different leaderboard screens showcasing different stylistic and color choices. The team voted with leaderboard screen they like the most.

A leadership board design that aligned with the product
A challenge I faced was making the leaderboard screen due to how there was so many potential leaderboard designs I could follow through with.

Solution

Creating different designs of the leadership board screen
I've created a handful of distinct design styles for leadership boards and from there I explored different color options. From there, I generated up to 56 different potential leadership designs. I used this approach to explore all the potential leadership board designs.

Utilizing the design system, working closely with the founders, and leveraging my understanding of the project vision I was able to leverage an iterative refinement approach. I narrowed down the designs to a handful of designs, where the design team and founders decided on the final design.

Impact

Closer to deployment
The arcade is a key feature and with a design finalized, the product is closer to deployment.
Increased user engagement
The gamification nature of arcade will increase user engagement on the app. Additionally, the educational nature of the games will inform users about civic topics, allowing them to engage with other aspects of the product.

Arcade Home Screen