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.
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 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.
After gathering the data, I was able to construct personas Aiko and William.
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.
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.
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.
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.
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.
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.
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.
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
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.
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.
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.
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: