UX/UI Design + Web Development

Custom design & development of e-commerce site and Web App

Toolkit:

UX/UI Design + Web Development

Custom design & development of e-commerce site and Web App

Toolkit:

01.

Issue to solve

Boycapel had a website developed on Wix, with an extensive inventory, inconsistent categorization, UX/UI limitations for mobile browsers, and difficulties operating with multiple exchange rates and different payment gateways.

02.

Objective

The challenge was to position themselves in the Stores and sell in different currencies. Additionally, to improve the design and navigability of the web store, refine and migrate the huge inventory from Wix to a more flexible platform in order to reach a larger target audience and boost their sales.

03.

Solution

Developing a low-cost mobile application for their luxury brand products store, which started selling online during the COVID-19 pandemic.

03.

Solution

Developing a low-cost mobile application for their luxury brand products store, which started selling online during the COVID-19 pandemic.

Work Process

DURATION
‍6 months

START
‍January 2022

INDUSTRY
Retail/E-commerce

PLATFORM
‍ Web Responsive

Research

Identification of the problem
Hypothesis
Proposed solution
Interviews
Archetypes / User personas

UX Design

Data analysis
Customer Journey Map
Information Architecture
Low-fidelity Wireframes
Userflows

Prototype

Medium-fidelity wireframes
High-fidelity wireframes

Work Process

DURATION
16 months

START
‍January 2022

INDUSTRY
Retail/E-commerce

PLATFORM
‍ Web Responsive

Research
Identification of the problem
Hypothesis
Proposed solution
Interviews
Archetypes / User personas

UX Design
Data analysis
Customer Journey Map
Information Architecture
Low-fidelity Wireframes
Userflows

Prototype
Medium-fidelity wireframes
High-fidelity wireframes

Research

UX Design

Prototype

ㅤ

Jan 22

Feb. 22

Mar. 22

April 22

May 22

June 22

Sep.22
‍

Problem Identification

Working Hypothesis

Solution Proposal

Interviews

User personas

Data Analysis

CJM

Userflow

Information Architecture

Low-fidelity Wireframes

Medium-fidelity Wireframes

High-fidelity Wireframes

User persona

Motivations

Latest Trends. Keeps abreast of what's in and out in the world of fashion and design.

Loves to travel and explore vintage shops worldwide. Is strongly connected to the concept of "circular fashion".

Frustrations

She's frustrated by accumulating stuff, which is why when she loses interest in something, she prefers to get rid of it.

She also dislikes long queues or waiting. If she wants something, she wants it right away.

User persona

Personal Information

Name

Age:

Location:

Specialty:

Ángeles

37
‍
Palermo, Bs As

Designer

Motivations

Latest Trends. Keeps abreast of what's in and out in the world of fashion and design.

Loves to travel and explore vintage shops worldwide. Is strongly connected to the concept of "circular fashion".

Motivaciones

Utilizar la tecnología para optimizar su tiempo en el trabajo, agilizando el proceso de las consultas médicas.

Quiere aportar con la digitalización de sus procesos a la despapelización y así generar un ambiente más saludable.

Frustrations

Personal Information

Name:

Age:

Location:

Specialty:

Ángeles

37
‍
Palermo, Bs As

Designer

Frequently Used Apps

Spotify

Mercado pago

Tik Tok

Instagram

User Journey

Stages of the Journey

Stages 1

Stages 2

Stages 3

Stages 4

Stages 5

Stages 6

PREPURCHASE

PURCHASE

POST-PURCHASE

Actions

The customer learns about new product entries through social media.

Check the website for updates and examine the products that may interest them.

Select a product and add it to your shopping cart.

The system asks you to identify yourself or log in with an account.

Proceed to enter your information and make the purchase with a credit card, PayPal, or cryptocurrencies.

Choose the shipping to your home for the product.

Pain points

The ratings found on social media and Google regarding customer service are not the best.

You know that when a new product is introduced, it's usually in high demand by other customers.

You're not sure if the size or fit of the product you like is right, beyond the information you get on the website.

You're distrustful of the accuracy of the product. You feel that the photos may not fully match the product you're looking for.

The return policy is too strict.

The user isn't informed about the location of the purchase during delivery.

Feelings

Oportunities

Needs to buy a quality garment for an important social event they have and knows that they can find it at Boycapel.

You can contact the store owners via WhatsApp to inquire about more details regarding the products.

The application could incorporate Augmented Reality so that the user can "try on" a product before purchasing it.

The login process to the system could be more intuitive and user-friendly.

The customer could receive a personalized newsletter with updates on new product arrivals tailored to their preferences.

Having better tracking of the product's shipment.

Userflow: Purchase Product

Prototypes Low Fidelity

Final Prototype
Before & After Home

More visible payment methods

Currency change accessible to the user at all times

The information architecture was redesigned

Faster product visualization

Before & After Navigation Menu

The entire dropdown navigation menu was redesigned, saving one click

The content of information within the menu was also reorganized

Categories and subcategories of products more visible and accessible to the user

Before & After selecting a product

Product search was added and filters and categories were included to optimize searches

The option to select a product as "My Favorite" was incorporated

Personal Information

Personal Information

PREPURCHASE

PURCHASE

POST-PURCHASE

Let's work together!