PackUp App_Yonatan Bell Protfolio

PackUp

Assistant app for moving-out

UX/UI Case study

*Ask me about my UI re-design

PackUp

app for moving-out

UX/UI Case study

Jump to prototype

Context

“Every 6th Israeli, changes his place of residence every 2-5 years”

“Every 6th Israeli,
changes his place of
residence every 2-5 years”

- Yad2 survey, 2016

Problem

Yep, nowadays, people are moving-out a a lot, & those

numbers keep getting up.

So, ‘Moving-out’ tends to be a complex & overwhelming

process that can evoke strong feelings.

Yep, nowadays, people are moving-out a a lot, & those numbers keep getting up.
So, ‘Moving-out’ tends to be a complex & overwhelming process that can evoke strong feelings.

Solution

By using PackUp users could easily keep track of related tasks, manage their cargo, estimate the cost of the move & select

a mover that will fit their needs & budget.

More control equels less stress.

By using PackUp users could easily keep track of related tasks, manage their cargo, estimate the cost of the move & select a mover that will fit their needs & budget.
More control equels less stress.

project STAGES

project Stages

The project was done in two phases, one marathon in 3 weeks

and than a further development and re-design in 4 weeks.

The project was done in two phases, one marathon in 3 weeks and
than a further development and
re-design in 4 weeks.

My role

UX Research
UX Design
UI Design

UX Research
UX Design
UI Design

Specs

Duration: ~ 7 weeks
Platform: Android
~9999 cups of coffee

Duration: ~ 7 weeks
Platform: Android
~9999 cups of coffee

project Goals

Design an engaging and user-friendly app
Plan a platform that connects the needs of the costumer
and the service provider (-mover)
Create a MVP showcase for digitizing
moving out procedure

Design an engaging and user-friendly app
Plan a platform that connects the needs of the costumer
and the service provider (-mover)
Create a MVP showcase for digitizing
moving out procedure

business Goals

Achieve a high user engagement & retention rate
Increase brand awareness & engagement among target audience
Create a competitive advantage through innovative features & user experience

Achieve a high user engagement & retention rate
Increase brand awareness
& engagement among target audience
Create a competitive advantage through innovative features
& user experience

user Goals

Reduce stress through sense of control and organization
Increase user's productivity and efficiency
Empower user's motivation and task completion
Provide a delightful and positive experience

Reduce stress through sense of control and organization
Increase user's productivity and efficiency
Empower user's motivation and task completion
Provide a delightful and positive experience

UX research

User survey & Interviews background

User survey
& Interviews background

The goal was to understand what makes a stress during moving out operation.
Also, what details and documentation people might keep and use, as well as tools for moving and dealing with movers.

Lead questions:

How stressful is moving out operation and why?
How do people seek professional movers and what is important
for them when choosing the right one?
In what ways do people use to manage and document the moving
operation and its details?
What specific preparations people make when they move to a new place?
What tools people use when managing moving out?

The goal was to understand what makes a stress during moving out operation.
Also, what details and documentation people might keep and use, as well as tools for moving and dealing
with movers.

Lead questions:

How stressful is moving out operation and why?
How do people seek professional movers and what is important
for them when choosing the right one?
In what ways do people use to manage and document the moving
operation and its details?
What specific preparations people make when they move to a new place?
What tools people use when managing moving out?

Key insights

70 adults, ages 18-65, whom had at least one move-out in their life answered.

As well as 3 users were interviewed.
Here some key insights I drew from the user research:

70 adults, ages 18-65, whom had at least one move-out in their
life answered.
As well as 3 users were interviewed.
Here some key insights I drew from the user research:

82%
Use some kind of tool for documentation and
task tracking
90%
On a scale of 1-5, claimed move-outs are
stressful (3+)
90%
Use digital professionals
board platform
56%
Won't use their private car
for transporting

“Understanding that no matter how well I prepare for the move, something will always go sideways, and you’ll pay more than what was agreed because *enter reason here* and its a very expensive and stressful process”

“Trust that someone will arrive on time, and take care of moving things in a good way, won't miss the deadline etc. Divide time in which everything needs to be done and remember everything before the move-out”

"Many tasks to follow, difficult tracking the transport
in real time - have all the cargo been loaded\ unloaded?”

"Many tasks to follow, difficult tracking the transport in real time - have all the cargo been loaded\ unloaded?”

56%
Won't use their private car for transporting

