top of page
ZAM Interior Design Website
Interior e-commerce responsive website design
“ One website to fulfill all your interior designing needs ”
Project Overview
My role: UX/UI Designer
Tools used: Adobe XD, Indesign, Photoshop, Illustrator
Project Duration:
3 weeks started from June 3rd, 2023
Product:
ZAM design is an online platform which offers interior design advice virtually. The personalized approach ensures a seamless communication process and stunning results that exceed expectations. The responsive website worked as an Ecommerce platform to give you overall information with pictures of the all types of interior design projects, the process how the design is completing.
The main goal of ZAM design is not only to get customers but also to take care and understand the needs of users.
Responsibilities:
-
Conducting interview
-
Paper and digital wireframing
-
Low and high-fidelity prototyping
-
Conducting usability studies
-
Accounting for accessibility
-
Iterating on designs
The Problem:
-
The plethora of criteria to consider before designing a space can be overwhelming.
-
Hiring the perfect professional designer who understands their individual, unique needs and delivers on time while being on budget is burdensome.
-
People find it difficult to visualize how furniture will look in their home.
-
Finding the right furniture piece with accurate measurements, suitability to personal taste, etc can be hard.
Project Goal:
-
Explain the brand’s values, ideology and design process in an easier manner and increase user satisfaction.
-
Users can browse and choose design approach. The session should be conducted entirely within the app.
-
Creating a user friendly interface with simple visual to catch up easy and understandable website design.
-
Users should be able to be recommended design options by the specialist both during and after the call.
User Research
When initiating the primary research phase, I decided to conduct qualitive interviews with individuals who were looking into furniture, had experience relocating or were looking into relocating.
Primary Research Goals
-
Understand the primary users and their motivation for furniture purchases.
-
Understand their experiences with moving and relocation.
-
Understand the considerations they take into account when making furniture purchases and before using online interior design platform.
-
Tools used in the process of looking for any interior design service.
User Pain Points
-
Users struggled with evaluating the credibility and expertise of industry professionals through traditional methods.
-
Users expressed a desire for transparency and trust in their interactions with professionals.
-
Users highlighted the need for tools and feature that assist in making informed decisions.
-
Users faced difficulties in locating and engaging with design experts.
Persona
Annabelle Chan is a new married wife planning to renovate their home who needs to find information about how designer is working, price of the service and the process, because she doesn’t want to waste time and energy making the wrong decisions by themseleves.
Annabelle Chan
Annabelle and her husband have just married. Both of them have collected their keys to their new BTO flat. They have taken out some time to do basic research on pre-renovation works. She is very concerned with the renovation cost given her tight budget hence, opting for contractor instead of an interior designer. However, there’s a trade-off is she opts for a contractor instead an interior designer.
Introduction
Age: 30
Education: University
Hometown: Singapore
Family: Married. No children
Occupation: Sales Manager
Frustrations:
-
Hard to understand the process
-
Hard to find an agency to execute her ideas perfectly.
-
Hesitant about trusting an interior service online portfolio.
Goals:
-
Renovation work needs to be cost effective.
-
Needs to have some form of home visualisation tool.
-
Needs to minimize any unmet expectations.
“It is very important for me to be able to envision my dream home before the works proceed.”
User Flow
Purchase a design package
Check Portfolio
Browse projects for more ideas
N
Y
Have enough information
User opens the app
Home Page
User wants to buy a design package
Create an account / log in
Starts a new project
N
Y
User knows what he wants
Design Package Page
Compare the design package
Design Package Detail
User wants to find a pro
N
Y
User knows project details
Questionnaire
Fill in project data
Request quote
Receive Quote
Contact the service
Have enough information
Review and compare
N
Y
User wants to move forward
Abandon
Connect with pro
Information Architecture
Home Page
Log in / Create account
Home Page
Browse Portfolio
What We Offer
Book a Consultation
How It Works
Residential Projects
E - Design Package
Fill the Form
Successful Projects
Commercial Projects
Custom Design
Ready To Work With Us
About Us
Why Choose Us
Testimonies
Press
My Dashboard
My Project
Account Details
Style Quiz
Residential
Design Packages
Commercial
Design Packages
Credits
Refer and Earn
Style Questionnaire
Buy a Design Package
Low Fidelity Wireframe
I created low-fi wireframes to look objectively at the website’s ease of use, name links, navigation placement and feature placement.
Key Website Page Wireframes
1
2
3
4
5
6
Key Mobile Page Wireframes
Annotations On Homepage
1
Account page will allow user to edit personal profile settings, check project design status, and update design preference anytime during the design process.
2
Fixed page header navigation bar directs to main content pages and subcategory pages.
3
Social icon links to various media platform created for ZAM design.
4
Themed button directs to the page of brand service aggregator.
5
Showcases of brand design projects had haven been completed.
6
Page footer allows users to subscribe company's updates and offers.
High Fidelity Wireframe
Usability Study Finding 1
Add navigation button direct to the design working process content page, so the users are able to understand the main purpose of making an online design package.
Design Iteration
Button was added to help users to better understand the design process and improve the ease of navigation.
Usability Study Finding 2
Add navigation button directing to the style quiz page, so the process is cohesively connected with in each step.
Usability Study Finding 3
User needs clear instruction to indicate when the user successfully logged into the account.
Design Iteration
“Log in” button was updated to the profile icon when the user enters into the account.
Design Iteration
Style quiz button was added before selecting design packages
Design Iteration
Button was adeed to access to the full service page.
Design Iteration
Enter user’s email to subscribe the company’s updates.
High Fidelity Wireframes
Takeaways
Even though the problem I was trying to solve was a big one, diligently going through each step of the design process and aligning with specific user needs to be helped me come up with solutions that were both feasible and useful.
I’m more au fait with how to test low-fidelity prototypes better by adding intentional content to be evaluated.
What's Next?
-
Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.
-
Continue iterating user flow based on another usability study.
© 2021 by ZAM Design . All Rights Reserved. Legal/Privacy
bottom of page