Você está na página 1de 1

THE PROJECT: DOBLET

Stay Charged Everywhere You Go


Doblet is a service that gives users access to a network of
portable chargers. After signing up, a phone charger can
be borrowed at any Doblet venue. The app allows users to
quickly nd a venue, purchase a subscription, and start
charging right away.
With over 1,000 locations in the Bay Area, your phone will
never be low on battery again!

MY ROLE

UX/UI + Visual Design


When I joined the team, the app was already live, but
it needed a push in design eorts. I was hired to
advocate for user experience and to improve the
visual design. I am currently working with the iOS
developer to redesign various parts of the app.

F I R S T S T E P, A N A L Y Z E

The Existing App


Before diving into design, I wanted to fully analyze and understand the
existing app. After mapping out every screen, I printed them out and
added notes as I was going through the app on my phone. This
teardown helped me see the relationships between the screens and
pinpoint areas that needed improvement.

Printing Vs. Digital


Having a physical print out of the screens allowed me
to be quick and informal in jotting down notes. It also
allowed me to see everything laid out at once without
having to pan or switch screens. This resulted in a
better understanding of a single screen in the whole
scheme.

Big Action Button


One of the rst things
that puzzled me was the
disporportionately large
start charging button. I
didnt quite understand
the purpose as the
phone would
automatically charge
once a charger was
plugged in. See below for
how this UX issue was
further analyzed and
resolved.
Map/List Navigation
In order to access the
search lter, the user
would have to go to the
list screen to tap the
lter button, which was
not visible or accessible
from the initial map
screen. Read further to
see how we tackled this
UX problem.
Too Many Alerts
Another major aw I
noticed was the large
amount of custom alerts
throughout the app.
Some could have just
been native alerts,
others could be
resplaced with been
temporary messages.
Most of the alerts took
the user out of context
unnescessarily. Read
below to see the how we
minimized & redesigned
the alerts.

S TA R T C H A R G I N G

Main Call to Action

Feedback
I brought to the teams
attention the importance
of giving feedback after
an action. Once a button
is clicked, the user
should know instantly
whether or not it
worked. If something is
loading, the user should
not have to wait in the
dark. If there is an error,
the message should help
users solve the problem
instead of just telling
them something is
wrong.

At rst, the large start charging button


seemed unnecessary to me because
charging starts automatically once a
doblet charger is plugged in. After a long
discussion with the team, we decided to
keep the button, as a main call to action
for users, especially rst time users. It
would also help users troubleshoot
problems, if automatic charging failed.
The compromise of retaining the button
included adding a status message to
keep users informed. Once start
charging is pressed, a connecting
status is shown, to let users know that
the button is actually working. Then it
changes to a charging status if the
connection is successful or an error
message if something goes wrong. The
latter identies the problem and gives
the option of getting live help.

PURCHASE FLOW

Buying a Charge
One of the most important aspects of the app was the purchase ow
for buying a charge or a subscription. Gaining subscribers and regular
users is key to the growth of the charging network. This valuable
screen had to be easy to understand with an ecient user ow to
increase conversions

Existing
The existing blue/green
buttons were confusing the two bold colors lacked
hierarchy and made the
products seem too
dierent. This made the
user think longer about
which one to buy, which
resulted in less purchases.

Iterations
One of my initial strategies
was to group the
information more clearly
into cards and putting the
call to action at the bottom
of each. Many iterations
were explored that
eventually led us to the
nal version.

Final
We discovered that we
could save an extra tap by
bringing up the payment
info immediately after a
product was selected. This
maintained context (without
bringing the user to
another screen) and also
shortened the purchase
ow as well!

Research
While developing this screen, I researched
various dierent apps and websites that
oered subscriptions, such as Spotify and
Hulu. Studying the precedents helped me
gure out what would and wouldnt work for
our unique situation.

Fixing the Top Bar

SEARCH

In the existing app, the search/lter

The search/lter should be accessible from both the

was only accessible through the

map and list views, since . Our solution was to put

list view of the search results.

the lter button within the search bar. It made sense

Since it was not in the initial map

functionally, since they were related, and also spatially,

view, it was under-utilized because

because of the limited top bar real estate.

users didnt know it was a feature.

Combining the menu button and


the logo allowed space for a search
bar in the map view.

EXISTING MAP VIEW

EXISTING LIST VIEW

NEW MAP VIEW

NEW LIST VIEW

Filter function is accessible from


both views.

Button to toggle between views is


in the same place on both screens

ONBOARDING

First Time Users


One of the most important aspects of the app was the purchase ow
for buying a charge or a subscription. Gaining subscribers and regular
users is key to the growth of the charging network. This valuable
screen had to be easy to understand with an ecient user ow to
increase conversions

Existing
The existing blue/green
buttons were confusing the two bold colors lacked
hierarchy and made the
products seem too
dierent. This made the
user think longer about
which one to buy, which
resulted in less purchases.

Iterations
One of my initial strategies
was to group the
information more clearly
into cards and putting the
call to action at the bottom
of each. Many iterations
were explored that
eventually led us to the
nal version.

Final
We discovered that we
could save an extra tap by
bringing up the payment
info immediately after a
product was selected. This
maintained context (without
bringing the user to
another screen) and also
shortened the purchase
ow as well!

Research
While developing this screen, I researched
various dierent apps and websites that
oered subscriptions, such as Spotify and
Hulu. Studying the precedents helped me
gure out what would and wouldnt work for
our unique situation.