• Zaahah

  • Social Networking

  • Zaahah

  • Social Networking

  • Zaahah

  • Social Networking

  • Zaahah

  • Social Networking

Leading the Future of Extracurriculars with Secure, Rewarding, and Inclusive Experiences

Leading the Future of Extracurriculars with Secure, Rewarding, and Inclusive Experiences

Project Goals

Designing for The Possibility Company was truly a challenge, as I was managing three projects simultaneously. The main project, Zaahah, involved designing the user experience for students, who were the primary users. Additionally, I developed an administrator mode, allowing parents or teachers to approve requests, analyze student data, and manage clubs and activities. For the third project, I led a Junior Designer in aHa, a virtual wallet that rewards students with virtual coins for participating in in-person activities. All solutions were created for both desktop and native mobile platforms.

1.
1.
1.

Role

Lead UI/UX Designer

Role

Lead UI/UX Designer

Role

Lead UI/UX Designer

2.
2.
2.

Duration

October 2021 - March 2022

Duration

October 2021 - March 2022

Duration

October 2021 - March 2022
3.
3.
3.

Tools

Figma, Photoshop, Illustrator, Miro, Trello.

Tools

Figma, Photoshop, Illustrator, Miro, Trello.

Tools

Figma, Photoshop, Illustrator, Miro, Trello.

4.
4.
4.

Processes

End to end, Discovery, Workshops, SWOT, User Interviews, Benchmarking, Research, Customer Journey Map, User Persona, Flows/ Wireflows, Information Architecture, Wireframing, Prototyping, Design System, Usability Testing, Leadership Experience.

Processes

End to end, Discovery, Workshops, SWOT, User Interviews, Benchmarking, Research, Customer Journey Map, User Persona, Flows/ Wireflows, Information Architecture, Wireframing, Prototyping, Design System, Usability Testing, Leadership Experience.

Processes

End to end, Discovery, Workshops, SWOT, User Interviews, Benchmarking, Research, Customer Journey Map, User Persona, Flows/ Wireflows, Information Architecture, Wireframing, Prototyping, Design System, Usability Testing, Leadership Experience.

Problem

The social networking platform required administrators who could modify, edit, and supervise the app to ensure a safe space for students.

Solution

Developed an administrator mode that enables designated individuals to manage and enhance the social environment, ensuring a safe space for students.

My Role in Zaahah

Research & Benchmark

I researched various competitors and conducted a comprehensive analysis that delves into their design, pricing, user ratings, strengths, weaknesses, and potential areas for improvement. Based on this analysis, I've developed strategic suggestions to differentiate our product in the market and address unmet needs among our target audience.

Information Architecture

Since our product is entirely new and covers all aspects, I've developed a Information Architecture. This helps us understand how users will explore features and engage with content. It's like drawing a map for them, ensuring they can easily find what they need and make the most of our product.

Design
System

Designing the DS for Zaahah posed a significant challenge, not only because it started from scratch but also because this Design System would be utilized across other products of the company, such as the aHa Wallet and the website. Therefore, it was crucial to define the visual identity and create consistent components.

Leading
Projects

As the principal designer, I led a small team of junior designers who were concurrently engaged in other projects. Therefore, I was responsible for reviewing and approving their ideas. To facilitate this process, we established daily meetings and maintained constant communication.

Administrator Mode

This SaaS product required an administrator mode and a CMS capable of visually presenting data about users who were registering and utilizing our platform. Additionally, I spearheaded this project while simultaneously developing new features.

Native Android & IOs

This project was designed and developed for web responsiveness and native mobile applications, ensuring they can be downloaded from both app stores or accessed online.

Leading
Projects

As the principal designer, I led a small team of junior designers who were concurrently engaged in other projects. Therefore, I was responsible for reviewing and approving their ideas. To facilitate this process, we established daily meetings and maintained constant communication.

Administrator Mode

This SaaS product required an administrator mode and a CMS capable of visually presenting data about users who were registering and utilizing our platform. Additionally, I spearheaded this project while simultaneously developing new features.

Native Android & IOs

This project was designed and developed for web responsiveness and native mobile applications, ensuring they can be downloaded from both app stores or accessed online.

