This browser is not supported for this site. You can still view the site but there will not be any CSS styles.

YoPortfolio

A startup investment product needed a playful brand and UI design to launch them into the future.

  • Branding
  • Product Design
  • Animation

2018

Screenshots of the YoPortfolio website

A local entrepreneur came to the team at Sparkbox with a dream for a new investment product called YoPortfolio. The product would help investors track their trades and know if they were beating the market. His bold vision, mathematical formulas, and quirky name was all we needed to get started!

I served as the brand and product designer for the project and used my understanding of design and development to guide the client in cost-saving decisions that still resulted in a great brand design and MVP product.

Brand Design

To begin, the product needed a brand identity that would attract the target audience of tech-savvy at home investors. It also needed to reflect the vision of YoPortfolio, a simple and easy to understand product that was casual yet trustworthy, friendly and approachable.

Sketches

After listening to the client's vision for the product, I began by sketching a variety of potential directions for the logo.

Sketchbook of YoPortfolio brand ideas opened and held in a hand.
YoPortfolio brand sketches.

Brand Design Explorations

Explorations were varied and covered a number of visual styles and potential directions for the YoPortfolio brand.

Various YoPortfolio brand explorations with different design styles.

With feedback from Jeremy Loyd, Creative Director at Sparkbox, we arrived at three potential visual directions which I presented to the client for feedback.

Screens from a brand presentation for YoPortfolio showing various design explorations.

Final Logo

In the final logo, a simple icon references a pie chart and the "YO" letters of YoPortfolio. The color palate emphasized the balance between tech and finances found in the product while also being mindful of digital accessibility requirements.

The final YoPortfolio logo. Icon and wordmark.
Showcase of the fonts and colors of the YoPortfolio brand. Sofia Pro font. Green and blue colors with gradients.

UI Design

Now that we had established a visual identity, it was time to apply that identity to the product. After wireframes were created by the team at Sparkbox, my responsibility was to design a clear, engaging, and easy-to-use interface.

To give users flexibility to access YoPortfolio on any device, it was built as a web product, as opposed to a native app. Therefore, the interface needed to be responsive and work just as well on desktop and mobile displays.

It was important that the UI not be too difficult to build and risk putting the project over budget or delaying the launch. I used my knowledge of HTML and CSS to design an interface that would balance users needs with development complexity.

Element Collage

Before diving into layout design, I created an "element collage" to explore how the brand would look when applied to UI elements. This allowed us to get buy-in from the client on the visual direction before considering the user experience.

Various design elements of YoPortfolio shown on a monitor screen.

UI Design Process

The single screen product needed to show a graph of the user's portfolio compared to the market and a listing of their stocks.

Over time, the UI evolved to a more simple layout with a focus on colors to tell the story of how a user’s stocks were performing.

Screenshots of different screens in the YoPortfolio app.

Final UI Design

We ultimately landed on a split-screen design with a chart on the left and a list of stocks on the right. This improved the experience by allowing users to hide and show stocks on the right and see the chart on the left change in response.

Final design of the YoPortfolio website showing a chart on the left and trade data on the right.

Being a very interactive web application, special attention was given to the various user flows and different states of the product. I was able to jump into the code and help the development team tweak the look of various components. I also designed and built many of the animations that were used to communicate the user's actions.

animated GIF showing an animation for hiding and showing a stock in YoPortfolio.
User interactions within the YoPortfolio website. Showing what happens when a trade is hidden.

The simplicity of the interface lent itself well to mobile displays as well with the chart displaying above the individual stocks.

Three mobile sized screens of the YoPortfolio website.

Launch

YoPortfolio launched as a beautiful, and fully functional MVP application! The client was very happy with the end result and was able to onboard new users and get buy-in for more funding and future improvements.