90%
Use digital professionals
board platform

90%
On a scale of 1-5, claimed move-outs are stressful (3+)

82%
Use some kind of tool for documentation and
task tracking

Competitive Analysis

Four related platforms analyzed. Also, I reviewed inventory and task management

systems (ex: Moving boxes, Notion, Professionals boards etc.).

I studied them according to 5 UX/UI aspects:

Navigation and Info. Architecture
Main user flow
Usability
Visual design
Features

Below, I scored them 1-10 and visualized it in a Radar Graph. Even though, I aware it’s a biased process

and it’ll be more accurate as a team is involved in the discussion -

I believe In this way, as part of the case study, it’s easier to communicate how good\bad a benchmark experience was.

Four related platforms analyzed. Also, I reviewed inventory and task management systems (e.g.
Moving boxes, Notion, Professionals boards etc.). I studied them according to 5 UX/UI aspects:

Navigation and Info. Architecture
Main user flow
Usability
Visual design
Features

Below, I scored them 1-10 and visualized it in a Radar Graph. Even though, I aware it’s a biased process and it’ll be more accurate as a team is involved in the discussion - I believe In this way, as part of the case study, it’s easier to communicate
how good\bad a benchmark experience was.

Mobile platforms

“טרנזיט - Tranzit”

(Israel)

Move mate

(Canada only)

Web platforms

“Move it”

(USA only)

Get Moving

(Israel)

Mobile platforms

“טרנזיט - Tranzit”

(Israel)

Move mate

(Canada only)

Web platforms

“Move it”

(USA only)

Get Moving
(Israel)

Strong Suits

Mover comparison

Documentation for reuse

Bidding comparison system

Clear, linear user flow

Social proof and review

Pain Points

Outdated designs

Broken usability

Feels like a chore

No delight

Not personalized

No clarity of action and status

No action feed-back

key insights Summery

Strong Suits

Mover comparison

Documentation for reuse

Bidding comparison system

Clear, linear user flow

Social proof and review

Pain Points

Outdated designs

Broken usability

Feels like a chore

No delight

Not personalized

No clarity of action and status

No action feed-back

Solutions

Personas

UX DESIGN

I approached the project in an S, M, L manner by planning the system at a broad level

before zooming in. I addressed two main stressors: lack of control & timeline considerations.

Thus, the app was built on a timeline concept of "start-present-future" flows.

Also, I focused solely on the customer flow due to scheduling constraints.

I approached the project in an S, M, L manner by planning the system at a broad level before zooming in.
I addressed two main stressors:
lack of control & timeline considerations. Thus, the app was built on a timeline concept of
"start-present-future" flows.
Also, I focused solely on the customer flow due to scheduling constraints.

app architecture

The system utilizes a dashboard interface, with the "control station", displaying the user's KPIs.

This allows for easy management and control of important aspects of the move from a single screen.

The system utilizes a dashboard interface, with the "control station", displaying the user's KPIs.

This allows for easy management and control of important aspects of the move from a single screen.

wireframes + user flows

First vs. second Versions & why I had to redesign

First vs. second Versions
& why I had to redesign

I divided the project into two phases, as outlined in the Design Schedule. The goal was to showcase the MVP,

which involved designing three main flows:

the "First-time", a "Typical Preparation Day" & a "Termination Day" (which will be discussed in the future work section).

Initially, I took a linear approach to the flow. However, after conducting a usability test with five participants,

I identified a flaw in the design.

I divided the project into two phases, as outlined in the Design Schedule. The goal was to showcase the MVP, which involved designing
three main flows:

the "First-time", a "Typical Preparation Day" & a "Termination Day"
(which will be discussed in the future work section).

Initially, I took a linear approach to the flow. However, after conducting a usability test with five participants,
I identified a flaw in the design.

Legend

‘Start New move’ flow

(Before completing inventory)

‘Start New move’ flow
(Before completing inventory)

typical day: ‘Pick a mover’ flow

(after completing inventory)

typical day:
‘Pick a mover’ flow
After completing inventory)

uI style guide

To balance the task-driven mindset of the move-out process, I designed the UI with

a balance of 'seriousness' and delight, a “I’m-not-looking-at-a-chore-lists” screens approach.

Branding was also considered as an important aspect of UX/UI design to create
a memorable and differentiated app.

While a clean and modern UI was initially tested, it felt anemic and lacked personality.

