How we built the dashboard page for the Selfwealth mobile app.

Introduction.

Selfwealth is an online trading platform which allows users to trade stocks across US, HK and Australian markets. It currently has approximately 120k customers and we service these customers from our desktop platform and our mobile app.

Within the last year the company has started to stall against its competitors and identified a need to overhaul it’s digital experience to stay competitive in an ever changing market whilst also aligning to a strategy to become a larger wealth creation tool. 

1. Problem statement

As a platform, Selfwealth gives users an overwhelming amount of options and insights that can be accessed. Within the mobile context, users are struggling to easily navigate and understand the information presented to them on the dashboard. Specifically, users are having difficulty accessing important data and insights, like portfolio performance. This has resulted in frustration and confusion and therefore lack of engagement with the app.

Our goal is to improve the usability and clarity for the dashboard experience without removing key information, to enhance the overall user experience to increase user engagement.

2. Hypothesis

We hypothesize that by redesigning the dashboard page to prioritize the most important data and insights for users, improve the navigation and organization of the content, and provide clear calls-to-action to guide user behavior, we can enhance the overall user experience and increase user engagement with the app. This will ultimately lead to increased user satisfaction, improved retention, and greater revenue for the business, allowing the digital arm of the business to remain competitive. 

3. Who are we designing for?

Target Segments

We are designing for a particular segment of our customers which are:

• Familiar with our current direct and indirect competitors.

• Younger and middle-income earners.

• Have a singular portfolio of assets.

• More focused on a mix of both slow wealth creation such as ETFs and volatile assets e.g. Crypto, Gamestop.

Remaining Segments

We also have to be considerate and inclusive of existing users which fall outside of this segment. For example our ‘Conservative Owls’ are reluctant to use mobile and still prefer desktop, whereas our ‘Chaser Magpies’ and ‘Excited Peacock’s use app only or our ‘High Stakes Eagles’ which use desktop only for large orders.

Development team considerations

We also need to consider the development teams and the platforms for which we’ll build upon, whether that be React, or Native IOS and Android.

4. Roles and responsibilities

As a product designer for the end-to-end mobile app project, I co-led the interviews, research, and created the design system foundations and UI design with Hai Truong (Senior Product Designer) and Matt Tsourdalakis (Product Desgin Lead).

Creation of the design system, its foundations and subsequent patterns are a big passion of mine. This teamed with my previous experience working in this space allowed me to take the lead role in building this across both our desktop and android/IOS platforms. 

Together, we collaborated with external and internal product owners, solution architects, developers, third-party data vendors, and our internal brand and marketing teams to ensure that we clearly articulated and understood our brand and technical requirements while maintaining a focus on delivering a superior customer experience.

5. Scope and constraints

Our largest constraints were time, team retention and budget resources, alongside dependencies on our backend infrastructure which requires a future replatforming to better support the project.

These constraints require us to focus on prioritizing key user needs and addressing critical usability issues, while balancing design solutions with feasibility within the given constraints. 

Our goal is to deliver an improved user experience within these limitations and set the foundation for future enhancements once the backend replatforming is completed. Further features being a fast follow with opportunities for iteration. 

6. Process

What we did: Project canvas

We kicked off the entire mobile app project by creating a Project Canvas to provide a shared understanding of the project scope, timeline, and deliverables. It helped to stimulate collaboration and communication between all involved parties and communicate the project vision.

Discovery, Research: 

What I did: Initial discovery

Quantitative: 5 external user interviews

To gather more in-depth information about customer experiences and opinions, we conducted one-on-one interviews. These interviews provided valuable qualitative data and served as the foundation for the subsequent quantitative data survey.

Qualitative: 1 survey

To gain a better understanding of customers' experiences and opinions of the app, we employed online surveys to collect valuable insights into their needs, preferences, and behaviors

We had limited time for discovery so without initial access to external users we conducted 5 user interview sessions with our list of ‘Friendlies’ to kick-start our user research.

We asked questions regarding:

• The Selfwealth platform

• Investment goals/strategy

• General investment behaviours

• Likes/dislikes around investing

• Investment app behaviours

• General mobile behaviours

Competitor Analysis

We conducted a competitor analysis to compare the top-level value and features of Selfwealth and our direct and indirect competitors.

Direct competitors included:

• Stake

• Pearler

• Commsec

• Spaceship

• SwiftX

• Coinspot

Indirect competitors included:

• 86:400

• Simply Wall St

• Up

• Airbnb

• Google Maps

• Facebook

• Headspace

UX Teardowns

We conducted 9 UX teardowns of other popular apps to help us better understand and explore industry best practices, common design patterns and identify potential design flaws within both the Selfwealth app experience as well as our competitors, so that we could highlight opportunities for innovation.

Empathy Mapping

To ensure a user-centric approach and to build empathy for our users, we did an empathy mapping exercise with the team to help create and nurture shared understanding of the needs, desires, and challenges of our target audience based on our customer archetypes. 

Journey Mapping.

We created a journey map to have a shared understanding of the user's journey and to align the team on user needs, goals, and motivations.

By mapping out the user's journey, we identified pain points and opportunities to improve the user experience.

Must have been identified in the user journey.

• First use (login, home/dashboard)

• Research (watchlist, stock details)

• Trade (order screen, order confirmation)

• Monitor (portfolio)

• Funding account (deposit screens)

• Basic Information Architecture (Nav tab)

Moderated testing.

12 external users, 9 internal users across 3 rounds,

We tested specific app features to ensure they work as intended and meet user needs. Any issues were identified and addressed early in the development process, saving time and money.

Feedback was used to make changes and refine the app's design, making it more user-friendly and effective.

All sessions were recorded in Lookback, documented and synthesized in Miro.

7. Research outcomes

Off the back of the synthesis we identified a few key trends across our users.  

• Users found the new portfolio structure intuitive compared to the old app or big site.

• Quick Actions feature is considered helpful and easy to find.

• Users like the design of the portfolio cards.

• Users would like to complete onboarding through the app.

• Users appreciate having the option to create a portfolio directly from the dashboard.

• Customisation options for the dashboard are well-received by users.

• The Markets/search page should be more discoverable and user-friendly.

• Users want to see their cash balance and accounts clearly displayed

• Having only one account icon is preferred by users.

• Users find it important to have multiple news sources

8. Design

Iterated prototype

9. Outcomes and lessons

Product

The redesigned dashboard page of the Selfwealth mobile app has led to measurable improvements in usability and clarity, as demonstrated by the feedback from users in the previous round of user testing. Specifically, users reported higher levels of satisfaction with the types of data presented, in particular the total portfolio value and the combined gainers, losers and news with the additional news sources. Compared to the previous round of testing users also indicated easier navigation with all users successfully moving off this page with an action to either view a portfolio or purchase an asset.
These improvements suggest that the redesign has addressed usability and clarity issues though we would like to continue to test this via regular cadence of maze testing.

Challenges

• Imposed delivery date created unnecessary stress within the team

• Limited designer resources with only 1-2 designers

• Hard to establish team cadence with constant team changes

• Knowledge gaps within team

• Technical constraints forced us to make design concessions

Continue moving forward

• Nurture effective communication across all levels

• Design future state and document with supported actionable data to build a business case

• Be insight-driven, share insights and context and continue to validate with users

• Keep iterating to uncover more ways to solve users problems

• Highlight the importance of scalability and evolve the design system