Meetup App

The Meetup app was a school project for a Design II class. For this course, I had to pick a meetup/organization, and I chose J-KURU organization — a group of Japanese language & culture enthusiasts in NYC.

Class:

Design II

Year:

2019-2020

Goal:

Conduct Field Study. Branding. Design Meetup App

Before I come up with the design solution, I had to conduct research. The goal of the field study was to learn more about the organization and determine the best solution for the users.

Field study

Field study helped me understand the profile of people that visit J-KURU meetups. By attending the meetup, I observed the participants' behavior. I interviewed and asked questions, and by collecting the data, I was able to proceed with the next steps of my research.

Building personas

After gathering the data, I was able to construct personas Aiko and William.

Terms

Once I finished building Personas, it was time to define key terms. Welcoming, Respectful, Social, Nerdy were obvious choices based on the data and my observations. Future designs need to evoke these four keywords.

Journey map

Scenario: The user knows the Japanese language and wants to find a group of people that also speak Japanese. The user is looking online for Japanese groups / meetups / communities.

User frustrations, goals, wants, and needs

Solution

By analyzing data, I learned that my design solution needs to have these features to solve user issues:


Guarantee that the user will find someone to speak and practice the Japanese language by joining the meetup


Available information about the meetup demographic (outline the number of English and Japanese attendees per meetup)


Emphasize the benefits of attending the event (Safety, Learning, and Social)


Free, easy, and fast to RSVP for a meetup


Solution: A mobile app that will allow the user to search and RSVP through all meetups of J-KURU organization. Features of the app will include setting up preferred meetup time; show ratio of Japanise and English speakers in a meetup; show safety aspects of the meetup location; smooth and easy RSVP experience; ability to reach out to the attendees of the meetup.

Mapping Meetup app solution

With the solution defined, I was ready to map out low fidelity wireframes of the Meetup App. I created low fidelity screen sketches in InVision.

You are welcome to look at the InVision project by visiting the link.

Stylescape

With the full app architecture laid out, I was still not ready to design high fidelity screens of the Meetup App. First, I had to think of branding and visual design. Creating a Stylescape helped me present the vision of the design direction I intended to take.

Logo redesign

The old logo needed an update. I was looking to create something that will yell the concept of Japan! I wanted an obvious and clear solution that conveys the purpose of the meetup. Therefore I decided to go with the Red circle and typography "Japanese Conversation". After many iterations, I came up with the new logo design.

New Logo

Text styles

For the meetup app, I defined six text styles that satisfy the app needs. For Headlines, I used Neue Kabel, and for paragraphs and captions, I used Myanmar Text.

Colors

I needed a color pallet that will address all the needs of the app. I used primary Red to emphasize the brand in combination with the neutrals. Other colors I had to develop are Accent blue and secondary yellow.

Meetup app Colors

Icon concept

The design of a small element is as important as the design of a whole page. Therefore I took some time to think of the icon design. I decided to base the iconography style out of the elements of the logo. Therefore, a circle with a fill became a "home" icon, and this design choice defined the look and feel of the whole icon set. The icons set is bold and with a fill where possible.

Iconography Concept

Illustration concept

After researching illustrations style of products available in Japanese culture, I learned that Outlines and 2D characters are trendy and common in the Japanese community. Therefore I created meetup app illustrations with this in mind.

Illustration Concept

Keep designs consistent

Big or small, every project should be built with a Design System. Using the Design system helps achieve better consistency. The inspiration for the meetup app design system came from the Atomic Design Methodology.

From Low to High fidelity designs

Dashboard Page

Meetup RSVP Page

The design system in place and visual identity established made the final process execution fun, consistent, and quicker.

The meetup app features included showing the ratio of English and Japanese speakers and displaying the safety of the meetup location.

You are welcome to look at the Figma project by visiting the link.

Go back to Work page or visit:

Challenger Bank — Hydrogen

Programmatic Creative — Clinch