bottledrop

SaaS Dashboard Redesign

lean ux
ui design
figma

Challenge

Redesign a SaaS product, implementing a modern dashboard for an area non-profit.

about bottledrop

BottleDrop is a bottle redemption service in the state of Oregon. Consumers are charged a 10 cent deposit at check out when purchasing plastic bottles or aluminum cans. Consumers can collect these bottles and cans in dedicated bags and turn them in at specified drop spots or BottleDrop facilities to regain their service.

project intro

I performed a Lean UX analysis, examining the business and its service, defining personas and user flows. Once these steps were complete, I refined and expanded the organization's visual styles and began working on the solution.
Using Figma, and components from Rayna UI, I sought to:
  • Add new features and content to make BottleDrop's online experience more engaging and valuable
  • Use space more efficiently
  • Make the experience feel like a modern dashboard.

Deliverables:

Dashboard
Manage Cards Flow
Donate Flow
Organization Category Screen
Organization Detail Screen

original
bottledrop dashboard

Currently, their UI uses a great deal of space to accomplish quite little. This is a state-affiliated site, so it must be held to the highest usability standards, but I felt this was extreme and counterproductive.

STYLE TILE

Home, donate

In the Home and Donate screens, I sought to gamify the experience where I could. I implemented neighborhood rankings and weekly and monthly challenges to increase engagement.

ORGANIZATION DETAIL,
PARTNERS BY CATEGORY

In the Organization Detail page, I wanted to offer users a way to choose where their donation goes.
To accomplish this, I create a second column, with a general donation button taking top billing, and specific initiative cards below.

DONATION SCREENS

Clicking the general Donate To [Organization] button takes users to the screen immediately below. A user can choose to donate to a specific initiative by changing the toggles.
Clicking the more specific Donate To [Initiative] button takes users to a similar page, with their selected initiative clearly labeled in the heading.
Their initiative is already selected via Toggle>Radio, but they can also change to a general donation from this screen using inputs provided.

MANAGE CARDS

In the Manage Cards flow, I wanted to continue adding functionality. What would it look like if multiple users could be listed under a single account? What if these cards had more financial capability?
Since users are now sharing accounts, and even entering banking information, a verification screen was necessary at minimum.

see more work

Godsent - Conceptual
App UI Design

See All Projects

Anthony Welch - Portfolio & Insider's Guide