Timeline | 3 months

Project | Asian-Canadian Special Events Association (ACSEA)

My Role | UX / UI Design

Platform | Website | 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 collaborated with a small team of Art Director, Web administrators & Web developers, and a Marketing team to develop an entire E-commerce website from scratch.

Luv2 Think Store is an E-commerce platform that enhances art-enthusiast, appreciation, and enjoyment of the arts by the Asian-Canadian Special Events Association, which provides unique, high-quality merchandise and books that reflect the key assets of the art and culture as a whole.

My Role

User experience & Interface Design
With a better understanding of the target users, I was able to design the website layout that reflects the looks and feels of the brand's primary missions. Alongside the Web Administrator, I was able to assist in making the website. In the making process, I was iterating as I communicated with developers and the marketing team to provide helpful content to the customer. My main goal is to make purchases to encourage/ support the organization for future events.

Challenges

How might we create a place for supporters and new supporters of the Taiwanfest and Lunarfest to purchase our merchandise onsite and online to attract more people to support us?  

design-process

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.


Before I started designing the layout, I researched which platform would be the best to build with. Since the development team uses WordPress to make other websites, we can use the existing web host WordPress with Woocommerce. Secondly, we think using Shopify would be a great candidate since it is trendy to build with e-commerce.

1_

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.

Screen-Shot-2021-09-28-at-11.51.40-PM
Screen-Shot-2021-09-28-at-11.51.55-44PM

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 )

 

Screen-Shot-2021-09-28-at-11.57.41-PM

Design Goal

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 a way to identify key traits in the niche, understand how people arrive on those websites, analyze the layout to see design patterns, and ensure visitors of those websites will also feel familiar and comfortable on the new website and not be greeted by a completely strange experience that they wouldn't be familiar or feel overwhelmed by design.

During the research process, I was able to talk to a couple of the customers from new to old supporters of our organization, which I found

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.

Target-users
Branding
Logo-LuV2-01
Logo-LuV2_02

 

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.

information-Architecture
User-flow
Hierarchy

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 extremely important on complex builds because they allow design teams to introduce concepts before jumping into detailed visual designs quickly.

I worked closely with the art director and the marketing team to ensure their needs were met as we implemented features mentioned by serval potential users. These influenced the design by creating larger image grids, quickly adding to the cart, having a section informing the user how to find us, and how they can shop by supporting the future event in the organization.

 

low-frame


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.

Artboard-–-87
Artboard-–-118

Does it ship for free? Can I return it?

A significant flaw in the designs in e-commerce was that the website didn't display product rules & restrictions. Since we only ship the products directly to the user's address, we had to inform the user of any rules & restrictions before purchase. We wanted to eliminate any surprises for the customer down the line.

Artboard-–-99
Artboard-–-103

TAKEAWAYS 

It is always very easy to get overwhelmed by the amount of information to put on the website during the design process. So There are a few things I keep asking myself during my design process was:

- Know the buyers: What are the wishes of the target audience.

- Have users informed: What are the information and functionality user need for making a purchase.

- Keep design consistent: the brand must reflect on the website layout and be responsive across different devices.

As the website is on launch later, there must be a continuation of iteration in the process. But Identifying problems before a customer does is a hallmark of good UX design.

Reflection

Insights

 

01. Resource constraints and On multi-tasking

While working on the website, I also play the role of images editor, so thinking about what images will match the aesthetics of the design is a challenge for me. The project was facing a lot of time and resource constraints, but we could spread the task equally and give feedback to the team.

02. UX design is never done

Realized that just like making your portfolio, your website will never be "completed" because e-commerce needs constant updates, and iteration in the website is very important to improve the user needs to show that you care about your users.

03. Communication between multidisciplinary teams

It is important to communicate across multidisciplinary teams. Use non-design terms for the Visual team, developers, and marketing to communicate more clearly. We learn our way of communication as we work together. It enabled us to build an understanding of each team's daily challenges, encouraging a cultural bridge and providing an environment to work more collaboratively.


If you like my work, drop me a line to say hi. 👋

OPEN MAILBOX
dcmok@yahoo.ca

CONNECT

© 2022 Dionne Mok - Designed with love and effort