OVERVIEW // ROLE
       
     
DESIGN PROCESS: CONCEPTING // SKETCHES
       
     
DESIGN PROCESS: CONCEPTING // DASHBOARD MOCKUP
       
     
DESIGN PROCESS: CONCEPTING // DASHBOARD MOCKUP 2
       
     
OVERVIEW // ROLE
       
     
OVERVIEW // ROLE

OVERVIEW

syrup is a responsive web app for startups and product teams to keep investors and stakeholders informed of their progress. Billions of dollars are invested into failing startups each year and syrup is helping save time and money for teams and stakeholders to focus on building meaningful products instead of meaningless reports.

*The image above is our metrics wall for ivotify and syrup’s job is to be able to bring some purposeful value to the madness of metrics and packaging it for all team members and stakeholders to follow.

ROLE

I was tasked to concept the investor’s dashboard upon login with what they would see and how’d they interact with it.

DESIGN PROCESS: CONCEPTING // SKETCHES
       
     
DESIGN PROCESS: CONCEPTING // SKETCHES

USER-CENTERED DESIGN

As an investor, there’s a whole lot of numbers and information you need to be aware of, yet never enough time to thoroughly analyze it yourself. 

I wanted to prioritize what investors needed to be informed of first and foremost, which is an overview of the team’s metrics and weekly performance, followed by the detailed progress of their build.

DESIGN PROCESS: CONCEPTING // DASHBOARD MOCKUP
       
     
DESIGN PROCESS: CONCEPTING // DASHBOARD MOCKUP

LAYOUT

My initial design of using a card style layout was to help give visual hierarchy to each “panel” or card since my experience with my current investor needs a a very organized interface.

NAVIGATION

The top navigation bar allows the stakeholder to toggle between today’s updated data and look into upcoming goals the team has set for future weekly sprints.

METRICS

The metrics panel provides an up to date overview of how the current product is performing based upon the pirate (AARRR) metrics and velocity being the team’s production rate. I decided to use red/green hues to provide additional affordance and insight to each metric.

UPDATES

The latest updates feed is configured for the investor/stakeholder to subscribe to only specific categories of updates. This feature allows for some non-technical stakeholders to opt out of development heavy updates that may contain jargon that is not valuable to them or vice versa. Customization for this can be completed by clicking the cog.

DESIGN PROCESS: CONCEPTING // DASHBOARD MOCKUP 2
       
     
DESIGN PROCESS: CONCEPTING // DASHBOARD MOCKUP 2

COMMUNICATION

The communication panel enables in-app messaging so that product owners and stakeholders do not need to go back and forth between their email client and syrup. It keeps the experience being on the same page consistent so that users do not need to leave the app.

WEEKLY METRIC VIEW

This view has the “Acquisition” metric selected to show the investor the numbers up to today for this week. The same use of color is applied, green being the goal has been met for this week, gray being that it has exceeded last week, but has not hit this week’s goal, and red being this week is lower than last week.