Designing an Progressive Web App from 0 to 1

MyWalletJoy is a personal finance site that empowers people to make better financial decisions through life’s important moments (aka life moments).Since early 2019 MyWalletJoy had been solely a content marketing site providing articles, guides with supplemental ad-hoc tools for users to navigate life moments such as planning a wedding or buying a home.

As a result of this initial strategy of being solely a content site MyWalletJoy wanted to define their long-term vision for the business and product strategy while addressing the following issues:

We conducted 10 user interviews with financial novices across various life moments to understand users biggest pain points and process when undergoing any big financial decisions.

‍From the interviews we identified the following user goals and needs: 

The MyWalletJoy App helps users make better financial decisions to tackle life moments buying a home or planning a wedding through a step-by-step action plan and supporting them along the way.

Serves as a launchpad for the user to quickly navigate to other areas of the app. Helps user to get a quick summary of their life moments and get started on their next few action items.

🖥️   Tackle Life Moments, Financial Guidance

👤   Make it easy for me, Support

📊    Retention

A detailed view of a life moment where user can view and complete action items. Action items are organized into digestible phases to tackle planning or wedding or home buying.

🖥️   Tackle Life Moments

👤   Make it easy for me, Support

📊   Retention

Users step-by-step to-do tasks that guide a user through their life moment. Users can tailor their action items by dismissing or restoring any item. Users earn points as they complete action items.

🖥️   Financial Guidance, Tackle life moments

👤   I need support

Users have the opportunity earn milestones as they complete action items to celebrate small wins and save important life moment details. When a life moment is completed, users can review a summary of their milestones organized by phase.

🖥️   Tackle Life Moments, Support

👤    I need support

📊   Retention

We launched the MyWalletJoy app to a small group of 30 beta users. We worked with analyst to monitor performance of the app based on Google's HEART framework and conducted 1:1 interviews with 12 beta users. A few key takeaways from analytics and interview feedback:

‍We decided to host a design sprint to kickstart the ideation phase. This allowed us to quickly test a big idea and get the larger team involved to help us shape the next phase of the product. As a result of the sprint, we prototyped and tested an app concept that would serve as a "one-stop shop" to help people tackle life moments.

With positive feedback from the design sprint testing, we worked with product managers to decide which features we would build for an MVP based on user value and level of effort. We then followed with a competitive analysis to understand how other products were tackling similar problems and identify areas of opportunity for MyWalletJoy.

We held workshops to brainstorm and collaborate with product managers to understand and define how each feature would work and why. Next we created task flows for each feature that helped us breakdown the steps needed for each task and identify necessary screens needed for each flow.

We explored many options for each feature and collaborated early with the content team to ensure we were designing for all the content the app would house. During this time, we conducted usability testing with early iterations of some features to catch any areas of improvement ahead of development.

This was an exciting yet challenging project to build a product from the ground up. Things definitely did not go as expected as the process was messy at times. However, there was beauty in the mess that allowed me to learn and grow from this process. Two biggest takeaways is the importance of having clear product requirements and detailed design handoff documentation. The lack of those two documents led to making last minute trade-offs and descoping of features due to lack of communication with engineers.