Name Glo website design
A better way for shoppers to customize neon products
Project Overview
DURATION:
Two week sprint
TEAM MEMBERS:
Solo project
MY ROLES:
Project Manager
UX Researcher
Interviewer
UI Designer
Prototype developer
METHODS:
User Interviews
Contextual Inquiry
Competitive/Comparative Analysis
Card Sort
Site Map
Sketching and wireframes
Interactive Prototype
Usability Plan and Testing
Design System
Annotated Mockups
Name Glo, a custom neon shop in New York City, needed a new website in just two weeks to be ready for the 2020 holiday season. The owner, Lena Imamura, explained that some online customers were having trouble customizing their neon products and understanding the difference between glass neon and LED neon. The project had a limited budget, so we took the advice of a developer and modified an existing Shopify theme rather than develop a site from scratch. This strategy made implementation easier, but it made designing the website more challenging.
Two Problems
How might we visually explain the choices involved in customizing a neon sign?
How might we best present documentation of the products, including how they are made?
Before: original product page with hard-to-find CTA and dense copy
After: new product page with prominent CTA and details organized below
A selection of microinteractions that give feedback to users, draw their eye and give delight
RESEARCH
Interviewing Name Glo’s urban users
To empathize with the needs and goals of Name Glo’s users, I interviewed five urban professionals living in New York City and Los Angeles. Each participant earned at least $80K annually and enjoyed decorating their homes.
“I feel personally connected to home products when I learn more about how they are made”
Key insights from user interviews:
“I love owning pieces that are unique and high quality (rather than mass-produced).”
“I appreciate stores that put thought and care into their visual presentation.”
“I feel inspired by having a rich variety of colors and textures in my home.”
“I have trouble understanding the difference between Glass neon and LED neon”
Key insights from a contextual inquiry with three participants:
“I’m not always sure what to do next in the app”
“I’m annoyed that the app won’t let me navigate back to the home page”
“High quality images would make me feel more confident about buying these higher priced products”
The persona: a shopper with high standards
Kelley, a marketing executive in NYC
“I want every object in my home to have a unique story behind it.”
38 year-old home owner, married with one child
Inspired by Instagram, design blogs and local shops
Only interested in high-quality unique items
Feels a personal connection to products when she learns the story of how it was made
Kelley’s main problems
Kelley needs a better way to customize a neon sign because she feels hesitant about buying it when the process is unclear.
Kelly needs to experience each detail of a product so she can trust it’s high quality and connect with the story of how it was made.
Using card sorting to create better product categories
In order to organize the website more intuitively, I used Optimal Workshop to conduct an open card sort in which I observed how five users grouped 60+ products. I derived eight categories (verified in a closed card sort) and used them to create a new site map.
Card sorting using Optimal Workshop
A new site map derived from card sorting data
Analyzing Name Glo’s competitors
I looked at the websites of Nike By You, HAY and Billie to assess:
strategies for showing how products are made
best practices for product detail pages
UI design with a more saturated color palette
Nike explains how your custom shoes are made in this three-step graphic
HAY prioritizes the CTA and organizes product details below
Billie’s color palette is bright but doesn’t visually compete with the products
DESIGN AND TESTING
Brainstorming with Name Glo
I facilitated a design studio session remotely with the Name Glo team and Anna from Girlschool (their branding designer) to think of new ways to help users connect with the story of how Name Glo products are made.
The team’s favorite solutions featured larger product images, more detail views and better organized product info.
From sketches to interactive prototype
My sketches for the home page, custom neon pages and for the Neon Sign Designer app
Wireflows for creating a custom neon sign and for customizing a neon art object
Testing and Iteration: Create neon diagrams and rename the app
In the first round of testing, three participants created a custom neon sign and customized neon art.
66% were still unsure about the difference between glass neon and LED neon
66% mistook the Neon Designer App for a download-only mobile app
66% didn’t notice the Estimated Price that appears at the top of the web app
66% didn’t notice the checkbox to “Agree to Terms” during checkout
I iterated on the design by
creating illustrations for each neon type
renaming the Neon Designer App to Neon Sign Designer
adding an arrow to call out the required checkout field
moving the Estimated Price to the center of the screen
Before: Users found original description hard to understand
After: Users understood neon types more easily with illustrations and bulleted feature list
Testing and iteration: Move custom art objects to “Shop”
In the second round of usability testing, all users successfully completed the task and remarked afterwards “Easy Peasy” and “intuitive and easy to follow.” However, each user clicked on “Shop” when asked to purchase a customizable art object, however, so I moved the customizable Light Bar System products to the “Shop” category.
Final Mockups
The home screen design guides users to different paths for customizing neon
Customers can see options for designing a neon sign and how it works
Production process is highlighted so users feel connected to the products
CONCLUSION
Next steps
Verify design effectiveness with Shopify analytics
If budget allows, redesign Neon Sign Designer app to include hi-res photos
Design a new custom quote form
Implement UX findings across newly branded website in early 2021
Make a video of fabrication process (similar to some competitors)
What I learned
Designing for a small business is exciting because they can quickly absorb research insights and implement changes with the potential for real impact. I was consistently amazed while working with Lena - she is not just innovative in the products that she designs but also in her business strategy.
Shopify was a challenging framework to design within and I noticed several UX issues that are difficult to change. But these issues are worth it to a small business with a tighter budget. In the future, it would be useful to which work-arounds are easy to implement when developing a Shopify website.
I enjoy operating as a UX Team-of-one. Since I act as both designer and researcher, each of my design decisions feels particularly research driven. However, for this project I missed having a team to help generate ideas and solve UX problems.