top of page
blue-design-background.png

Quiet Carpenter

About the project
About the Project

Create a responsive web app that satisfies the user’s needs of creating a custom space with beautiful furniture and decor. Elegant and modern decor that is minimalist yet bold with accents. A space where people can find quality products with variety and choices for decorating their space whether it’s minimal, bohemian, or anything else under the sun.

UX DESIGN 

UI DESIGN 

RESPONSIVE WEB APP

Role

UX Research Designer,
UI Designer

Duration

June 10 – August 10, 2022

MULTIPLE DEVICE USAGE

Category

E-Commerce, Furniture, Decor

Software

Figma, Photoshop, Illustrator

Platform & Devices

iOS and Android;

Desktop, Mobile, and Tablet

Challenge
The Challenge

Design an e-commerce app that helps everyone find products quickly and easily to match their particular needs. Keep in mind user stories assisting user's in their journey from viewing, searching, adding, buying, and shipping furniture and other home decor.

User Analysis
The Beginning
User Analysis

Who

User’s looking for help in creating a new space as independent individuals, require the assistance in creating a vision for their environment, and want a one-stop shop online.

Where

Users/consumers can access the app on any devices (phone, tablet, laptop, desktop) or platforms (iOS, Android).

What

An online store that can assist user’s to find all their decor needs in one place and to place orders that have easier delivery and returns for furniture and delicate decor.

When

User’s can access this responsive web app anywhere and at any time (data or wi-fi needed). It can be used while at home, at work, and during a commute.

Why

Users have become used to online shopping. Traditional stores have become cumbersome and the ability for users to sit at home and have their things delivered has gained a lot more traction since the pandemic.

User Flow
User Flow

To create an MVP for this app, the inevitable first step is to chart out a user flow diagram to better access the paths and flows needed to provide a good user experience.

MULTIPLE ITEMS IN THE
SHOPPING CART

As a customer, I want to be able to place multiple items in a shopping cart, so that I can purchase more than one item at a time.

FLEXIBLE AND MULTIPLE
PAYMENT OPTIONS

As a customer, I want there to be a variety of payment options, so that I can choose the payment method that suits me best.

VISIBLE AND RELIABLE
CUSTOMER REVIEWS

As a customer, I want to see what other customers have said about products and how they have rated them, so I can better judge whether the item is right for me.

Low Fidelity Wireframes
Low Fidelity Wireframes

To get a sense of how each task and flow works, the next step in the process was to create a low-fidelity wireframe. This step assists in creating a visual representation of the user flow created above and chart out the look of the mobile app.

Mid Fidelity Wireframes
Mid Fidelity Wireframes

Adding detail and context to the low-fidelity wireframes brings the app to life and creates a finer representation of each screen and flow. This step-by-step process brings about slow and subtle changes to help focus, first, on visual representation and then the functionality.

Usability Test
Usability Test

For better functionality and to remove and biases as a designer, I conducted a usability test by going over the specific tasks user's would need to do to navigate an e-commerce website. The overall feedback was positive and the flow felt easy to use for all the tasks assigned to the testers/users.

Errors Encountered

While user’s found the sign in to be easy and flexible, the button design for any social media login clashed with the input fields. It was confusing and a minor error.

While browsing the prototype, the navigation to the product page was creating moments of doubt, confusion, and wasn’t intuitive for user’s. This was a bigger error.

Once user’s reached the product page, they couldn’t figure out what gestures to use or where to navigate to see customer reviews. This was the biggest error.

Solutions Incorporated

The sign in button should be in an inactive state when the input fields are empty. They activate once the user has filled in all the fields.

The buttons for logging in with social media accounts resembles input fields and not buttons. These point have been clarified.

The account icon was moved from the tab nav to the top nav. This clears up space in the bottom navigation for better functionality by providing easy access to icons/functions used most frequently.

Better categorization to help facilitate the flow along with the side scroll function. The rectangular (simplified) shape makes the home page visually pleasing and provides the brand a cohesive look.

Declutter the tab navigation with elements that are used frequently by users. Removing the shadow from the menu improves the visual aesthetics.

To improve the experience of the page, the search bar was removed as it didn’t serve any navigational purpose. This increases the focus on the product and provides a better experience overall.

Providing a change in colour and an indicative arrow to pull up the drawer helped user’s navigate the page while creating a wholesome experience with easy in’s and out’s within
the page.

Style Guide
Style Guide

Colour

Typography

Components

Brand Values
Brand Values

The inspiration for this style came from the keywords chosen for this brand. The green-blue monochromatic and subtle colours perpetuate the brands ethos.

Sustainability

Be bold to create an idiosyncratic space for oneself utilizing the design and techniques of artists on this platform.

Design-Conscious

Feel at home and calm with a spacially-conscious and user-centric design, taking away the anxieties of everyday life.

Mindfully Crafted

Tastefully designed and quality products that satisfy the aesthetic needs of the consumer.

Trustworthy

To help assist our users/consumers make the right choices for building their own space and find the right decor for their environment and vision for life.

multi-screen-mockup.png
Final Design
Final Design

Login, Home, and Product

MOBILE RESPONSIVE SITE

Checkout and Payment

DESKTOP RESPONSIVE SITE

Product View

Product Gallery

Product Reviews

bottom of page