UI DESIGN / UX DESIGN
KEEP Collective: UI Style Guide + Dashboard

KEEP Collective is the sister brand of Stella & Dot.

Responsibilities

UI Style Guide

Working in collaboration with a marketing designer, I created the KEEP Collective UI style guide. This document evolved as the project went on and helped me and the team make sure all the components we built were on brand.

Print/marketing style guide made by the marketing designer. I worked with the marketing team to help them select web-safe fonts.

Taking inspiration from the marketing style guide, I created a more detailed UI style guide:

"Designer Lounge" Homepage

The "Designer Lounge" is where KEEP sales representatives (called Designers) are able to track the progress of their business. It is a website only available to KEEP Collective designers and not the general public. It was designed to be responsive, so sales reps can work on ther business on their phones in a mobile-friendly layout.

Wireframes

The product manager on the team made an initial wireframe. Using this wireframe, I made further layout explorations. This helped us talk through the best way to lay out the content on the page and answer the question, "What does the designer need to see first?"

Visual Explorations

After we decided on a layout, I worked on the visual design of the page, exploring different color and typography options. During this time we also iterated on the navigation.

Final Visual Design

Homepage with No Sales Activity

Our goal for this page was to have a MVP that we would be able to build on top of in the future. We wanted something simple and clean; that the KEEP designer would not get tired of looking at, so that they can focus on their task at hand.

With that in mind, we moved forward with the mock below. When the KEEP designer lands on this page for the first time ever with no sales activity yet, the page shows call to action buttons to help guide her.

Click on image to expand/collapse mobile view

Homepage with Sales Activity

When the KEEP designer has sales activity, this page serves as a landing page for her to see how she is doing at a glance.

← Back to Homepage Online Accounts →