Year / Timeline | 2022, 3 months
Project | Asian-Canadian Special Events Association (ACSEA)
My Role | UX / UI Design
Platform | Desktop | Tablet | Mobile
Team Member | Dionne Mok (UX / UI designer), Art Director, Web Administrator, Web developers, Senior Designers
ABOUT
What is Luv2 Think Store
Over three months, I worked with a team of professionals to create an E-commerce website called Luv2 Think Store. The website was designed to promote art appreciation and enjoyment, and it offers a range of high-quality merchandise and books that reflect the key assets of the art and culture of Asian-Canadian Special Events Association.
My Role
User experience & Interface Design
While gaining a deeper understanding of our target audience, I designed a website layout that aligned with our brand's mission. I worked closely with the Web Administrator, developers, and marketing team to create a user-friendly website that provided helpful content to customers. My main objective was to increase purchases and support the organization for future events.
Challenges
How can we sell our merchandise both onsite and online to attract more supporters for Taiwanfest and Lunarfest?
Luv2 Think Store
- You can visit https://store.acsea.ca for the launched website -
Take a look at my process
How did we get there?
MY UX APPROACH
Since this is the first time for the organization to create an e-commerce platform, we need to decide on what platform to develop with the budgets we have.
To choose a platform for our e-commerce site, I researched available options and narrowed it down to WordPress with Woocommerce and Shopify. We already use WordPress for other sites, and Shopify is a popular e-commerce platform.
1. Research ( Compare analysis WooCommerce VS Shopify )
To understand which platform to build, I create a proposal to show the different features and prices between Woocomerce and Shopify. I included information on monthly plans, features &plugins, provided templates, and pros and cons to give in-depth ideas of how much we will be spending on building the website—more details of the comparative analysis view here.
Insight :
- We find WooCommerce is free to use as long you have WordPress installed. It is excellent to customize your design with countless themes and plugins to build the store—excellent SEO (search engine). But on the downside, you have to update consistently manually and don't have specific tech support when needed.
- Shopify is easy to manage and use. Great at 24/7 support if users run into any technical troubles. On the other hand, it has limited customization. There are also many apps and integration available to extend the store's functionality.
So... Who is the Winner here?
Woocommerce with WordPress
Why? Considering our budget, we decided to take advantage of what we have existing on WordPress. Also, we want to focus on customization as we have limited tech skills; we believe more available plugins to be used will be better.
- Free to use
- Unlimited customization
- Many plugins are free
- Countless themes and plugins to build the store
- Excellent SEO ( search engine )
Design Goal
Utility
Welcoming for new users
Accessibility
Considered usability across different channels and devices, all web browsers are available.
Usability
With visual clarity and familiarity consistency, Users can easily navigate the website.
2. Understanding who are the target users
As part of the research process, I identified key traits in the niche and analyzed the layout of similar websites to ensure our visitors would feel familiar and comfortable. I also spoke to both new and old supporters of our organization to gather feedback
Insight:
- People who have been supporting the organization for a long time.
- New people are interested in participating during the event and would like to come back for more until next year.
- People who have purchased merchandise onsite and would like to purchase more.
3. Share design aesthetic
Branding + Colors style (Moodborad)
This phase involved branding, not just a simple logo design, by consulting with the art director on the look of their social media profile, the brand colors, the tone of voice, and what content will be displayed on the featured website image.
A shared design aesthetic allows a design team to produce expected results. If you watched Silicon Valley, you might recognize this term from season 3, episode 4, when Dan is designing a case for a storage device that Pied Piper(client) has created. The clips are from here.
Keywords: Minimal, Friendly, Cultural, Caring
4. Information Architectrue & User Flow
Constantly iterating and refining the flow and process while also experimenting with features requested by Art Director and marketing team. This phase allows us to simplify navigation and ensure the hierarchy and logically structured content to help users locate products and information.
Lesson to learned:
- To be honest about what kind of features can implement and what are unable to achieve, Communicate with the team, and adjust quickly before going through the making process.
Hierarchy of E-commerce (Maslow's Hierarchy of Needs)
Before I started working on the visuals design (UI), I realized that I needed a guideline to focus on the "Needs" of the users. So applying the hierarchy of e-commerce from here are helpful reminders to keep staying on the focus of the users' needs.
"People don't necessarily need to fulfill everything in a lower tier before they are able to fulfill elements within higher tiers. It is more than those higher tier items tend to be more valuable when lower needs are met first."
5. Wireframes: low-fidelity mockup with conversions in mind
Wireframes are crucial in complex builds as they help design teams present concepts before diving into detailed visual designs. I collaborated with the art director and marketing team to ensure we incorporated features that potential users requested, such as larger image grids, quick add-to-cart functionality, information on how to find us, and ways to support the organization's future events.
6. High-fidelity Wireframes: Visual Design
Thus having built the mood board/branding early helped build the visual design around the brand logo and the brand colors, instead of the other way around, which would have produced inconsistencies and required multiple iterations to the website and online presence.
Does it ship for free? Can I return it?
The e-commerce website lacked displaying product rules and restrictions, which was a significant flaw. To avoid any surprises for customers during purchase, we needed to inform them of any rules and restrictions beforehand as we only ship products directly to their address.
TAKEAWAYS
To avoid being overwhelmed during the design process, I ask myself a few key questions such as knowing the target audience's wishes, providing necessary information and functionality for users, and maintaining consistency in the brand's representation across devices. Continual iteration is crucial, and identifying potential issues before customers do is important for good UX design.
Reflection
Insights
01. Resource constraints and On multi-tasking
While working on the website. Matching the aesthetics of the design with appropriate images was a challenge, but we managed to spread the task equally among the team and provide feedback.
02. UX design is never done
I realized that, similar to creating a portfolio, an e-commerce website is never truly "finished" because it requires constant updates and iterations to meet user needs and demonstrate a commitment to customer satisfaction
03. Communication between multidisciplinary teams
Clear communication across multidisciplinary teams is crucial. It is important to use non-design terms to communicate effectively with visual team, developers, and marketing. By working together, we learn each team's daily challenges and build an understanding, creating a cultural bridge and enabling us to work more collaboratively.
Trying to become a better
designer everyday !
© 2022 Dionne Mok - Designed with love and effort