Turning Transactions Into Engagement

Turning Transactions Into Engagement

All you want to do in one place: Shopping, streaming and social media

Role

UX/UI Designer

Client

Independent

Product

E-Commerce

Duration

1-2 Months

CONTEXT

An e-commerce platform with all the features of social networks, like Direct Messaging, Followers, Feeds and Streaming (Live and video reviews).

Meaning:

"Escaparate" (noun, m)

A place or ocasion for presenting something favourably to generate attention.

Showcase

  • Storefront

  • Display

  • Shopwindow:

Meaning:

"Escaparate" (noun, m)

A place or ocasion for presenting something favourably to generate attention.

Showcase

  • Storefront

  • Display

  • Shopwindow:

LBB

FIRST STEPS

The whole process was divided into 3 stages: B2C platform, networks and streaming.

DESIGNING FEATURES

This framework for approaching the project brought up a number of questions to be answered:

What are the pain points of the currents B2C platforms?

What functionality do people expect in e-commerce platforms?

What existing products influence what people expect?

What functionality do people expect in streaming platforms?

THE RESEARCH

In order to obtain these answers, a series of interviews were conducted in the following stages:

Initially we searched the most popular apps/platforms in order to test the most fitting apps

Observations were made while users were using the existing B2C, social networks and streaming platforms/apps

1 on 1 interviews with occasional/frequent consumers and entrepreneurs.

THE OUTCOME

General analysis based on our research on users:

USER PERSONA

Defining archetypical users whose goals and characteristics represent the needs of a larger group of users

USER JOURNEY

Breaking down the user experience actions and emotions during a purchasing situation while using a B2C platform.

USER FLOW

Possible path/paths that a user will follow in an application to complete a task.

Possible paths that a user will follow in an application to complete a task.

WIREFRAMES

Let’s tidy all those hand-drawings up and organize them into low-fidelity wireframes, shall we?

UI KIT

We proceeded to create the components based on the logo and colour pallete provided by the client.

HIGH FIDELITY

First impressions of the screens in high fidelity wireframes taking into account the following:

Drop shadows effect for better contrast

Rounded corners and buttons

White space consistency

Colour scheme

Establish button hierachy