Arcana Mini is a mobile app concept designed to complement a reader’s personal tarot deck, allowing users to look up card meanings and journal their spreads. I originally developed the idea and created an Android prototype for a class project in 2023. Later, I had the opportunity to reimagine the experience through Surge, our campus developer club, where I led a team of four first-time React Native developers.

As the project lead, I was responsible for the concept, UX/UI design, prototyping, and team coordination. Although we faced technical challenges and were unable to complete the app in React Native, I delivered a fully interactive prototype in Figma that brought the vision to life and guided future development.

Design Process

Information Architecture

A key part of the planning process was mapping out the app’s structure and user flow. To do this, we created a site map in FigJam that outlined all the screens and how they connect. This visualization helped clarify the app’s functional needs and served as a foundation for building the final Figma prototype.

Aesthetic Experimentation

Initially, I planned to reuse the design from a previous prototype and focus on development. But after receiving critique, I realized this was a chance to create a visual identity that better fit the app’s purpose.

The first iteration featured a bold, boxy style I found visually interesting, but it didn’t align with the calm, reflective purpose of the app.

The next version moved toward a softer, more modern look—one that felt more approachable and emotionally supportive. This process taught me how important it is for design to reflect the emotional context of a product, especially one centered around personal reflection.

I also learned the importance of designing with modern devices in mind. Early on, I was designing based on the dimensions of my own phone, which has a much smaller screen than most current devices. As a result, I wasn't accounting for how the app would adapt to larger screens, and many users would have ended up with a very different experience—one I hadn’t intentionally designed. Realizing this pushed me to consider responsive layouts more seriously and ensure the design felt consistent and intentional across devices.

Key Features

Challenges

1. Learning React Native

This project came with its fair share of challenges—technical, logistical, and interpersonal. One of the biggest hurdles was working with React Native, the framework we chose so the app could run on both iOS and Android. It seemed like a great opportunity for the team to learn something new, but the learning curve turned out to be steeper than expected. All four developers were brand new to React Native and, despite their enthusiasm, the lack of familiarity significantly slowed down progress. Eventually, the technical demands outpaced what the team could handle within our timeframe.

2. Communication & Time Management

Another key challenge was team coordination and communication. Since this was one of the first collaborative projects for many team members, we were all navigating how to work together effectively while also learning new tools and technologies. Unfortunately, differences in experience with project planning and time management led to a mismatch in expectations. While I had anticipated the complexity and workload involved in a project of this scale, others found it more difficult to balance alongside their existing commitments. Despite these hurdles, the experience taught me a lot about adapting in real-time, communicating across disciplines, and stepping into a leadership role when needed.

Reflection

Although we weren’t able to deliver a working React Native app by the end of the project, this experience became a valuable lesson in leadership, adaptability, and the importance of making the most of your individual strengths. As the only designer on the team—and someone with prior experience in team-based projects—I naturally stepped into a leadership role. I took initiative in organizing meetings, keeping momentum going, and trying to keep the project on track, even when it became clear that many team members were struggling to keep up due to other commitment s and the technical demands of learning React Native.

When progress stalled on the development side, I made the conscious decision to pivot the project toward what I could accomplish independently. I put my focus into redesigning the app, iterating on UI and UX decisions, and building a complete interactive prototype in Figma. It wasn’t the outcome I initially envisioned, but it allowed me to bring the core vision of the app to life and provided a strong foundation for future development—whether I return to it solo or with a new team. More importantly, it taught me how to respond when things don’t go according to plan: with resilience, creativity, and a deepened trust in my own skills.