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. 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.
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 (abov) 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 shows 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).
I also had the pleasure of redesigning and developing their new landing page (www.slice.capital). In redesigning the landing page, my primary focus was letting the app and it's value speak for itself. By choosing a no frills, sans-serif font (Proxima Nova), the focus is primarily on the app itself. To further reinforce this, the hero image presents a large mockup of the app itself, as well as a call to action to encourage users to sign up.
Below, I wanted to showcase the publicity the app has gotten, but not detract from the actual focus on the app itself, thus limiting the colors of the images to greyscale. Finally, I present more mockups of the primary screens that a user will interact with. I also created a custom icon set to help visually demonstrate the features and value provided by our app.
What's next? Well, we're currently developing the entirety of the app in React Native with Barefoot Coders out of New York. Hopefully we'll have a working app on both iOS and Android in the next few months. I'm also currently working on designing a web platform that reflects our mobile platform both in form and function.