Bo-LOGO-Primary1

A case study of a UI/UX project

Made with Figma

Made with Figma

figma-logo-thin

PERSONA

PERSONA

PERSONA

PERSONA

Usually, I have to visit @least one recording studio a day, sometimes even up to 3 locations.

They can be @the oposite ends of the city. So, I need handy bags to carry my stuff in. And, since I like taking walks, I like to dress well and I want my bags to have a fancy look.

During those walks is the only time I have for online shopping. That’s why I always appreciate a useful app.

LEO

Leo Lindqvist

Leo Lindqvist

Age: 33 Status: Single, no children

Education: Bachelor of Music

Nationality: Swedish

Lives in: Sofia, BULGARIA

Age: 33 Status: Single, no children

Education: Bachelor of Music

Nationality: Swedish

Lives in: Sofia, BULGARIA

Age: 33

Status: Single, no children

Education: Bachelor of Music

Nationality: Swedish

Lives in: Sofia, BULGARIA

Professional Background

Professional Background

Occupation: Session/Studio Musician

Inconme: €2,500 - €4,000 / mo.

Occupation: Session/Studio Musician

Inconme: €2,500 - €4,000 / mo. 

Occupation: Session/Studio Musician

Inconme: €2,500 - €4,000 / mo.

 

Occupation: Session/Studio Musician

Inconme: €2,500 - €4,000 / mo.

 

User Environment

User Environment

User Environment

Devices: Smartphone (mostly used), tablet, smartwatch

Devices: Smartphone (most used), tablet, smartwatch

Devices: Smartphone (mostly used), tablet, smartwatch

Where: Travels a lot between studios in the city • Sometimes flies to
               locations in Europe

Where: Travels a lot between studios in the city • Sometimes flies to locations in Europe

Where: Travels a lot between studios in the city • Sometimes flies to locations in Europe

Where: Travels a lot between studios in the city • Sometimes flies to locations in Europe

Psychographics

Psychographics

Loves expensive brands of clothing
Always carries small-sized music gear with them Prefers walking to publuc transport or cars
Doesn’t trust brands he’s not familiar with

Loves expensive brands of clothing
Always carries small-sized music gear with them
Prefers walking to publuc transport or cars
Doesn’t trust brands he’s not familiar with

Loves expensive brands of clothing
Always carries small-sized music gear with them
Prefers walking to publuc transport or cars
Doesn’t trust brands he’s not familiar with

Loves expensive brands of clothing
Always carries small-sized music gear
Prefers walking to publuc transport or cars
Doesn’t trust brands he’s not familiar with

End Goals

To use a mobile app that lets him easily browse stylish but useful handbags while on the move between two studios. He is always in need of more than one type of bag, depending on his next destination

To use a mobile app that lets him easily browse stylish but useful handbags while on the move between two studios. He is always in need of more than one type of bag, depending on his next destination

To use a mobile app that lets him easily browse stylish but useful handbags while on the move between two studios. He is always in need of more than one type of bag, depending on his next destination

MOODBOARD

MOODBOARD

MOODBOARD

MOODBOARD

BoHB-Moodboard

Beautifully Animated Product Features 

A quick and attractive way to tell our "Persona" (Leo) what features he gets with our products. As the project brief clearly states - he's always on the run between places and doesn't have much time to browse.

STYLE GUIDE

STYLE GUIDE

STYLE GUIDE

STYLE GUIDE

FeaturesPage-Animate
styles-COLOR
styles-TEXT

COMPONENTS

COMPONENTS

COMPONENTS

COMPONENTS

COMPONENTS

Task Flow

The UX process where the user starts from the Home/Marketing page and the Flow(s) leads him to successfully completing an order. With all the UI beauty, of course :)

1-Homepage-Updated
2-Shop
6-Confirmation—D
TASK_FLOW
Mockup—ProtoArrows

Prototyping

To make the UX fun and interesting for the Persona, several animation flows had to be applied. Unlike software like Adobe AE and other, Figma has got no Timeline and keyframes animation options. Thus, it was necessary to apply several frames (#) to each animation.

USER FLOW

USER FLOW

USER FLOW

USER FLOW

BoHB-USER_FLOW-1920×1080 (Large)

Tap/click to enlarge

Our Scenario

Leo, a single musician, is looking to buy another handbag from a brand he's already familiar with. He opens up our mobile app, hoping to find a product he likes. He's doing this while walking between two job locations. 

Since this is published at an early stage - only a few tests were made - mainly with friends. The User Flow shows too many options for the user to go to the bad-end-scenario (close app) instead of the happy-end (pruchase). Furhter tests will shed more ligth on the matter. 

CheckoutProcess

And now
it's time to

Click to test the protype

* this an initial draft project and only some features/buttons are interactive

PAPER

Order originates in paper-chaos

More Works

Pieceslyric videos

BlackWings Lingerielogo design

#URBNweb design

Impressioweb design

Rosebourgalbum art • branding

Brewnetlogo design

A Rosedummy filler

Streets, Signs & PostersHow I see... (series)

The Living RoomHow I see... (series)