Context
What was done previously?
To plan our 9 weeks, we took a look at the insights provided by the previous team in Phase 0. Through user research, they discovered a few things:
Community wants:
Decolonizing the content:
Although these insights were helpful in providing our team with the context of the product space and Taino community, the research didn’t dive specifically into the design of existing language learning apps.
The Problem
Taíno is a sensitive topic.
Some constraints:
A 9 week deadline to wrap up before the end of 2023.
No Project Manager. Team leads have to take on extra tasks.
Unclear product direction. The product is still in its early stages.
❗
Integrate Taíno language learning into a mobile app that is as transparent, trustworthy, and decolonized as possible.
Our Design North Stars:
Keep it Concise. Be clear and straightforward.
Build Trust. Work with rather than for the community.
Expect Feedback. Iterate, iterate, and iterate.
Research
Filling in gaps in knowledge.
Since the competitive analysis done in the previous phase didn't dive deeply into a design perspective, we conducted research ourselves to better understand the language learning product space.
Competitive analysis of Duolingo.
Competitive analysis of Drops.
Competitive analysis of Babbel.
Many ideas were being generated in the first two weeks of cross team calls. Although all the ideas were valid and important to the overarching product goals, we began to realize that many of the ideas were not in scope for our phase.
For example, our research and stakeholders wanted to have some sort of community feature. My co-lead and I advocated for what we felt was important for this phase: getting the structure of at least one lesson figured out.
The design team made sure to let our stakeholders know that we did want to eventually implement their ideas, but we had to focus on building the main focus of the app experience first.
Personas
Dancers like Kate and Kyra struggle to find dance classes that best fit their needs
User Flows
Laying the foundation.
With the scope defined, our team could now envision how users would travel through the three sections.
Our team started with a barebones version of the flows to get started.
With a basic structure in place, we were able to make changes as we continued receiving feedback. As time passed, details were added, while some were moved to our backlog.
Spanish version placed on backlog due to time constraints.
Thinking about edge cases.
❗
Now that we have 3 sections, how should be order them to make it as engaging as possible?
What is the best way to avoid friction?
Using our research as guidance.
Using our insights from looking at Duolingo, we decided to follow a similar order to their app. We wanted our users to be engaged in the content as soon as possible to avoid dropping off.
No fluff, just straight to the content.
Wireframes
Building the interface.
A no bad ideas mindset.
We set a goal of generating as much variation as possible when sketching out ideas for how the screens could potentially look like. The learning activities in particular gave us lots of space for exploration.
We then narrowed down our options as we moved into low-fidelity wireframes.
Lots and lots of sketches.
❗
Our client expressed interest in incorporating a mascot in the app experience.
What should the mascot be?
The main concern from the team was choosing something culturally appropriate.
With the help of UXR and UXW, we decided on the colibri (hummingbird) as a temporary placeholder. The colobri is representative of knowledge in Taino culture.
.png)
The colibri helps guide the user through the app.
❗
The intro experience was too text heavy.
Let's fix that.
With the help of the UX Writing team, we decided to incorporate a quiz format into the intro experience.
This would make it feel more like a learning activity, and not like a lengthy article.
Before: Heavy text felt redundant.
After: Quiz structure makes learning interactive and helps highlight key points.
Visual Design Direction
Representing Taíno culture.
Our apprentices spent time gathering resources from our client's curriculum and through other online sources. This helped us begin visualizing how to incorporate colors and imagery from Taíno culture.
Samples of items from moodboard.
Visual Design Direction
Keeping it consistent.
To maintain consistency as we ideated asynchronously, we worked with a 16px grid.
Building screens on a 16px grid.
With the screens all laid out, we began to turn our elements into components to start the foundation of a design system.
We followed the Atomic Design System to effectively organize our components for future use.
Atoms and molecules for buttons.
Responsive activity title.
Answer cards and tiles with variants.
Final Designs
Learn Taino with ease.
Users get a glimpse of what the main learning experience will be like, as soon as possible.
Full Prototype:
Colibri was well received by concept test participants.
Audio to implemented in Phase 2. Our client expressed interest in working on this.
Adjust the answer tiles. Not all words in Taino translate 1 for 1 in English. Back to the drawing board on how to represent the phrases.
Retrospective
A place to move forward.
With the work completed in this phase, we now had a great foundation to work more effectively and quickly in future phases.
Throughout this project, I realized how much skill and work is needed to manage a team while working cross functionally as a lead.
With the new design and leadership skills I picked up as a design lead, I'm even more confident as we move into the next phase of the project.
Takeaways.
- Communication is key.
- When working with multiple teams, clear communication and expectations are needed before moving forward. Especially when working asynchronously with a large team, people need to share what they are working on and what their needs are to stay aligned.
- Be a supportive leader.
- When team members were lost, I learned to offer support to figure out what wasn't working for them. This was done through one on one calls and detailed instructions.
- Cross-functional collaboration from the start.
- This will insure that the product progresses while teams stay aligned. This also prevents any blockers caused by misaligned goals.
- Establish Figma practices.
- This includes labeling practices, components, grouping, and work time expectations (both synchronous and asynchronous). Clear documentation is important to keep track of changes made in the product lifespan.
OTHER PROJECTS
.gif)
.gif)
.gif)
.gif)
.gif)
.gif)
.gif)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)