To address this, I chose a graphic language that resembles cardboard to lighten the mood and reflect the draft and plan state of the move-out process.

To balance the task-driven mindset of the move-out process, I designed the UI with a balance of 'seriousness' and delight, a “I’m-not-looking-at-a-chore-lists” screens approach.
Branding was also considered as an important aspect of UX/UI design to create a memorable and differentiated app.

While a clean and modern UI was initially tested, it felt anemic and lacked personality.

To address this, I chose a graphic language that resembles cardboard to lighten the mood and reflect the draft and plan state of
the move-out process.

Typography

Poppins font was chosen for its modern and san-serif style, which allows for fast and easy reading. It also strikes a balance between communicating a degree of seriousness while also not overwhelming users with too much "delight."

Poppins font was chosen for its modern and san-serif style, which allows for fast and easy reading.
It also strikes a balance
between communicating a degree of seriousness while also not
overwhelming users with
too much "delight."

H1_Poppins_24px

H2_Poppins_20px

Body_Poppins_16px

Tool-tips_Poppins_14px

Color pallet

Pallet extracted from the common association when it comes to moving and packing is the vivid atmosphere of an empty room filled with brown cardboard boxes.

As most household objects are removed, the windows become more prominent, highlighting the blueish colors of the sky outside.

Pallet extracted from the common association when it comes to moving and packing is the vivid atmosphere of an empty room filled with brown cardboard boxes.

As most household objects are removed, the windows become more prominent, highlighting the blueish colors of the sky outside.

Iconography, status & Labelling

Iconography, status
& Labelling

illustrations

App Logo

Logo was designed in the same graphic language as the app, keeping distinguishing brand in mind.

Prototype

Or watch link here

Features & iterations

I conducted a usability test to find what should be redesigned.

In order to show the app MVP, here are the main features showcase

and reasoning of several screen iterations (amongst other wireframes):

I conducted a usability test to find what should be redesigned.
In order to show the app MVP, here are the main features showcase and reasoning of several screen iterations (amongst other wireframes):

The home screen
displays KPIs for the
user's move:

Cargo volume and est. cost
provide an understanding of scope of expenses, and creating reliance with the mover.
Time counter helps users
manage time effectively.
mover information, gives the
users confidence
in their chosen service provider.
To-do tasks provide a sense of progress and accomplishment.
KPIs on home screen provide quick overview of move progress and inform users of next steps.

Move Hub & KPIs tracking

The home screen, "dashboard", displays KPIs

for the user's move:

Cargo volume and est. cost provide an understanding
scope of expenses, and creating reliance with the mover.
Time counter helps users manage
time effectively.
mover information, gives the users confidence
in their chosen service provider.
To-do tasks provide a sense of progress
and accomplishment.
KPIs on home screen provide quick overview of move
progress and inform users of next steps.

move Hub &
KPI Tracking

Inventory management

Inventory
management

app for tracking belongings during
a move.

Inventory management is a crucial feature in the app for tracking belongings during a move.

Helps ensure nothing is lost or forgotten
during the move.
Users can upload previous item lists
for future moves.
Send inventory to inform the mover.

Helps ensure nothing is lost or forgotten during the move.

Users can upload previous item lists for future moves.
Send inventory to inform the mover.

Helps ensure nothing is lost or forgotten during the move.

Users can upload previous item lists for future moves.
Send inventory to inform the mover.

Mover picking (& Bidding system)

Mover picking
& Bidding
system

Users select a moving company that suits their requirements and budget through a bidding system & professional board API.

Users can create a cargo list and receive quotes from multiple moving professionals.
Chosen design allows users to compare and select a moving company from received quotes.

Users select a
moving company
that suits their
requirements and budget through
a bidding system
& professional board API.

Users can create a cargo list and receive quotes from multiple moving professionals.
Chosen design allows users to compare and select a moving company from received quotes.

To-do tasks

a tasks to-do,
in order to increase control
over the move.

Implemented a tasks to-do manager to increase control
over the move.

Identified common move tasks & an intuitive subsystem
to create, track & complete tasks.
Added ability to set reminders and deadlines for each task to help users stay on track.
Added feature to prioritize tasks and set levels of urgency for effective time management.

Identified common move tasks & an intuitive subsystem
to create, track & complete tasks.

Added ability to set reminders and deadlines for each task to help users stay on track.
Added feature to prioritize tasks and set levels of urgency for effective time management.