AA BATTERIES
Redesign of an Asian American apparel & accessories website
Project Background
AA BATTERIES’ owner Lea Chen launched an e-commerce store out of her passion for Asian American representation and in response to the growing Asian American hate crimes. Instead of being defined by stereotypes, she wanted to empower the Asian American community by partnering with Asian American artists to use art to connect the whole Asian American community.
Since the launch of the company, Lea was curious if customers had expectations for the site to ensure a better experience with perusing and understanding the site.
Challenges
Create better awareness of mission to attract customers
Guide users to navigate the site in intuitive way
Design with the constraints of existing site on Wix
Solution
Clarifying the site's mission on the home page as an e-commerce site supporting Asian American community
Providing a navigation that displays options upfront
Driving conversion by adding usability features including reviews, clickable size guides and consistent photo assets.
Communicating the Mission
With a mission to fuel the Asian American community with hope and fearlessness, the owner wanted to make sure the brand was evident in the e-commerce site. The pages all aim to connect the logo of AA BATTERIES as a company that empowers Asian American artists to sell electrifying products to embolden the Asian American community.
Increasing Usability
The new design showcases the store’s value proposition better: a store that customizes orders and allows customers to choose any type of clothing style and color with any type of clothing designs.
Showcasing this optionality with the new reviews section moves users in the positive direction of being more confident in buying the item they have chosen.
Evaluative Research
Before meeting the client, I conducted a heuristic evaluation to evaluate current needs.
1. Match between system and real world: the current filters uses jargon that might not be familiar
2. Consistency and standards: There was inconsistency in the hover states of the navigation in which some of the main navigation was clickable and some weren’t. For example, I didn’t realize the “About” page and the dropdown in the About page had different subsections.
3. Accessible design: Yellow used as a background does not pass WCAG accessibility standards with a 1.58 ratio, making it difficult for customers to read the text on the white background.
4. Aesthetic & Minimalist Design: The current product detail page has lots of text and is overwhelming. The information also within here could be placed elsewhere on the site or shortened significantly.
Competitive Research
Apart from general e-commerce trends, I started to look for opportunities for this brand which was more than just an e-commerce company but a force of change and inspiration for the community.
The client had some immediate cosmetic and usability needs found through evaluative research but I also wanted to create an opportunity for this brand to thrive even further. Particularly, I knew I needed to understand this niche space more. I looked towards direct competitors Asian Boss Girl and Asian American Girl Club to see how they operated and how they positioned their e-commerce site.
Strengths
Simple organization by newest collection
Top banner holds important information
Inventory clearly labeled (e.g. “sold out”)
Weaknesses
Product detail page has lots of text
Overall shop separated from main ABG site
Strengths
Carousel of hero image showcases bright personality and a variety of products
Clean and clear pictures
Logo and branding cohesive
Weaknesses
Home page scroll too long and endless
Product detail page has lots of text
Secondary Research Reveals Areas to Explore
The opportunities and gaps from the market research trends and competitive analysis revealed a few key opportunities to explore further and start to get initial validation and feedback in user interviews.
Helping customers assess fit and size without physically entering a store
Establish trust with a transparent and genuine brand voice
Using social media to extend brand mission and connect with potential and/or active customers
User Interviews Reveal 2 Key Needs
The user interviews revealed needs for clarity on the brand's mission and navigating the site.
I conducted 45 minute participant interviews that asked users about some behavioral questions and asked them to share screens to navigate as if you they were buying something from an e-commerce store they use often and then onto my client’s site.
Key Issue 1: Brand Mission Communicated to Customer
There was a slight disconnect of the logo, hero image and slogan, and site purpose. The batteries logo led to further confusion on whether it might be a battery site, not an accessories or apparel store.
“[When I arrived on the home page], I thought it was a battery seller, I didn’t realize it sells clothes. I thought it helped a nonprofit.”
Key Issue 2: Navigation & Usability
Customers generally found it intuitive but had some confusion based on past purchasing behavior. The current jargon in the "filter" section left users clueless to what these collections meant and the product detail page did not give enough confidence on size and fit for customers to feel they had enough information to buy.
“I have no idea what these collection filters are.”
The persona is motivated to support Asian American creators and causes.
Daphne, the activist and supporter, needs to be able to trust the brand, both in its mission and also its credibility as a business. There are certain expectations for a small business to have but also a leniency in understanding that small side businesses have limitations.
Designing Solutions
for User Problem 1: Confusing Navigation
The current navigation caused a lot of confusion so I decided to do a card sort exercise to see about how interpreted the current navigation. I asked 10 participants and tested existing pages and how people would sort. The card sorting gave 3 common groupings and I hypothesized that the navigation needed to be consolidated while still showing as many options as I could upfront to help customers know what is available.
I iterated on the navigation bar and tested to further iterate.
Because many of AA BATTERIES' customers are new customers, I noticed behavior to understand what was actually available on the site.
The design iterations focused on helping new customers (which the business was focused on) quickly see all choices up front.
VERSION 1
VERSION 2
Designing Solutions for User Problem 2: Not Clear Brand Communication
The brand needed to be clarified in what the mission was. The founder and I clarified that the mission was two-fold: education and empowerment. However, current users mentioned that they thought the store was a batteries store. The founder of the company had already rebranded the store before and did not want to go through another name change. Thus I needed to think creatively on how to emphasize
Part 1: Purposeful Brand Colors to Focus More on Mission
One aspect she was open to was changing her colors. Her original color palette had 3 bright colors that users noted made it difficult to focus on the site. I designed to use the colors in a more consistent and also less intrusive way to give the products the spotlight.
I used the brand's social media account to see what colors seemed to be used and also identified key brand words she wanted to embody in her company. At the same time, I made sure the new colors were not too far from the current colors and still had meaning and purpose.
Part 2: Showcasing Empowerment through Spotlighting Artists
One aspect of empowerment the founder focused on was giving a platform for artists to showcase their designs that focus on heritage or cultural artifacts. The current site didn't allow for customers to learn about the artists and didn't directly connect the artists with their specific work. However, the customer base seemed more motivated to buy when they felt a more personal connection to the merchandise they were buying and often wanted to support a specific artists' collection. Thus I decided to focus on displaying more of the artist's information and inspiration behind the collection they created and promote the option of buying more items from a specific artist.
Key Screens Iteration
The initial screens focused on making sure that the home page communicated the brand's intent as an e-commerce apparel and accessories store while allowing customers to see more information about reviews and sizing without an overwhelming amount of text.
The usability testing showed general success in task completion and an increase in comprehension of the company mission.
Along with fixing needs from heuristic evaluation and the user interview 2 key issues, this was the high fidelity version to test.
1. Did users feel that navigating the site was intuitive?
2. Testing the branding communication: Did users still think this was a non-profit?
Results Summary
Completion of Task: 7/7 able to complete the task.
Understanding the Site: 6/7 recognized the site as an e-commerce site that supported the Asian American community.
Navigating the Site: 4/7 commented needing more clarity upfront about unisex sizing for the clothes and didn’t realize the customization of the clothes until the last step at the product detail page.
Although the client did not want to change the name, she was still curious about an idea she had. Shortly before usability testing, she asked to test the idea of possibly changing the name of her business to "Loud Asian". This was a sudden ask and also surprising, but she wanted data on how people felt about it and I agreed to gather insights.
"It would make it clear that [the company] is rooted in being Asian American."
"Some people might think it points to troublesome of delinquent."
"It could be offensive."
"Loud connected to obnoxious and might push people away."
From the qualitative research, I shared quotes on both the positive and negative. She decided to not move forward with the change as we discussed the implications beyond just the design of the logo, but the brand identity changing as well.
Prioritized Iterations
01 The artist section did not make it clear enough who these people were.
Design Intent: I included an artist section page on the home page to draw attention to why this company has a strong mission statement even with the artists they support.
Feedback: However, there wasn't enough information to really convey who they were.
Design Iteration: I borrowed a popular feature in the product detail page and pulled it forward to the home page for more visibility and clarity of sharing who the artist was.
02 The product page top features modules were scrapped because it was unexpected
Design Intent: The initial product page had more filters to choose from and a few modules at the top to help users quickly look at categories to click into. This replaces the original header image in the current site that didn't have an action button or module to help encourage the exploration of the site.
Feedback: The categories were "surprising" and "unexpected" in the way they appeared right at the top. It caught the users' attention but not in the best way. Users also wanted more information at this stage of exploration on the customization of the product.
Iteration: I added copy to help users know about how custom each clothing was and how a myriad of colors were available and that each design could be placed on any type of clothing style.
Final Solution
Conclusion
Learnings
Working with a client means managing expectations, explaining and educating on design principles and was a great opportunity to defend my design decisions with evidence.
Managing scope and understanding what the priorities are for the client is a constant process.
If I were to do this project again, I would take more time to understand the motivation of the business in more detail and more upfront. Had I known a bit more on the objectives, I might have had an easier time prioritizing what to design without having to get approval from clients on moving forward.
Next Steps
After handing off the design to the client, she started to work to incorporate brand colors and start thinking more about the consistency of her designs to give a cohesive brand story. The designs were made with the Wix constraint in mind and the
