Quiet Carpenter
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
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.
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
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
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
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
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
Colour
Typography
Components
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.
Final Design
Login, Home, and Product
MOBILE RESPONSIVE SITE
Checkout and Payment
DESKTOP RESPONSIVE SITE
Product View
Product Gallery
Product Reviews