UX / UI Design

Illustrations

Branding

Data Vis

Animation & Video

Photography

Serve The User

For this project, I did research to define the problems, followed by working on the whole design process. I worked on all aspects of visual design. I conducted real-time background research to produce a meaningful product.

logo
Role and Timeline

This is a personal project that took me 12 weeks to complete.

Introduction

Serve the user is a space that combines art and fashion. We believe our art pieces do not only belong on your walls but on you as well.

challenge

Design an online gallery that will display our art pieces for sale.

Solution

The online gallery will display our art pieces and offer users the opportunity to own our unique product.

Design Process

5 steps of design thinking process.

emapathize

  • User survey
  • Problem finding

define

  • User research
  • User persona
  • User journey

ideate

  • User flow
  • Information Architecture

design

  • Wireframing

test

  • Usability testing

I began by determining the problem I was trying to solve for users. The first step was to EMPATHIZE through research by defining the executive intent and target audience. I conducted a few user interviews for insight into online shopping fashion.

After this initial research, I aimed to DEFINE the problem by interpreting my research and findings into personas and empathy maps.

The next step was to IDEATE potential solutions through the user journey map, user flow diagram, and information architecture.

The next step was PROTOTYPING the design's key flow and functionalities including constructing various stages of wireframes (low, medium, and high fidelity ) to get an idea of how the app would look whiles transitioning into the visual design and final screens using Figma.

I then TESTED the designs to validate usability, identify pain points, and any additional feedback that could help further improve my design.

Competitive Analysis

To build a unique product, I needed to understand how the current products are addressing users' needs, and to identify areas of potential growth. I began with an audit of the competitor's apps and online stores,

test

Strength:

  • Clean interface
  • Trendy and affordance clothing
  • Increasing sustainability
  • Branding
test

Strength:

  • High quality for fast fashion
  • Trendy clothing

Weakness:

  • Confusing sizes
  • Overwhelming options

Weakness:

  • Confusing interface
  • Highly expensive
  • For young consumers
Target Audience
  • Age Group: 18 – 40
  • Financial Status: Middle-class, Upper Class, and High class
  • User Category: Bachelors and married couples.
  • Target Skill: Users who are not into fashion to those who are very much into fashion and Influencers
  • Attitude towards technology: from those who are tolerant of technology to tech-savvy users.
Cross Channels
  • IOS
  • Android
  • Website
User Interviews

With a deeper understanding of the available options on the market for users, I turned my focus toward empathizing with users as I conducted live interviews of individuals from a wide range of backgrounds of the age group 18-35. Understanding and prioritizing the real-life values and behaviors of the user is foundational to good UX design.

To draft relevant questions, I needed to understand the factors that inform fashion decisions among the various target audience.

  • Current Wardrobe
  • Fashion style
  • Garment fit
  • Outfit colors
  • Stand of time.
  • Clothing quality
  • Price and budget.
  • Brand sustainability
  • Closet space
Questions
  1. How much importance do they give to raw materials while buying clothes?
  2. Why are they buying clothes?
  3. How many times will they wear it? Usage.
  4. How much does it cost?
Interview findings

Material Quality

  • People often feel cheated when they buy from an online store concerning the material displayed and the material received. The user asked for more transparency.

Relevant Size Guide

  • The size guide given on most of the websites is not very accurate.
  • There is also a lot of inconsistency with each product size.
  • This can be very misleading for users. Users expect a much more accurate size guide.

Pricing

  • People attach the price of a product to qualify. The higher the price, the quality of the product.
Problem Statement

A platform that combines art and fashion, by creating unique art pieces, where customers can purchase art and clothes

User Personas
logo
logo
User Personas
logo
logo
User Story
logo
User Pain Points
  • Misleading size guide.
  • Displayed products sometimes do not match the delivered product
  • Return policy.
Solutions
  • The app will provide an accurate size guide.
  • Images on the app will be consistent with the actual product.
  • 14-day return policy upon delivery.
User Journey Map
logo
logo
User Flow
logo
Storyboard
logo
logo
logo
logo
Wireframes
logo
logo
logo
logo
Feedback

After designing the lo-wireframes, I made a prototype to test on a couple of users. I use my research plan that outlines the research goals, enlisted questions, KPIs, methodology, information about participants, and scripts with tasks to complete.

Pattern Identification
  • It was observed that five(5) out of five(5) participants had trouble creating a new account. The create new account link is inactive.
  • It was observed that three(3) out of five(5) participants had trouble Selecting one of the items in the menu on the checkout page. This means the drag feature in the order menu page is not very intuitive.
  • It was observed that three(3) out of five(5) participants successfully selected a Pickup location. Meaning the pickup/change location feature works but needs adjustments.
  • It was observed that five(5) out of five(5) participants successfully Checked out their orders and received confirmations. Meaning the check page works very well.

Insight identification

  • Based on the theme that: Most users find it hard to create a new account. The insight is: users need better cues to create a new account.
  • Based on the theme that: Most users did not find it easy to select one of the items in the menu for the checkout page. The insight is: users need more cues or guidance to complete this task.
  • Based on the theme that: Drag and drop feature in the menu page works for most users, but there need to be clear instructions to guide users.
Color and Typography

A neat color palette with the right font is crucial to create a user-friendly yet elegant design.
The colors of the design are inspired by the color of meat–red, and the process of making steak. Represented by two shades of black.

emapathize
define
ideate
ideate
logo
Thank you