Bridging the gap between online and offline shopping experiences for HNAK
Disclaimer
This case study covers only parts of several months of design process focusing mainly on my role within the project. I have retracted or changed portions of findings to conceal any confidential information.
About
HNAK is the e-commerce branch of Al Musbah group, one of the leading retail companies in Saudi Arabia - with 190+ stores across the middle east region. HNAK is positioned to shift that focus by being the home of top international brands while actively telescoping and supporting local trends and talents.
The Challenge
HNAK recognized that their customer experience was not on par with their competitors, and that they needed to focus on the design of their services to enhance the brand experience for their consumers.
They realized that even though they had loyal customers, they had overlooked the importance of design in creating a positive and seamless experience for their customers. This involved improving the usability and aesthetics of their services, and adding features, functionality that customers value. The goal would be to create a customer experience that differentiates HNAK from its competitors and builds loyalty among its customer base.
Role
Project Lead
User Experience (UX) Researcher
Interaction (IxD) Designer
User Experience (UX) Designer
User Interface (UI) Designer
Timeline
2.5 months
Skills
Product thinking
Interaction design
Market research
Tools
Figma
Miro
Illustrator
Notion
Photoshop
UX Audit and Persona Mapping
For HNAK, we conducted a thorough UX audit and research process to identify opportunities for improvement on their website. This included reviewing analytical data, defining user archetypes, and enhancing navigation and user flows on every page of the site.
Prior to our work, HNAK had not had the opportunity to apply this process. As a result of our efforts, we were able to boost the performance of the website and provide a better user experience for visitors.
Wireframes
In crafting our wireframes, we meticulously aligned with the personas meticulously developed earlier. By incorporating key characteristics and preferences unique to each persona, we ensured a user-centric design. This approach facilitated the integration of features tailored to address specific needs, resulting in an intuitive and personalized user experience.
Website and UX Development
Our data-backed research combined with a strong cross-team collaboration ensured we took a more holistic approach to create the new website and the user flow.
We created over 50 pages and 100 unique visuals to improve communication of product features, descriptions and added testimonials and ratings to support the users needs. We optimised all the major flows to make sure that it caters to all the user archetypes.
Our team took a thorough and comprehensive approach to creating the new website for HNAK. By conducting data-backed research and collaborating across teams, we were able to create a more holistic design that took into account the needs of all user archetypes.
This includes things like usability, user experience, and the overall flow of the website. We created over 50 unique visuals and content, such as product features, descriptions, testimonials, and ratings, to better communicate with users and address their needs. All of these efforts helped to create a more effective and user-friendly website for HNAK.
My Learnings
E-COMMERCE CAN BE SO TRICKY!! Never has persona mapping and competitor research been more relevant than in HNAK. This was the first time we designed features that would target micro-behaviours of different types of personas.
Product features had to be tailor-made for multiple different types of shoppers, which is a welcome change from other products where we typically only had to deal with one type of persona.
The business side of this website played a very important role. We were tasked with specifically bridging the gap between online and offline shopping. This meant makes changes in the supply chain. For example, we introduced a feature that allowed shoppers to try clothes in a store near them before they make the purchase. This meant that the product was delivered not to a home, but a specific store.