At Slice Capital, we’re bringing venture capital to the masses. Now everyday individuals have the opportunity to invest as little as $100 into vetted startups of their choice.
I was tasked with the redesign of both the visual and interaction design for the native app. There was a previous designer, but the level of work produced could be improved.
Make users feel at home through a friendly and focused experienced. Make investing in startups as seamless and understandable as possible.
Compared to other startups I've worked on, this one already had a well defined product vision, as well as an early iteration of the mobile app developed. As a result, we were not building a product ground up - so the back end architecture remained the same.
As a result, my process here was a bit different. Rather than conducting research, I used the existing data the company had on users, as well as their previous Sketch files, to consider how the interface might best be redesigned to create a better investing experience for the user, in hopes of creating a long term ROI through design.
I took the previous Sketch files with the screens and went through each, trying to understand why each interface element existed and how it might be improved. I also considered the designs at a holistic level, trying to gain a better understanding of what could be improved to help drive higher conversions based on user mental models of investing. Below is an example of how I broke a screen down.
This prototype shows a couple of things. At a low level, I redesigned the entire app based on the common 8pt. grid system, which allows for easy scalability across screen sizes for developers. I also used orange as the only primary color that highlights what is important or active, reducing cognitive stress on the user. When compared to the previosly designed (above) home screen, the new design feels much more balanced. This was achieved using ample use of white space, as well as using the sans-serif font, Avenir, which is highly legible and easily readable.
Microinteractions are often misunderstood by designers to produce delight. Rather, a microinteraction is meant to subtly suggest the result of an action a user takes.
In this case, our microinteraction shows the location of where the venture is saved. Because our tabs are strategically unlabeled, we're focused on bringing discovery through interaction feedback for the user.
The important thing with discovery, however, is to ensure that you keep users on the same page and are always providing feedback.
The left screen represents the unsigned in screen state. The primary CTA is for users to sign up, which takes them through our sign up flow. The screen on the right shows an empty state for users that have signed up/in, but haven't saved anything yet. By providing an empty state, we provide clarity and incentivize users to save a venture.
The prototype below show3 the investment flow as a single, scrollable window. The old screen is on the left, and the redesigned screen is on the right (the color rendering is poor to optimize for file size).
So obviously, there are a few immediate obvious changes here. First, there's a fixed navigation bar when the user scrolls beneath the header window. This allows users to understand which section of the "investment flow" their in. Furthermore, where the tab bar once was is now replaced with the a fixed progress bar of the amount raised. This serves a very specific purpose, so users always know at a glance how much money the venture has raised.
The screen below shows a state of a venture that's raise 100% of it's ask.
The orange progress bar is replaced with green to show that a venture has been fully funded. Users can immediately see how many shares they purchased for how much, and by clicking through, they can see quarterly disclosures of each company. You might be wondering how users get their money back?
The orange dot appears to the top right of the portfolio icon that represents a notification.
The goal of the redesign of the sign up is to break things down into more manageable, logical pieces. The old screen is on the left, and the redesigned screen is on the right.
In the new design, however, I focused on a cohesive and clean image, and I broke the steps down into logical pieces. It starts with the most basic information, to account information, to street address, and an optional payment information. While optional, users still have to add their payment information if they do decide to invest (during the investment screen).
Designed and coded with ❤. Copyright © Jeff Wang 2018.