Case Study.

TOGATHRE
Scroll
img

Togathre App

UI Designer

Overview: Togathre is an event management platform focused on personalized recommendations to local events. Starting from the beginning, I became part of the team when the low-fi wireframes were created.

Responsibilities: I participated in some the UX Research (user testing...), but I was mostly focused on the UI (wireframes/prototyping).

Tools: Figma, XD, Illustrator

Problem Statement

Student's ability to enjoy the full high school & college experience isn't easy anymore. They don't have a way to access personalized activities.

User Persona

img

The Solution

In this hybrid world, where students can connect virtually and in person, they seek ways to organize activities and hang out with other like-minded classmates. Platforms such as Meetup, Eventbrite, and Facebook do not accommodate Gen Z's needs with regard to social planning, feeling safe on campus or in their local community, and keeping in touch with their friends. With Totathre, students can browse friends' events, attend events, feel safe by knowing the restrictions and requirements, and socialize within a community.

The Start

I joined the project at a time when the design team was already working on low-fi wireframes. My role on the team was to update and help move the project forward.

img

User Flow

Prior to beginning the redesign process, we needed to understand the function of each page and the different user flows. The creation of a user flow allows us to ensure that we don't miss any opportunities or mistakes.

img

Moodboard

As our target users love it, we love dark mode!

img

First Hi-fi

This is the first hi-fi design iteration of the "create an event" flow. Using this flow, students can create custom events and share them!

img

Inspiration, Components and Atomic Design

In order to create a modern and simple design, I spent a lot of time researching. Thus, I was inspired by Dribble and specifically by Apple and iOS templates. I liked iOS Templates because all their wireframes were based on components (duhh, it's Apple) but it forced me to rethink my style process, so I started using what we call "atomic design". It made my design process much easier and more cohesive.

img

Restyling and Accessibility

A range of iterations involving atomic design and iOS Standards hi-fi were completed based on feedback from testing, with a focus on enhancing contrast and improving readability and accessibility.

img

Logo Re-design

The second high-fidelity testing was almost ready, but we still had one more thing to do: redesign our logo!​Initially, we started with something standard, but we needed a logo that relates to the app, something clean and modern.

This is an overview of the evolution of the Togathre logo from its different names, styles, and colors to the current and final version.

Before and After

See how our splash page design and logo evolved from lo-fi to hi-fi here.

img

Ready to Test!

We then needed to test our new product. To do so, we had to update all our wireframes and build a perfect hi-fidelity prototype!

Test it Yourself!

Feel free to test, review, and/or comment on our prototype. We are still evaluating feedback and improving as design always gets better!

Prototype

We are Close to Launching!

Development is underway as we continue to build for all available use cases.

Let's connect!

ines.hamadi109@gmail.com
|
(510) 610-2557