Client: SocialSweet Inc.
Timeline: 2017, ~4 Weeks
Roles: Product, Visual, & Experience Design
Project Summary
Sweet is a loyalty program that helps
companies and high profile individuals enhance their connection with their
audience and followers through social media engagement in exchange for rewards.
Key Goals
Sweet needed the user dashboard
to be visually pleasing, easier to
understand and navigate in order to increase user engagement and clientele.
...
The Plan
After meeting with the founder of Sweet,
I learned what specific goals needed to be
met. I took time to study and ask questions
about the platform, explore the dashboard
itself and understand the different features
that exist. Afterwards, I made a plan of action.
• Establish Responsive Grid System
• Establish Typographic Scale
• Create Preset Color Palette
• Organize ‘Tile’ Elements
• Reduced ‘Visual Noise’
Process
Initially, the dashboard lacked a clear visual heirarchy between the typography, the iconography and the different types of media that appear on the page. The relationship between all the graphic elements on the page seemed to be very weak or non-existent.
Also, no instructions were given as to what a person should do when they arrive at the page.
This essentially makes navigating the page a very cumbersome and confusing task. I've taken the time to create a visual design system that corrects these flaws, and I've also made it flexible enough to serve different client's tastes to better fit their tastes when editing the look and feel of their specific dashboard.
WIREFRAME
These wireframes were created to provide structure and hiearchy
to the many elements that may appear on the page. During this,
I organized and restricted what different size rectangles would
appear on this grid so they fit neatly.
TYPOGRAPHY
There wasn’t any form of organized typographic scale or rhythm initially. The type seemed more promininent than the other forms of media the platform is intended to present.
MOSAIC TILES
Sweet aggregates a client’s social media accounts and populates them all in a special mosaic. When users interact with the tiles and perform actions, (Watching a video, liking a photo, posting a comment) they are rewarded with a special token called Sugar (SUGR). There are multiple forms of media that appear on social network sites, and I made a great attempt to create a sense of heirarchy and visually organize the tiles by the type of content.
COLOR PALETTE
Every mosaic is themed with a specific color palette.
To create a visual pattern, I decided to keep Sweet Tiles
locked to the mosaic theme, and Network tiles stuck with
their brand colors. Buttons and other UI elements
throughout the page followed the theme color as well.
The Outcome
The new design system improved the look and feel of the platform dramatically. Engagement on the platform more than doubled over the course of a year. The amount of clients signing up to Sweet during this period of time doubled as well. Internally, work flow became more efficient between the front-end engineers and myself.
Selected Works
