Open Door

For the 2024 Irvine Tech Week I joined the Tech Stars startup weekend. A Hack-a-ton type of event where developers, designers and hustlers (the folks with the business ideas) get together to build an application of website in a weekend. Our team consisted of 6 people, 2 developers, 2 hustlers and 2 developers.

The application we created for this weekend is called Open Door, and it is basically a Duolingo for financial literacy. the purpose of the app is to gamify learning about personal finances. Our hope is to tackle limiting beliefs people have about money, debt culture and living paycheck to paycheck. So 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 help them keep track of their spending habits.

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

Our hustlers worked on a Canva presentation for the challenge, they have already been working on this business idea since before the Startup weekend so they had already conducted market research and had been working on customer discovery. It was really easy for us designers and developers to jump into and start working on the project. This presentation will give further context for this design:

We started out Friday night with a brainstorm session on the white board.

Main takeaways for the night:

• Crafting a intro 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, first lesson with quiz, and 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 Hi-Fi. 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.

On boarding questionnaire, 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 the 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 in this link.