HADA(하다) mobile app design

Overview

HADA is a B2C mobile app developed by a team of five, designed to revolutionize how users memorize information through spaced repetition techniques.

Its core mission is to address the unmet needs of users that existing language learning apps overlook, providing a more effective and engaging solution for knowledge retention.

Role

Primary UX Designer / Scrum Master
User Research, Interaction, Visual Design, Brand Design, Prototyping & Testing, Product Marketing

January 2024 - May 2024

Background

HADA is a student-led project that helps users learn and memorize different terms through the use of spatial repetition. View project's GitHub.

Our primary goal for the app was to offer a highly customizable and accessible platform that could benefit not only students but anyone looking to enhance their daily productivity. As the Lead UX Designer and Scrum Master, my responsibilities included the following:

Understanding the problem

Given the competitive landscape of the market, it was crucial for us to identify our key competitors and analyze their strengths and weaknesses. This allowed us to pinpoint opportunities for differentiation and innovation within our app.
My research determined:
Our main goal was to create an app that was able to be mapped as 10s for each of the features in comparison to the competitors.

Planning

To ensure we had a viable MVP within our timeline, we used post-its to map out the desired features and establish the app’s overall flow. This process allowed us to prioritize the most essential features and pages, ensuring a more focused and efficient development.

Ideation

Our team leader originated the project idea from scratch, giving us plenty of creative freedom to explore various design options. This flexibility allowed us to experiment with different typography and color schemes, aligning the overall vibe of the app with the vision our leader had in mind.

Wireframing

The team drew inspiration from Spotify, envisioning each study set as an album and each word or term as a song. Since Spotify is widely recognized for its intuitive design, we felt that adopting a similar structure would make the UX familiar and easy for users to navigate.
However, I redesigned the layout of the "song page," making the flashcards more prominent. Since the primary goal of the user flow was to emphasize the flashcard feature, this adjustment ensured it remained the focal point of the experience.

Components

To maintain consistency throughout the app, I designed simple, reusable components and formatting that could be applied across multiple pages from the start. Given the development team’s unfamiliarity with Figma, I also created straightforward guides to help them navigate the design process efficiently.

Sprint Summaries

Throughout the project, we organized our work into weekly sprints, using Jira to track and prioritize tasks effectively. At the end of each sprint, we presented our progress to mentors for valuable feedback. Additionally, we conducted user testing on new features and changes to ensure they met our goals before moving on to the next phase.

Version Releases

For each sprint, we released a new version of the app, so below I included the first and last. To view more on our github, click here!
v0.3.1-alpha - signifying three sprints and a minor context feature (CRUD to cards) added to this release.
Notes: The app is in experimental dark mode
Bug: On android the status bar may appear in light-mode
As a user I am able to:
-
add playlists (forgot to show in video)
- add, remove, and update cards
- listen to cards in preview and in practice (listen to pronounciations)
- practice flashcards
v0.5.0.alpha
Notes: Library UI updated
As a user I am able to:
- search through my playlist in the library tab
- change the theme
- add a profile picture
In practice Session you may now study indefinitely with a counter
"as a user I am able to:"
- study indefinitely
- see how many times I've studied the entire set

High Fidelity Wireframes

Given our strict timeline, we had to concentrate on specific frames and features within the app. Below are the key frames that the team referenced during the development of our MVP.

Marketing and Branding

This project was part of Boston University's Spark! program, which gave our team the chance to showcase our app to prospective investors and other interested parties. To prepare for "Demo Day," I refined the app’s branding and designed an infographic and poster for presentation following our on-stage demonstration

Future Plans

While we initially focused on Korean due to time constraints, our vision for HADA includes expanding its capabilities to cover a broader range of subjects. By incorporating features like image importing for individual flashcards, HADA aims to evolve into a versatile learning tool suitable for students and users across various disciplines.