The Flowchart App

About the project

Conceived as “a UX to help adults learn how to invest”, The Flowchart App leads the user to financial independence.

My role

The Flowchart App is a one-man project — I was in charge of the full UX design process.

Project goal

It is surprisingly difficult to find a good investing guideline. Assumptions, unverifiable claims and biases are common within online resources. That creates a demand for a transparent and easy-to-follow personal finance guide.

The Flowchart App wraps the trusted community knowledge base of /r/UKPersonalFinance known as The Flowchart into an interactive guide, making one’s progress engaging and easy to follow.

Understanding the user

I conducted and evaluated one round of interviews with people who are interested in personal finance and investing. The research revealed that the financial and social status, age, backgrounds, and education levels of the users would vary widely.

Based on the initial research insights, I was able to create two personas with their goals and problem statements.

Persona: Emily

Emily is an account manager who needs a clear investment path so that she can enjoy her retirement to the fullest.

Persona: Lisa

Lisa is a young professional who needs a comprehensive learning material so that she can be confident with her investment choices.

Initial design concepts

The main challenge was to reflect the linear structure of the flowchart while making it intuitive to navigate throughout, even in a non-linear way.

Content: The content is divided into sections, each studying one particular domain. Sections are then split into items — reading cards that take no more than 10 minutes to read through. Advanced users will take advantage of the links to additional resources and the original Flowchart knowledge base.

Hierarchy: The homepage displays an overview of all sections, just as each section does for the items it contains.

Progress: The user explores the flowchart in sequence, unlocking each item by setting the previous one as done.

Wireframes

Based on the initial design concepts, I created wireframes for the main user workflow.

User testing

I conducted an unmoderated (remote) usability study with 5 participants. Common themes that have emerged throughout the study helped identify 3 main insights:

Navigation

Users were getting lost in the flowchart tree, the navigation cues are insufficient. Swiping cues and progress bars will be added.

Section and Item

The section overview and the item card look confusingly similar. It needs to be made clear that cards are actionable and belong to sections, and that sections are informational and the user is not expected to take any actions there.

Reopening items

Users commented on the reopening of completed items, which needs to be added as a feature.

Refining the design

To incorporate the usability study feedback, the design has been widely modified:

• Each section has a distinct colour theme. This way, work items can be recognized as a part of the enveloping section.

• Bottom navigation bar has been added as an option to immediately navigate throughout the app and to indicate the current location within the content structure to the user.

• Items are designed to appear as expanded versions of the preview cards featured on the Section screen. This indicates that swipe gesture is possible on the Item screen as well, and that it will navigate the user to the next (or previous) card, just like on the Section screen.

• Every action is easy to undo using the industry standard top-left back arrow.

Conclusion

From the usability point of view, I'm confident that this design is a nice MVP that is ready for implementation as a PWA.

In fact, this is exactly what I will spend my next few free weekends and afternoons with when I have some.

Going forward

One thing that this app needs the most is better visuals:

• Smarter choice of colours. Only three shades are necessary for each section colour (12%, 80% and 92%). Therefore, the base colours can move way closer together and still stay well apart.

• Some illustrations to break the boring areas apart. Just because they have a purpose don't mean they shouldn't look beautiful. Let me know if you know about something I could use under CC-BY-SA — ux@tomaskrupka.eu