Design work is always exciting to me because I'm constantly learning new things and challenging my perspectives!
Design work is always exciting to me because I'm constantly learning new things and challenging my perspectives!
Role
UX-UI Designer
Responsibilities
design, prototyping, wireframing
Date: March 2021
Time: 3 Days
Find those unique items and put a personal
touch to each room
About the project
The assignment was to create a design system with at least three defined text styles and at least three defined
color styles to be used repeatedly in the design.
The prototype should have a fairly high finish and be clickable.
The business concept
At Piece By Piece we don’t think of design in the sense of seasons or trends.
We believe our products have a life of their own which transcends any temporary trends and fashion.
The beauty of each product carries itself and ultimately becomes a part of your home for a lifetime.
The inspiration for each product comes from the world of art.
Piece By Piece
A furniture website and an E- commerce UI case study.
Views to be included:
View showing many products (at least 8). Use real pictures.
Shopping cart view
Check-out.
Summary of the purchase.
View to enter an address, payment info, etc, then confirm.
View for an individual product (more pictures, more information, buy button)
Filtered view. You choose how to filter.
Each page should have a header containing a logo, some text links, and a shopping cart icon.
Note: The shopping basket icon should indicate when a product has been added to the shopping cart.
VISUAL DESIGN
Color palette
HEX: #000000
HEX: #C4C4C4
HEX: #E5E5E5
HEX: #F5F5F5
HEX: #FFFFFF
HEX: #80837C
HEX: #C2C2BA8
FIVE PRIMARY COLORS
TWO SECONDARY COLORS
HEX: #94DCB9
THE ACCENT COLOR
Typography
DEVELOP
From browsing to a purchase
The below information expands on the process of browsing on the website, looking into a detailed view of a product, and finally making a purchase.
Sofas and Armchairs
Step 1:
using the filter to select off-white colored sofas and armchairs.
Product information view
Step 3:
Product view of the selected sofa
The checkout
Step 5:
the checkout. Entering the contact and delivery details.
Payment details and information regarding the total price.
The colored filtered view
Step 2:
here is the filtered view
The shopping basket with 3 items
Step 4:
showing the shopping basked containing 3 items.
Thanks for the purchase
Step 6:
paying for the items and receiving a thank you for the purchase. Also receiving the order number.
Website overview
Homepage
Sofas and armchairs
Chairs
Tables
Accessories
The final high fidelity website
Lenght Of Demo:
05:37 min
REFLECT
What I learned from this
On this project, my main focus was to get to learn Figma as a tool.
I was also concerned about building a brand that felt coherent, minimalistic, and modern.
Looking back on this project I could have improved on the UX aspects more.
