Open Door

Project Background

For the 2024 Irvine Tech Week, I joined the Tech Stars startup weekend. A Hack-a-ton type of event where developers, designer,s and hustlers (people who pitched ideas) get together to build an application or website on a weekend. Our team consisted of 6 people: 2 designers, 2 hustlers, and 2 developers.

The application we created this weekend is called Open Door, it was pitched as Duolingo for financial literacy. The purpose of the app is to gamify learning about personal finances. We hope to tackle limiting beliefs that people have about money, debt culture, and living paycheck to paycheck. With our solution, we want to offer students:

• Personalization: after completing a short assessment the application will create a custom course for the user.
• Actionable goals: after each lesson, the user will have "homework", i.e.: if the user wants to learn about building a credit score, an actionable goal would be to go to the bank and open a credit account.
• Giving the user confidence in navigating their personal finances.
• Connecting to their bank and helping them keep track of their spending habits.

The purpose of this app is not to give financial advice but rather to give the user tools to make better decisions.

Our hustlers worked on a Canva presentation for the challenge, they had already been working on this business idea since before the Startup weekend, therefore had already conducted market research and had been working on customer discovery. This presentation will give further context for this design:

My role

My main role in this project was to create wireframes and high-fidelity mockups for the app. I also tasked myself with choosing a color palette, checking for contrast issues and accessibility of this palette, and creating a quick logo for the app.

Main challenges

• Mentoring the "hustlers" in the design and development of apps as they were completely new and unaware of what was possible to do during a time-sensitive challenge like a hack-a-ton
• Short deadline: completing a working demo and presenting it to the audience and panel of judges in 2 days time.  
• Working in a new team with strangers and getting everyone onboard with the scope of the project.

Goals

Process

We started Friday night with a brainstorming session on the whiteboard.

Main takeaways for the night:

• Crafting an introductory questionnaire with 5 questions like Zogo and Rocket Money (competitors)
• Adding gamified elements like animations, rewards, currency system, daily streaks, and lives
• The prototype for the weekend will include: onboarding with intro questions, the first lesson with a quiz, and a final dashboard.

Here are the digital wireframes:

We had to do some quick graphic design work and create a logo for the app. The hustlers had been working with a lilac color palette but it lacked contrast so we added darker purples and yellow for contrast.

After this we jumped straight into working on the mobile high-fidelity prototypes. Here are some of the screen we created during the weekend. We skipped the login/sign up screen and delegated the task to the developers.

Onboarding questionnaires, with these questions, the app will craft a custom course for the user.

The course screen with the learning "path". This would be Module 1 for this user. As they progress, more modules will unlock.

Before watching the video, users can read a summary of the lesson. Having both text and video should help the user retain the information better

Video lesson. Lessons will be short and "bite-size" so they can squeeze them anytime in their schedule.

After every lesson, there will be a quiz for the user to test what they learned.

Lesson recap. Here the user is shown how many points they accumulated, their streak, and their score for this lesson. They can continue learning or return home.

I did some small changes on the mockups after the weekend was over for the purpose of sharing a clickable prototype in this portfolio. For example: I modified the top status bar to be more modern looking centering the icons with the text and adding icons for time and battery percentage for more context.

I modified the sizes of the circle in the lessons recap and removed the circles for streak and points earned since these don't really make sense, there's no "progress" for these numbers, it would always be at 100% since its your total.

For the home screen I reorganized the "steps" and changed the text to "goals". One of the features of the app is giving the user actionable goals and reorganized them, the 2 columns will not work well with longer text and will make it look cramped, finally removed the circles from the arrows since they are not necessary.

Something else I did for all screen was making the background that 10% grey from the color palette, to give it separation from the elements in the UI and make it less blindingly white.

Before

After

Before

After

Before

After

Finally, you can try the Figma demo at this link.

Project outcomes

Our team managed to complete a demo with time to spare for the presentation deadline. We were also able to incorporate the game elements that we wanted into our prototype.  However, we failed to win any of the prizes or honorable mentions.

This project proved to be a valuable learning opportunity. With proper communication and smooth brainstorming we were able to agree on a very realistic scope for the project given the tight deadline.