A strategy & responsive website design for a game & puzzle e-commerce
UNIVERSITY GAMES
ABOUT
University Games is a leading game and puzzle manufacturer with several award-winning titles, but the website is difficult to use and looks outdated compared to its competitors. With such tight competition in the industry, a strong online presence is essential.
I set out to reimagine University Game’s online presence so it can maintain its lead in the years to come.
MY ROLE
I took the initiative to make a proposal and won approval from senior leadership to design a new website.
This project was outside of my normal role, but I saw a problem I wanted to fix. I made a proposal for how I might help the company better meet its goals and management gave me the go-ahead.
As the sole designer I,
CONDUCTED USER RESEARCH
DESIGNED 19 SCREENS
BUILT THE SITE IN WIX
Final Design
I reduced the average time it took employees to update 400+ products by 66% and reduced average page load time by 30% by creating a database of products and converting the static product pages to dynamic templates.
THE PROBLEM
Approximately 21,000 visitors come to the site per month, but 81% of visitors never return.
The information architecture of UG’s website is unintuitive and the content isn't scannable. Customers were calling the office frustrated because they were unable to find the information they were looking for on the website. This meant our support member was spending a lot of time troubleshooting problems with the website instead of tending to their many other duties. Customers were so frustrated they reported they would not buy UG’s products again.
But it wasn’t just customers reporting these problems, internal staff members were also wasting time searching the website for the information they needed to do their work. We were already short-staffed and the incremental loss in efficiency means employees are less productive.
BREAKING DOWM THE PROCESS
My vision was to facilitate a more engaging and seamless experience when it came to exploring product ranges, seeking information for game & puzzle instructions, and where to buy products.
I used Google Analytics and my qualitative research to identify the most common site tasks. From there, I developed a hierarchy that would streamline the conversion funnel and help users achieve their goals.
IDENTIFY THE PROMBLEMS.
DEFINE A PATH FORWARD.
DELIVER SOLUTIONS & MEASURE THEIR SUCCESS.
UNDERSTANDING
& EMPATHIZING
For 2 weeks I worked with our support member to identify customer issues and I spoke with staff members and leadership to better understand the business’ needs.
This initial research was crucial because it provided tangible evidence, from actual people, around the usability issues of the site –– equipping our team to stop operating based on un-validating assumptions.
2
Weeks of support documentation
5
Phone interviews with sales staff
2
Weeks tracking site analytics
3
In-person interviews with office staff
The first thing I did when I took over the current site was to install Google Analytics so I could understand our website's performance and most common tasks. I tracked our website’s metrics for 2 weeks and compared our performance to the average metrics of e-commerce sites I found online. Although University Game's website was not exactly an e-commerce site, we shared many of the same website goals.
Benchmark comparison with other e-commerce sites.
Our site's performance fell well below other e-commerce averages telling us that we were missing out on the opportunity to turn site visitors into customers.
Key Insights
I learned the most visited page was the Instructions page with 36% of all views.
The following key insights from my research shaped my strategy for how the company could better serve its customers and meet company goals. I learned who our main users were on the site and more about their pain points and needs. Most users found navigating the site time-consuming and confusing.
User Type: Customers
Customers were calling the office looking for information that was in fact, online.
-
Need a responsive site that works on mobile
-
Need to easily find instructions that they can print
-
Want to know where to buy products
User Type: Small Retailers
Small Retailers were calling our art department for image assets they needed for their marketing materials.
-
Need images to be downloadable
-
Want to share images to their social profiles
-
Want their stores to be found by local UG fans
User Type: Sales Staff
Sales staff was looking in several places for photos and information for the same product.
-
Need images to be downloadable
-
Need images and product information in one place so they aren't wasting time while preparing their presentations
USER STORIES
I prioritized features by writing user stories based on the qualitative research I collected.
User Story: Customer
As a Customer, I want to print instructions for my new 3D Crystal Puzzle so that I can assemble it.
User Story: Small Retail Owner
As a Small Retail Owner, I want to access product photos and download them so that I can feature these products on my social media and other marketing materials.
User Story: Sales Staff
As a Sales Rep, I want to quickly find images of products I can download so that I can use them in my sales presentation.
The Solution:
Create a unified design system that merges usability guidelines and aesthetic appeal across all seven of University Game’s brands.
PRODUCT ROADMAP
We set out to completely overhaul the website’s look and feel and create a unifying design system that merged usability guidelines and aesthetic appeal across all seven of University Game’s brands.
These changes would impact every corner of University Game’s website, including key interactions.
I discussed user goals with my Product Manager and they shared what was most important to the business. Together, we prioritized project themes focusing on what would have the biggest impact.
BUSINESS GOAL
Increase user engagement on the site and other marketing channels like YouTube.
How?
Feature our highest quality content on the homepage, engaging customers with a peak into our product offerings.
BUSINESS GOAL
Drive traffic to retailers so customers can purchase UG products.
How?
1. Implement "Buy Now" buttons where visitors expect to see them.
​
2. Implement a "Find a Store Near You" Feature.
BUSINESS GOAL
Help close sales by supporting sales team communications
How?
Streamline the workflow for our sales team and small retailers by making images downloadable and enabling the ability to share to social media.
TITLE OF THE CALLOUT BLOCK
PERSONAL GOAL
Simplify and optimize content updates and website management in order to reduce employee workload.
How?
Build a database of products and convert static product pages to dynamic templates.
PERSONAL GOAL
Improve customer satisfaction through better service.
How?
Make information easier to find and help customers achieve their goals.
SITE STRUCTURE & USER FLOWS
I used Google Analytics and my qualitative research to identify the most common site tasks. From there, I developed a hierarchy that would streamline the conversion funnel and help users achieve their goals.
Referencing our project goals, I worked on developing the hierarchy of the new site, paying careful attention to avoid duplicate content. In the new design, all product galleries, including instructions, redirect users to product detail pages.
The organization is based on user needs.
To ensure that users can find what they are looking for, I organized the site map based on what users value the most. The final hierarchy would consolidate the most sought-out information into one place.
DIGGING INTO THE UI DETAILS
With the new design, all product flows, including searching for instructions, redirect users to the product details pages.
I wondered how I might merge supporting a customer’s need to download instructions with the business goal of showing customers where to buy products.
From the product details page, users can:
download instructions
read details about the product
download images
directly share images on social media
directly connect with retailers selling the product
TITLE OF THE CALLOUT BLOCK
PRODUCT PAGE
Make product information easy to find and show customers where to buy products.
​
Features: (show close up of features)
users can download instructions
read details about the product
download images or directly share to social media
directly connect with retailers selling the product.
DIRECTING CUSTOMERS WHERE TO BUY
Because the business was a manufacturer, I designed “buy now” buttons for the product pages that redirected customers to our product pages on sites like Walmart, Target and Kohls. I suggested to the business we use affiliate links to track if visitors of our site purchased products after their visit.
TITLE OF THE CALLOUT BLOCK
HOMEPAGE
Support the business goal of driving traffic to the company’s Youtube channel by featuring its content.
Detail 1: One of the business goals was to drive traffic to the company’s YouTube channel.
How: Feature UG Studios, our in-house content.
Detail 2: The business requested that the blog be featured on the homepage as well.
Detail 3: The navigation bar is pinned to the top of all pages so users access another section at any time as they navigate the website.
Detail 4:To encourage shopping with our smaller retailers, and to address the question support so often received, I implemented a store locator widget. I worked with the sales team to compile a list of all small retailers selling UG products and uploaded the list to the widget. I placed the locator in the footer so it was available on all pages throughout the site.
TITLE OF THE CALLOUT BLOCK
FAQ & CONTACT PAGES
Improving customer satisfaction through better service.
FAQ PAGE
I worked with the support member to define common questions and verify the protocol. I chose an expanding list as the UI solution so customers could easily scan questions, revealing answers only to the questions they needed to be answered.
CONTACT PAGE
To reduce the number of clicks a customer had to take in order to reach support, I built a form including all necessary fields with a submission message explaining the time frame for response.
(insert final wireframe for contacts page)
Detail 1: A lot of customers don’t realize we are a small business with office hours so I included the hours of operation so customers would understand the time frames for a response.
THE FINISHING TOUCHES
Design a cohesive visual identity for University Game’s seven brands.
The new site build inspired the CEO to invest in outsourcing the design of a new logo to replace the 35-year-old one. This was essential to the overall goals of the company and a modern logo could inspire new customer interest in the brand.
Old Logo, designed in1985
New Logo, designed in 2020
To ensure a cohesive visual skin to the company's new identity I created a style guide for our team to reference when creating image assets and making changes to the website.
TITLE OF THE CALLOUT BLOCK
OUTCOMES
I was able to reduce the average time it took employees to update 400+ products by 66% and reduced average page load time by 30% by creating a database of products and converting the static product pages to dynamic templates.
The new design created a balance between backend complexity and user flows. Once I had the database and the dynamic pages built, I tested the system with real content to ensure pages populated correctly, making adjustments where needed. This helped me finalize asset requirements.
​
We were wholesalers but I wanted to define a way for us to track conversions. The online retailers we redirected customers to all offered affiliate programs so I suggested to my manager that we use affiliate links as a means to track our conversions. She expressed interest in the idea but decided to hold off.
​
Unfortunately, the project was put on hold due to the Covid-19 pandemic. My next step would have been to advocate for task-based usability testing with actual users. Our resources for this project were extremely limited, but I’d been able to garner further resources in the past after building functional mock-ups. Testing is something I advocate strongly for because it is the only way to really understand if the solution works for users.
TITLE OF THE CALLOUT BLOCK
REFLECTIONS
I am proud of what I was able to accomplish with so few resources. This was an incredible learning experience.
I saw a problem I wanted to fix and I went for it. I worked under extremely tight time constraints since I had to balance my first role while updating the current site and developing a brand new website. It's bananas to think I was the most technical person on this project (yikes), but I persevered because I wanted to improve the experience for our customers and staff. I taught myself how to hack together the design without implementing any code which was a huge challenge. There was a lot of trial and error along the way, but I did it. I just wish the website could have gone live. I love making customers happy and I would have loved to see how my ideas shaped the next successes of the business.
