Case Study — NvestN Mobile App

Rashan C.
5 min readJun 4, 2019

--

A fintech app for a new generation of mobile inventors.

NvestN Mobile App

The Problem

Building wealth is complicated for many families of the current generation. Investing is at its lowest since 1995. Many families are underserved by banks and investment houses.

Objective

Create a mobile app that will allow users to interact with an automated investing platform that selects investments and invest money without the use of a financial advisor.

Challenges:

  • Mobile Application
  • On-boarding questionnaire to determine users investment profile
  • Design for both older and current generations who are turned away from the concept of wealth management

Team:

  • Founder (Project Owner)
  • UI / UX Designer (Myself, Freelancer) 👋🏾
  • App Developer
  • Financial Advisor

Define The Problem

How do we speak to different generations via a mobile device and talk to them using the similar cross-generational language.

This was just the first stage. More of an MVP to test theories.

Based on this theory the founder created a user flow for on-boarding, producing a profile and entry into the application.

Initial Flow

Based on this flow, my suggestions were:

  1. Landing Page not needed. The dashboard will have navigation and login will be dependent on if the user is a returning user or not.
  2. Place the tutorial right after the splash screen to explain what the platform is and how to use it.
  3. Move the investor questionnaire before login so the user is already interested in the program and is more likely to create an account.

Revised Flow

Revised Flow
  1. Removing the Landing Page removes a barrier for a user to sign up. Less screens require less interaction which means less mental load and as a result will move more quickly to the sign up screen
  2. Placing the tutorial before the questionnaire allows the user to understand what they are getting into before being presented with a large amount of questions. This frames the questions better with the recent knowledge from the tutorial.
  3. Another option would be to place the login screen after the dashboard. (This would mean giving the option to skip the login process). To allow users to play with the app before committing to sign up. They will be more likely to sign up when they have an enjoyable experience on the app.

Personas

Armed with these flows we created first drafts of our idealized users.

Personas

We conducted meetings with both investors and investment bankers to review our personas and business theory. After these meetings we removed the persona of Marie Henri. It was decided that this personas would be covered by the other two, and this persona did not present much unique opportunities.

First Draft Wireframes

Wireframes started with the questionnaire process. This step sets the voice and tone of the application. As a potential barrier for a user to engaging with the app, we wanted to focus on this first to get it right. A lot of work went into language and options.

Rather than settling for a boring question and answer model we used a chat method for interactions. Because most people, despite demographics, are so familiar with chatting on their mobile devices this method went well during testing. But it didn’t wow anyone.

First Draft Wireframes
Questionnaire - Wireframes

First Draft Visuals

Initial user reactions were positive, but not fantastic. Users would go through the questionnaire process but they didn’t seem to have a amazing time doing it. Many younger people and seemed underwhelmed by the experience but they completed the flow. Users who’s second language was english had a good time with the language and did not seem to struggle too much.

With this knowledge we kept the language but iterated on the visuals.

To set our app apart and to give a wow factor I used iconography. These icons were to help visually reinforce the options available to the user.

Take a look at a working prototype for this first draft.

First Draft Visuals — View Prototype

In the first round of visuals we found that:

  1. Chat icons were repetitive therefore they were removed after the first interaction.
  2. Way too much green on the screen.
  3. The text color did not have enough contrast with the background.
Second Draft Visuals

In the Second round of visual designs I switched the icons for emojis.

  • The emojis gave the app a current look and feel,
  • Emojis brand the app with minimal effort for the software.

The prototype was tested with senior college students. Many of whom enjoyed the visuals. The older audience, we noticed during testing clicked on the emojis faster than they had with only text buttons.

Final Designs

With the questionnaire finalized we expanded to other parts of the app. Namely the walkthrough and portfolio breakdown sections.

As usual we started with wireframes.

Final Wireframes

Using the wireframes as a guide I created the following visuals.

The walkthrough uses illustrations to convey a sense playfulness to users, and allows them to skip this step and go directly to the app.

Walkthrough

Here we see a user accessing their portfolio breakdown and adding funds to their account. Once again we kept the emoji theme that became a branding element for this app.

Interaction Design

View my personal website for other work.

See more of my design work on Dribbble.

My profile is on Linkedin.

--

--

Rashan C.

Just a UX designer trying to create cool products and work on his writing.