Hafary
A retail supplier platform to shop for architectural material finishes for design projects.
A redesigned mobile responsive website for businesses (B2B) and customers (B2C) to shop for architectural material finishes.
PRODUCT
UX Research & Testing
Lo-fidelity prototyping
Hi-fidelity design
MY ROLE
TIMELINE
Individual
TEAM
SOFTWARES USED
Miro, Adobe XD, Indesign
3 months
Disclaimer: I am not in any way affiliated with Hafary.
User experience of current Hafary website is unintuitive and difficult to use for project planning by users.
PROBLEM
There are no prices shown. How do I make sure my selection falls within my budget?
“
I gave up with the website and went to the showroom to do my tile selection in person instead.
I wish the website provided more inspiration on how the products can be applied to my renovation project.
The filters look interesting, but I don’t understand them.
Quotes from User Interviews
”
What the current Hafary website looks like
How might we improve the website experience to help efficient and joyful project planning digitally?
To increase lead and sales generation for Hafary’s offline business
BUSINESS GOAL
Happy customer😊= More sales! 📈
USER RESEARCH
Conducted user interviews and consolidated results with aggregated empathy mapping
I consolidated my interview results with 5 users, who are a mix of professional designers and new home owners, into an aggregated empathy map to visualise my findings.
To summarise the users’ pain points into 2 main categories of “lack-ofs”:
Lack of clarity
There is a general confusion with the navigation of the website to its features, the enquiry of products, and a lack of information provided for a user to make a decision in their process.
1
Lack of visualisation
Users were unable to visualise how a particular product finish can be applied to their area of application.
2
Competitive Audit
I also did a competitive audit to learn more about Hafary’s direct and indirect competitors. This helped to inform me about the successes and misses of the competitors, which helped in the design process of this redesign.
It was at this point of the research process that I realised that the Hafary website
is not designed for their B2C customers 😢
Typically building material suppliers like Hafary deal directly with businesses (B2B), as consumers are not equipped with the knowledge and expertise.
Home owners increasingly want more autonomy in the design decisions of their newly designed home. The functionalities of the existing website are not intuitive to them and it lacks engagement.
Building personas
It is crucial to identify the user groups to target the redesign to, so that the redesign is able to fulfil the motivations and needs of all target user groups.
Mapping out projected User Journey of the website
From the data I collected, I created the ideal user journey map for each user persona to thoroughly document the entire sequence of events and interactions.
Revised Information Architecture
As the main user frustration was the lack of clarity and visualisation, the reorganisation of Information Architecture was critical for the success of the redesign.
LOW-FIDELTY PROTOTYPE
Using prototyping to visualise user flows
I sketched out possible prototypes on my iPad to visualise how the user would interface with the redesign before proceeding to the mock-ups and high-fidelity design.
HIGH-FIDELTY DESIGN
Building interfaces to make project planning more efficient and joyful
I designed desktop screens for the Hafary website, with a responsive mobile design. I improved on the visibility of the content that Hafary already has, while adding/improving features and information organisation to increase the website engagement. View prototype in full screen mode.
Narrowing the focus of the redesign into 3 areas of improvement:
1. Improved navigation and information provided
2. Improved user experience for product enquiry
3. Improved visualisation for user’s inspiration
IMPROVED NAVIGATION AND
INFORMATION PROVIDED
Previously
Top navigation bar only featured products, other key access points are hidden in hamburger menu.
Filters were too technical for the B2C user.
Information provided in the product page was insufficient for users to make decision to proceed with selection.
Redesign
Top navigation bar shows all key content and other user engagement sections, easier for users to search for categories.
Filters that appeal to all users are shown, technical filters are hidden.
Key information such as price, warehouse stock and showroom display availability are shown.
Reformatted product information page content so that it is immediately visible without scrolling.
Previously
Copy of Call-to-action button on product page is unclear that product will be added to cart.
B2C users had no real need to enquire directly to Hafary about the availability and price of selected products as their interior designer would do it for them.
Form input is open-ended, users may not fill in all the necessary information for Hafary to quote immediately.
IMPROVED USER EXPERIENCE
FOR PRODUCT ENQUIRY
Redesign
Added Add to cart button on product page to allow for multiple product enquiry.
Kept Enquire now button for single product enquiry only.
Added Export as PDF button in cart page for B2C users to download for further discussion with their designers.
Form input is now a guided experience to lead user to mainly enquiring about product availability.
Previously
Portfolio was hidden in hamburger menu.
Project shown had no context to where Hafary material finish was used. User was not able to visualise application.
Uninspiring to users.
FOR USER’S INSPIRATION
IMPROVED VISUALISATION
Redesign
Renamed Portfolio into Built Works for specificity.
New experience of community based sharing of built works by users, where users can “like” their inspired spaces.
Project information shows specifically application of product, and links user directly to the relevant product page.
OTHER FEATURES
Curated Interiors
Bringing Hafary physical showroom experience digitally, where users can shop for product via the vignettes of the space.
Blog
Previously, this section was named as News and Events, which did not seem appropriate for the articles published. I renamed this section as Blog, where articles about the latest trends in finishes and new interior design using Hafary tiles can be found, and gave it a home in the top navigation bar.
Challenges and Decisions
Decision to remove mobile app in redesign.
During a user interview session of the original website that we discovered the Hafary mobile app. None of the users interviewed downloaded the app nor did they know about its existence. I tested the mobile app and was put off by the slow loading of the images on the app. I liked that the prices of the products were shown, but wished that it was also reflected on the website. After much deliberation, rit would make better business sense to remove the app, and I should focus on integrating the better features of the app into the website.
Time frame.
One of the main challenges was the strict time frame I set for myself, as I was juggling my full-time job while working on this project without a team. I had to constantly motivate myself to finish what I started, even when there were times I felt stuck on how to move on. Ironically, I got my motivation from users I interviewed and conducted testing, as doing the research helped to reinforce why I had started this redesign in the first place.
Next Steps
This may be an unsolicited redesign, however I would love to explore the option of confirmation of order directly on the website, instead of enquiring about the supply before confirmation of order in the future. Also, accessibility of this website would be something that I have to look into, and should be made a priority in my next project.