Dragons Trading
Website Redesign
UX Designer, UX Researcher
Prototype, Presentation
May 2023 - Aug 2023
Figma, Photoshop
Role:
Deliverables:
Time Frame:
Tools:
About Dragons Trading
Dragons Trading is a small local business based in California, United States that sells toys and figures—primarily Funko! POP & Banpresto products. Since they are a small business operating in a highly competitive space, they are interested in expanding their customer base through their website.
Project Scope
Since Dragons Trading is currently unaware of their online customers’ pain points due to a lack of metrics, the primary project goal is to conduct user research and provide suggestions on how the customer journey on their website may be improved.
Identify problem areas on website
Improve overall discoverability of primary products
User Impressions
In order to gain a better understanding of what could be considered the strengths and weaknesses of the company and its website, I surveyed 44 individuals between the ages of 16 and 45 years old who were aware of Funko! POP products.
Dragons Trading
Website Impressions
“If main purpose is to buy something,
pretty easy to do so"
“I see the
sale items…
50% off…
love that!”
“Are these
lead images pixelated?"
"Hero section is kinda blurry..."
User Survey Findings
"If there is no cost difference,
I would buy from
a smaller independent store
to support a small business
over Amazon."
“Pretty generic Asian collectible website”
“Nothing
pops out much.”
According to survey respondents, Dragons Trading’s website “works well” but does not feel unique or specialized. Compared to their competitors’ websites, their website was “average”, “normal”, and “as expected.” Dragons Trading and their competitors shared many similarities in not only website layout but also product pricing.
However, the current information architecture and categorization on Dragons Trading’s website felt inconsistent and confusing to visitors.
User Interview Findings
Since my research goal was to understand what prompts or prevents consumers from shopping for Funko! POP products online, I interviewed 3 individuals who felt neutral or positive about Funko! POP products.
User Personas
Through user interviews, I learned that most individuals preferred online shopping because they
appreciated seeing a variety of products at a glance
gravitated towards “good pricing”
($15 - $20 for Funko! POP products)
Primary Competitors
Gamestop
Amazon
Hot Topic
Chalice Collectibles
How might we, through a website redesign,
01.
distinguish Dragons Trading from its big name competitors?
02.
improve the online browsing experience for shoppers?
03.
highlight their competitive prices and discounts?
Based off the insights I garnered through user research,
I ideated on how info can be presented in a concise but visually engaging manner.
Pre-orders Page
(Lo-Fidelity Wireframe)
Home Page
(Lo-Fidelity Wireframe)
Checkout Page
(Lo-Fidelity Wireframe)
Key Changes in Website Redesign
How might we distinguish Dragons Trading from its big name competitors?
Brand Story
↪
On the redesigned website, I called attention to its status as a small business by fixing it to the website’s footer so that it would be present on every page. On the original website, this information is hidden from plain view and only accessible through the “About Us” link in the footer.
→
Original
→
Redesign (Hi-Fidelity Wireframe)
How might we improve the online browsing experience for shoppers?
Product Listings
↪
I focused on how to present information in a straightforward but visually engaging manner.
Streamlined filter categories & sort options
Separated product name into multiple lines
Added borders around product images
Original
Redesign (Hi-Fidelity Wireframe)
Product Details
↪
I updated the website's overall content strategy and content hierarchy.
Created more subheadings to allow users to find specific content (e.g. product specs & features) more easily
Moved placement of important info (e.g. expecting shipping, pre-order qty limit) to the top
Added color background to highlight important policies
Original
Redesign (Hi-Fidelity Wireframe)
How might we highlight Dragons Trading’s competitive prices and discounts?
Discounts & Promotions
↪
I made the discount code more prominent. On the original website, the discount code is easily overlooked because it is only accessible through the link on a banner that the majority of my user research participants scroll past.
←
Original
←
Redesign (Hi-Fidelity Wireframe)
User Behavior
Since my user research indicated that the majority of Dragons Trading’s potential customers are aged between 20 - 34 years old, I recruited 6 participants in that age range to participate in my usability tests.
In order to determine the efficacy of my redesign, I asked each participant to find a specific Funko! POP product without relying on the search function and place an order for it.
Task Flow
By observing my usability test participants navigate the prototype,
I was able to validate design decisions and pinpoint which components I could iterate on to improve the overall user experience.
Key Takeaways
Users appreciated being provided key information upfront:
discounts / sales
limitations / restrictions
policies
steps to a process
Product Detail Page
(Hi-Fidelity Wireframe Version 1)
→
Product Detail Page
(Hi-Fidelity Wireframe Version 2)
While most usability test participants appreciated seeing all the information relevant to pre-order products upfront (e.g. cancellation policy, shipping & handling), a couple of participants found the amount of text on the product detail page to be overwhelming. In fact, one participant compared the page to a resume.
In order to render the content more digestible, I added color to specific segments and variation to the text alignment.
Users ignored any info and images that they deemed irrelevant:
large banners
obstructive pop-up windows
→
Home Page
(Hi-Fidelity Wireframe Version 1)
Home Page
(Hi-Fidelity Wireframe Version 2)
Dragons Trading’s original website featured large, colorful graphics promoting other brands they sold (e.g. Banpresto). While they were certainly “eye catching”, they were also described by user participants as “eye straining.” For individuals who were unfamiliar with the brand, the banners were distracting and largely ignored because they were mistaken for third party advertisements.
Taking into consideration this feedback, I removed the large graphic from the landing page and decreased the amount of vertical space occupied by content. As a result, and page appeared more clean and compact.
Users expected selections to be represented by checked boxes rather than filled boxes.
Pre-orders Page
(Hi-Fidelity Wireframe Version 1)
→
Pre-orders Page
(Hi-Fidelity Wireframe Version 2)
Challenges & Learnings
After multiple rounds of research and testing, I was able to consolidate a shortlist of suggestions on how a customer journey may be improved to Dragons Trading. Although the research phase of the project was challenging due to the limited pool of eligible participants, I was able to move forward with my design decisions based off
competitive analysis
research on best practices; and
studies on UI commonly found on eCommerce websites
At the conclusion of the project, Dragons Trading informed me that they plan to they implement changes to their website according to some of my UX recommendations!