Slice Capital

www.slice.capital

Introduction

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.

My Role

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.

The Challenge

Make users feel at home through a friendly and focused experienced. Make investing in startups as seamless and understandable as possible.

The Process

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.

Rather, the focus was on developing a consistent visual design language, as well as exploring new possibilities for interaction design.

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.

Thinking through the existing designs

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.

By writing down these comments by each screen, I was able to bring up each point to the stakeholders during our meeting to better understand how to improve things, and the potential tradeoffs of each.

Some (Re)Design Decisions

Home Screen

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.

At a high level, we introduced categories because we believe that individuals invest based on the industries they understand the most. For example, a chef might be inclined to invest in restaurant or food startups.
Saved Venture Microinteraction

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.

We believe that with each discovery comes a greater and improved user experience.

The important thing with discovery, however, is to ensure that you keep users on the same page and are always providing feedback.

Screen States
We want users to be able to explore the app before signing up, because we believe this leads to higher conversion rates if our users have newly formed interests in a particular venture (cognitive sunk cost).

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.

Exploring 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.

Finally, by only using the primary color of orange to highlight certain interface elements, the important interface elements stand out much more and don't compete with one another.
Portfolio

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?

In the case of an exit event, such as an IPO or buy out, users are immediately notified. They're also notified about quarterly earnings or general reports/disclosures.

The orange dot appears to the top right of the portfolio icon that represents a notification.

Sign Up Screen

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.

As you can tell, the old screen asked for a plethora of information all at once, which creates a high amount of cognitive ove rhead for users.

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).

Landing Page Redesign

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.

Looking ahead

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.