AEON Mall Project
1. Introduction
For this project, I was provided with a brief to design a brand new e-commerce application for AEON Mall, one of the biggest shopping malls in Vietnam. While the primary goal of the new e-commerce website was to physically bring customers into the store, they also wanted to broaden their customer reach beyond HO Chi Minh city by allowing products to be purchased online for delivery or for in-store pickup.
The site needed to reinforce its core business values: traditional, fun, and creative. The site also needed to distinguish AEON Mall from other e-commerce retailers by emphasizing their highly curated inventory of hand-picked specialty items.
Timeline: 6 Months
Materials: Cards, Sticky Notes, Pen, Paper, Figma
UX Techniques Used: Competitive/Comparative Analysis, Mind Mapping, User Personas, Information Architecture, User Flows, Wireframing, Prototyping, Usability Testing
The primary business goals for this website included:
+ Having clear ways of locating specific products
+ Ability to support a single page for each product
+ Having an efficient means of purchasing one or more products
+ Steering customers towards popular products.
2. User research
Persona
Who are we really designing this website for? With the brief I was given, the client had already defined 3 user personas, each with specific needs and pain points that needed to be addressed in the website.
Based on the three user personas, I identified the main user needs I wanted to address in the website while also taking into consideration the needs of the AEON Mall e-commerce application.
The primary needs I defined were:
+ Clear product organization for a seamless shopping experience
+ Product search to easily find products
+ Helpful Product Suggestions that reflects Jeffrey’s Toys expertise and curated inventory
+ Customer brand relationship to establish trust
+ Detailed product information to ensure proper product selection
+ Product reviews to help make informed buying decisions and allow for user input
+ Efficient checkout process to save users time and allow for easy purchase of products
Competitor Research/Comparitive Research
To gain inspiration for my e-commerce application, I began by identifying 3 main competitors, specifically Vietnamese e-commerce companies in Vietnam, and 2 main indirect competitors in the international market. The direct competitors I analyzed included Lazada Vietnam, Tiki, and Shopee. The indirect competitors were Amazon and eBay. My goal was to compare and identify common features across these sites and potential opportunities for AEON Malls application to differentiate itself.
The most important takeaway from this activity was learning how different e-commerce application organized their products selection and the overall layouts they used for those mobile applications. This was helpful information that helped solidify the stage for my second phase of research.
Mind Mapping and Generating Ideas
After completing my competitor/comparative research, I then went on to complete a mind map. For this project, the needs of the business and the needs of its customers/user personas were already defined into a long list of information. All together this list was overwhelming, so I referred to the technique of mind mapping to help me assess it. The point of this activity was to help me organize the information into more defined ideas and then establish relationships and hierarchies amongst those ideas.
3. Information Architecture
Site Map
With the results of the mind map and inspiration from other competitor applications, I created a information architechture to define the overall structure of the website. This was to ensure that products were going to be placed where users would expect to find them when visiting the website and make the experience more intuitive. Also, I worked with dev team to visualize the user flow of registration, claim points and redeem vouchers
User Flows
After defining the “bigger picture” of the experience I needed to provide the users, I created a user flow for a personas to make this experience more specific to each of his/her goals. The point of this was to define the intended steps each user might take through various pages and actions on the website in order to complete their goal. Not only would this allow me to focus on what each of the users needed to accomplish, but also how to deliver that experience in the most effective manner possible when designing my website.
The first user persona I addressed in my user flows was Jenny. Jenny’s main goal was to open AEON Malls to look for a new for her son. Jenny’s user flow (illustrated below) shows how she might go about searching for a brand new toy and the several different paths she could take to successfully purchase it.
4. Development Phase
Sketching
Once I organized all my insights from the exploration phase, I began to design the application. To start this process I began to sketch several of the site’s main screens, using my user flows as a guide. This allowed me to quickly explore several concepts for the website layout. I then tested this with 3 participants to validate whether these solutions addressed both the user and business needs.
Wireframing
Based on the feedback and personal insights I learned from the sketching phase, I began to design my first wireframes using Figma. I made sure to prioritize the features that would best address the needs of the users throughout the application.
After meeting with other stakeholders from the infrastructure team, web front-end team, and project managers, we reached a consensus on multiple business rules and technical constraints that affects the design.
This feedback is used to update the design for several other rounds. I also elaborated the design for corner cases, empty states, error states,…
Once the design system was complete, I continued on to design a high-fidelity prototype based on the wireframes and design system.
Usability Testing And Customer Feedback
Once I completed my wireframes, I created a prototype of my website to begin usability testing. This would allow me to evaluate how users would engage with the proposed website solution and validate whether it was addressing the primary user needs. It was important to test with mid-fidelity, greyscale wireframes to gather honest, critical feedback from potential customers and to solidify the functionality of the website before addressing the visual design.
I conducted a usability test with AEON Mall participants including: and asked them to complete three different scenarios to put themselves into the shoes of my user personas. These three scenarios included:
1. You need to buy a toy for your daughter. Show me how you would find a product and successfully purchase it.
2. Show me how you would find out what events are happening at Jeffrey’s Toys next month.
3. Show me how you would inquire about a toy that you couldn’t find when searching for it on the website.
These were my key findings from the tests:
+ Overall users were able to easily navigate the application and locate products and information
+ Participants found promo code section to be distracting in checkout flow
+ A few participants wanted a way to inquire about products if they didn’t want to call
+ Some felt there could be a greater push to bring people into the store
Polishing a gem
After several rounds of iteration, the design is deemed fit for implementation. During implementation, I will need to be on standby to support if there is any problem related to the design
5. Reflection and Learning
This case study represents the start of a bigger design process for the development of this e-commerce application. The next steps I would like to take for this project would be to continue to conduct usability testing and further iterate on my designs. Given more time, I’d like to explore more ways AEON Malls can bring customers into the store from their application. I would also like to create content for the project and start to incorporate more of the visual style and branding of Jeffrey’s Toys. Below you can find my initial explorations into how this visual style might look. I wanted the visual design to emphasize these core values: simplicity, creativity, and tradition.