Leading
Projects

As the principal designer, I led a small team of junior designers who were concurrently engaged in other projects. Therefore, I was responsible for reviewing and approving their ideas. To facilitate this process, we established daily meetings and maintained constant communication.

Administrator Mode

This SaaS product required an administrator mode and a CMS capable of visually presenting data about users who were registering and utilizing our platform. Additionally, I spearheaded this project while simultaneously developing new features.

Native Android & IOs

This project was designed and developed for web responsiveness and native mobile applications, ensuring they can be downloaded from both app stores or accessed online.

Challenges

  • Time Constraints: I was managing three projects simultaneously, additionally, I was tasked with creating the design system, making time the primary challenge.

  • Limited Wireframing: Due to the tight deadline, we had no room for creating wireframes. We had to move straight to building the final product.

  • No Time for Testing: The client explicitly requested to skip the testing phase, planning to test the product in a live production environment instead.

broken image
broken image
broken image

User Persona

The administrator mode was designed for professors and parents who wanted to supervise and ensure the safety of Zaahah. The target users were between 30 and 45 years old, primarily located in the United States, with a focus on Chicago.

broken image
broken image
broken image

Prioritization Matrix MoSCoW

Planning and organization were crucial for this project. After understanding the business goals and discussing them with the client, I decided to create a MoSCoW Prioritization Matrix. This approach helped identify what we should focus on, must achieve, could include, and won’t pursue.

broken image
broken image
broken image

Tasks Prioritization

However, juggling multiple projects required careful time management. To stay organized, I structured my activities as follows:

broken image
broken image
broken image

Information Architecture

We had to organize a large amount of sections and information, including graphics, forms, inputs, dates, and a complex dashboard. Thankfully, much of this information was already structured in the "Student/Public" view, so our main task was to assign and redesign these sections into an administrator panel that would be easy for our target users to understand.

broken image
broken image
broken image

Desktop Design

This project was designed with a desktop-first approach, as the parents and administrators would be using their personal computers.

broken image
broken image
broken image

Mobile Design

However, we also explored a mobile native version to provide flexibility for admins who might need to manage tasks on the go, ensuring it would be simple and user-friendly.

broken image
broken image
broken image

Design System

Additionally, I created the design system, which needed to be versatile and work across three different platforms: Zaahah, aHa, and the administrator mode. This design system helped a lot! and generated consistency across all products.

broken image
broken image
broken image

Zaahah for Students

For this project, we decided to create only low-fidelity wireframes for mobile since we adopted a mobile-first approach. This allowed us to explore numerous ideas and conduct testing.

broken image
broken image
broken image

Problem

School students in the United States have been avoiding in-person activities, primarily due to a lack of motivation as many need to work to cover their own expenses.

Solution

Developing a platform with a native mobile app that rewards students with virtual currency for participating in in-person activities, which they can redeem for real-life benefits.

Prototyping Mobile

Starting with the mobile-first approach was intriguing because we aimed for a product that stood out from what was already in the market. This approach enabled us to experiment with iconography, various types of cards, and delve into gradients or colors that would capture the attention of teenagers

broken image
broken image
broken image

Prototyping Web

The website presented an even greater challenge as we experimented with various types of navigation. We divided it into three panels: the right panel contained the menu and some options, the middle panel displayed the content and feeds, and the left panel housed the virtual wallet and chat. This approach was highly creative and explorative, breaking away from the common conventions.

broken image
broken image
broken image

Leading aHa

aHa was a virtual wallet integrated with Zaahah, where users could deposit virtual coins earned from participating in in-person activities. It also offered the opportunity to buy and sell NFTs. I led this project, as I was already designing two other projects for the company. In this role, I mentored and guided our junior designer through the process.

broken image
broken image
broken image

Problem

We needed a virtual tool to deposit and manage coins that students could use.


Solution

We created a virtual wallet integrated with the main app, allowing students to manage their coins by transferring, gifting, or saving them.

Synthesis & Retrospective

Outcomes & Metrics

Outcomes & Metrics

Outcomes & Metrics

What we did well

What we did well

What we did well

What I would improve

What I would improve

What I would improve

Final Design

Final Design

Final Design

More work
you might like