AEG's product support
Overview points
Background
As a high end brand from Electrolux, focusing on the Australian market, AEG came to Niteco (my old company) with a request to update their product support feature. The concrete mission is to figure out the user friendly information architecture for their support page so that the workload of the support team will be reduced and the customers will not need to wait for so long.
The challenges
The most important part was to understand how to present the product line in this supporting feature so that AEG buyers can quickly find the support on the website without contacting the supporting team and wait for such a long time.
My approach
As mentioned above, the key purpose of redesigning this feature is to help users navigate around, finding their needed information without any real support. This means we had to start with the current flow in which users have specific questions in mind and find themselves here.
- Scenario-based research: With the specific user persona and most common demand of services, I started to create some most common scenarios in which users see themselves in this feature and navigate around to find the answer to their questions and run some quick testing on papers. From this testings, I got some concrete insights of what are the most popular services that users need in this type of product.
The outcome
The impact the work had on the business was amazing. People started sharing AEG supporting pages in the community and the workload of support team has been reduced around 20%
Key process
To get started with this project, I chose to go with Scenario-Based Research to figure out how to organize their information architecture of the supporting page so that customers can find what they look for within the shortest time.
Here's a brief overview:
- Defining User Scenarios: I identified typical tasks users perform on the supporting page, such as looking for the QR code to register for guarantee and understanding return policies.
- Creating Prototypes: Developed low-fidelity prototypes focused on key information and navigation structures.
- User Testing: Conducted paper-based tests with users to observe how they navigate and find information.
- Gathering Insights: Analyzed user behavior to identify intuitive sections and areas of difficulty.
- Iterative Refinement: Refined the layout and navigation based on user feedback to ensure critical information was easily accessible.
- Validating Architecture: Continuously tested and improved the information architecture to meet the most common user needs effectively.
Outcome:
My scenario-based research led to a user-friendly supporting page where users can quickly find information, improving their overall experience on our e-commerce platform. Below is the information architecture that we have placed in priority order (left to right) based on the research data.
2. Wireframe stage with iterations
At this stage, I focused on drafting out the solution with an interactive prototype version for our client to review and give feedbacks. I have had a lot of valuable review sessions in which I understand more from the wants and need from the business perspective and adjust the user experience based on that.
3. Brand Attributes
High-quality component documentation is essential for an effective design system, enabling everyone to make consistent decisions quickly and efficiently. Our goal was to create comprehensive documentation that supports every aspect of our design system while being organized, consistent, and user-friendly. We drew inspiration from established design systems such as IBM’s Carbon, Material Design, Atlassian, and Salesforce Lightning. These references provided valuable best practices, guidelines, and tools that we incorporated into our own system.
As the only premium product line in the Electrolux chain, AEG team put a note to the design team to align with the branding and stay premium.
Being premium
Navigation flow is everything in this feature, therefore, from the customer perspective, all high valued services need to be visible and easy to find.
Intuitive navigation
Being premium does not mean that the wording in this service needs to be fancy. The simple and common use of wording is the best choice here.
Simple wording
Brand identity is always needed to keep aligned. People need to quickly catch the identity of the brand such as icon color, small border...
Identity recognition
4. Responsive version
Multiple steps have been taken to reach the final version of design after going back and forth with customers. The iterative design process, characterized by multiple steps and continuous customer engagement, was crucial in developing an effective supporting page for AEG. This approach ensured that the final design was highly responsive to user needs, resulting in improved user experience, increased customer satisfaction, and greater operational efficiency.
Continuous iteration
The visual identity of AEG was the perfect opportunity to express what this place really is. I created a flexible visual identity that could be used in any possible application.
Organized system
On the way to reach to the same agreement, I have supported the AEG with the design system to get their product more aligned and easier to use for the next designers.
Responsive versions
I designed and supported with the responsive design as well for mobile and ipad screens with a view to bringing the best user experience for the end users.
Mapping platforms
Mapping the content across different platform with the same features are the most important part of this stage.
Responsive UIs
These layouts that adapt seamlessly to different screen sizes, from mobile phones to desktop monitors. This ensures users have a consistent experience regardless of the device they are using.
Amet minim mollit non deserunt
Amet minim mollit non deserunt
What I have learnt from this project
Impact