The first week I started at Spaceship I began reviewing the design processes and ways of working, I interviewed internal stakeholders about what was working well and what could be improved. We held team workshops and then created project goals, and delivery plans we agreed on working in an Agile, scrum dynamic between the product, design and development teams.
Next, I looked at user data from Google Analytics, App Store and Playstore reviews, Intercom and Fullstory, by synthesising all this information I could start to see patterns in what could be improved in the user experience. I did heuristic evaluations on the current app and started to form ideas and improvements to the existing experience before focusing on the redesign.
Looking interstate and internationally I identified direct and indirect competitors in the superannuation and portfolio investment spaces. To understand them deeply I did competitor teardowns and feature reviews, these techniques were extremely useful to understand why the apps were so popular, where they lacked and, it gave me plenty of features ideas to test out with our customer base. We also created customer proto-personas from the data we had these were then used by the marketing team and for the UX testing recruitment profiles.
Two pages from the Heuristic Evaluation, pointing out the errors and recommended fixes.
Two of the four proto-personas created for Spaceship.
The Design Process
To create great digital products it is important to use a design process. For Spaceship I chose to use my favourite process, The Double Diamond of Design, this process is easy to understand and explain to everyone on the team, it clearly shows what stage the design is at and what’s up next, the basic idea is that each quadrant of each diamond represents divergent and convergent thinking, the first diamond is about discovery and the second diamond is about design and delivery, the process repeats until you get to a good well tested product solution.
The Double Diamond of Design, a simplified version of my design process.
To begin the design process, I facilitated design thinking workshops, these session were created from activities that I use from Google Design Sprints and Ideo’s Design Kit, I condensed down week long workshops into daily workshops by picking the methods that have the most perceived value to the group. A quick example and explanations of some of the activites:
- Lightning Presentations – Present your favourite app relevant to the project and explain why it is good and any limitations.
- Experience Mapping – Write down who solves the user need the best “eg buying shares” explain why the experience is good an any limitations.
- How Might We – Write down opportunities and pain points onto sticky notes, the present them to the group, we then affinity map them into patterns and dot vote.
- Crazy 8’s – Draw out 8 ideas onto a piece of folded paper then present them, the group then dot votes on best ideas.
- Solution Sketch – Draw out 8 ideas onto a piece of folded paper then present them, the group then dot votes on best ideas.
After this workshop we keep all the output and the winning ideas get the chance to be turned into wireframes and user-tested.
Some of the winning sketches from a design workshop.
Workshop insights synthesis.
Sketching & Wireframes
To create early-stage concepts and designs we began with sketching onto paper, this allowed us to move quickly and validate ideas without getting too caught up on one particular version. Once we had confirmed that a sketch concept could work we took it into Figma and created greyscale wireframes first, this was to test functionality first with our users and that right so they didn’t focus on the UI details like colours until later testing. We also looked at user flows and journeys for different sections of the app like onboarding, portfolio selection, account settings and dashboards.
Variations of the home screen wireframes for user testing.
A complex user journey map showing a superannuation and investment sign up flow and how it all connects up.
An app sign up flow in Overflow the touchpoints are highlighted in blue.
User testing early and often let us find out what was and was not working before we invested too much time and money into a design. We contacted a large group of our app customers and booked them in for 1 hour testing sessions at our labs every 2 weeks, with a minium of 5 people per test, our customers were very responsive and happy to come in and participate. This frequency ensured we were validating everything we worked on, I recorded all of the session in Loom and then synthesised all the feedback insights on Miro (Realtime board) and as an insights deck and shared with the team.
For the user testing sessions, I created moderation guides that had general customer profile questions, opening and closing questions and task based questions. I purposely gave the users tasks and then watched to see how they would complete them without helping them out along the way, this gave us realistic evidence of what people would do with the real app once it was released.
I also facilitated remote testing on Usability Hub, this platform gave us quantitative insights and we were able to test things like which colour schemes people preferred, what components were working better, which account sections made more sense. For the experiment tests we spoke with current app users, Australian non users and USA non users.
Task One: How would you find the info page to see the performance of A2 Milk?
The user flow for finding company info pages, the pink circle is the touch point.
Task Two: How would you top up your Spaceship account with $100?
The user flow for topping up your account on an iPhone 6.
Task Three: How would you send yourself your account tax statement?
The user flow for sending yourself your account tax statement.
Quantitative Preference Testing: We asked a large sample size of current and new Australian and international people what they thought of the four design with different colour schemes presented below, I made sure to randomise the test for each person so the results would be as realistic as possible. Some questions asked were:
- Which colour scheme do you prefer and why?
- How does each colour scheme make you feel?
- What type of brand does each colour scheme represent?
By using this information we were able to make an informed decision, on which style was more likely to be enjoyed by a large percentage of our userbase.
The different app colour schemes we used for quantitative preference testing.
User testing videos on the left, presenting the user feedback in Miro on the right.
Two slides from a user testing insights deck.
Styleguide & Design System
To create the Spaceship design system, we first locked in our Styleguide containing the brand colours, typography, 8px grid spacing system, basic components and iconography. Once that was done we created our Component Library, this was the base for the whole app and by making everything into components we could easily come up with new ideas and quickly mock them up in Figma. For the app grid system we chose to use an 8px grid similar to Material Design, this worked well for the developers and gave us a clean and consistent look and feel.
Styleguide containing, colours, spacing, typography & components.
The app design system created in Figma.
Interface & Interaction Design
After we had completed user testing, creating the design system and styleguide we created the final pixel perfect UI designs for the developers to code up. We handed the designs over to them in Figma where the could inspect the colours, spacing, and download any of the assests they needed like icons. We worked closely with the dev team to ensure that eveything was coded exactly the way we had created it, we also made interaction designs in Principal so they could tell what would happen transition between screens and other app interactions.
The final Spaceship Voyager app screens.
The Spaceship Voyager website showing the new app features.
When we released the new Spaceship voyager app, it was well received by the customers. They were happy about the new functionality, extra information and simple usability. Some key metrics were:
- We lifted the 3.2-star app store rating to 4.5-stars in 6 months.
- We grew the user base from 30,000 customers to over 50,000 active Spaceship Voyager customers.
- We reduced complaints and inquiries about account information.
” It now shows how may units you have! You just have to look at your transaction history and now it shows finally!!”
Spaceship Facebook Group
Excellent way to invest
” Really happy with the app growth of my investment over the last 12 months or so. Would highly recommend this to others, not only is it simple to use, but the fees are very low, the diversification is excellent, the investment returns are good and the app and related articles are beautifully written and easy to understand”
To the Moon!
” First off this review is not endorsed, I just admire great products built by people who want to help others. The company structure the low fees and great support of Spaceship Voyager is more than superb”
Great low cost index fund
– very good low cost exposure to a broad based and diversified index
– app is easy to use
– nothing like this in Australia, a great disruptor to the bloated, lazy, and highly ethically dubious financial sector in Australia
– fees are just so very low, good work