Mythic Games Colorado
February-April 2023
UX/UI Designer & Consultant - UXA Responsive Design Capstone
For this responsive design project, I was excited to lend my services to my favorite local board game shop in the entire state of Colorado: Mythic Games.
Between February and April, I overhauled Mythic’s website design into something far more functional for both the owners and their customers alike, that better showcases their events to new customers & invites new players to connect via their socials.
My re-design also prioritizes mobile first, as it’s an incredibly common use case for new customers to find themselves on the mobile site first if they’re driving around town, hitting up new shops in search of an item.
Between February and April, I overhauled Mythic’s website design into something far more functional for both the owners and their customers alike, that better showcases their events to new customers & invites new players to connect via their socials.
My re-design also prioritizes mobile first, as it’s an incredibly common use case for new customers to find themselves on the mobile site first if they’re driving around town, hitting up new shops in search of an item.
Introduction & Background
Mike and Shannan at Mythic run exactly the kind of mom-and-pop local game shop that most nerds are looking to get connected to in a post-lockdown landscape. They believe in friendly, personalized customer service, and they work hard to provide a comfortable gaming environment to players from all walks of life.
In an age of many gamers turning to virtual tabletops and online retailers, I wanted to design something for Mythic that would exemplify their commitment to new and returning customers alike.
In an age of many gamers turning to virtual tabletops and online retailers, I wanted to design something for Mythic that would exemplify their commitment to new and returning customers alike.
Current Frustrations
The current design has all of the content it needs in order to act as a landing page for their business.
However, as it is currently - with all content delivered in the form of jpegs and plain text along static scrolls - testers found pages difficult to navigate or pull information from quickly.
However, as it is currently - with all content delivered in the form of jpegs and plain text along static scrolls - testers found pages difficult to navigate or pull information from quickly.
For being entirely homebrewed by themselves with open source Wordpress, this functions perfectly as a hub for posting updates. And they do update it frequently, like clockwork! I would love for new users to get a sense of Mythic’s commitment to their online presence, within seconds of finding them off google.
Business Goals
-
They need a design that is easy to maintain,as time is currently their most limited resource.
-
The website’s current purpose is to showcase events, and products (for manufacturers who request it).They currently prioritize cross-posting to socials.
-
They would love to expand to e-commerce someday.Taking their low-maintenance needs into consideration, I recommended limiting their e-commerce activity to the TCG Player platform for now (as this was most supported in my research). I offered some recommendations of e-commerce platforms they could utilize in the future.
Research
The majority of my research was conducted over a survey. I wanted to know:
-
What kinds of games each respondent was most likely to purchase from a Local Game Shop.
-
What qualities they look for when searching for a new local game shop (and what makes them run screaming)
-
What kind of information they expect to find online, and where.
I pushed this survey to as many TCG and Tabletop RPG related discord servers as I could find. I took great care to make sure I was reaching out to servers that shared similar community values to Mythic (all-female MTG servers, LGBT gaming servers).
Over three days, we received 23 responses.
Key Findings
Even when asked UX related questions, respondents still spoke about how important community is to the hobby.
I learned that Mythic really does fit the exact type of game store that players around the world look for. How might we speak to this, subtly, through design choices?
When asked where they would expect to find “information on a local game shop’s events,” 70% of respondents mentioned “the website” in an open-ended response. All but two of these responses mentioned the website first, if another platform was listed at all.
This speaks to the importance of a store’s website as a one-stop landing page for new customers, and how it should be prioritized as such over the socials.
When asked what content they expect to find on the website, users responded Events, Product Selection, Hours and Address, in that order.
This speaks to the importance of a store’s website as a one-stop landing page for new customers, and how it should be prioritized as such over the socials.
When asked what content they expect to find on the website, users responded Events, Product Selection, Hours and Address, in that order.
Design Process
I wanted to prioritize the information that customers said they would be looking for in the hero, so everything is at their fingertips before they ever have to scroll.
Everything remains designed around wordpress blog posts, as to not interrupt the owners’ existing workflow.
I kept everything simple with two main card styles - one for Event information posts, another for Update style posts.
I kept everything simple with two main card styles - one for Event information posts, another for Update style posts.
- Dark color scheme by default (gamers kept asking for it specifically).
- The small, subtle inclusion of a rainbow divider on the footer went over really, really well with LGBT Testers. One tester remarked that “even if this business isn’t gay owned, this tells me that their store will probably not be a good place for bigots to hang out — that alone makes me feel welcome.”
Events
Each event will now have its own blog post. This will accommodate:
- Ease of cross-posting.
- Compatibility with Add To Calendar plug-ins
- A way for social media avoidant gamers to access & share full event details, without any social media apps blocking the information behind sign-up prompts.
Stock Updates
For now, it makes sense to the owner’s limited resource of time to keep the weekly stock updates in plain text. However, by better organizing the page and adding a search functionality to it, we can meet most users’ needs before they ever have to scroll through any massive walls of text.
As for the blog posts themselves, simply sorting items into categories, alphabetizing the lists, and incorporating jump-to links for each section is a great place to start when you’re limited to plain text blog posts.
Everything Else
I condensed all of the shop’s information & story into one about page, and chunked everything out into sections to increase legibility.
I also worked with redundancy to create multiple paths to the same information. When a user navigates to buy online, they are brought to a minimal page and given three simple options: they can browse Mythic’s TCG Player Marketplace, search the stock updates, or request an item via email or dm.
Results
When asked to find information on things like events, testers found everything they were looking for near-instantaneously on both desktop and mobile.
Even before the v2 revisions, testers expressed that not only was this better than the original website, it was better and more functional than most game store websites they knew of.
Testers had a lot to say about how the design influenced their feelings about the shop, or what they’d expect it to be in person:
“It feels friendly! It doesn’t have to be more sophisticated than this — I know how these shops are in real life. If the design was too fancy or modern, I’d feel like they’d be trying to come off as something they’re not […] This shop totally feels friendly, approachable, and like they’re not trying to gatekeep anyone,”
- Tester D, 30, Wisconsin
Takeaways
Mythic’s original website is not something that requires an expensive total overhaul from the ground up in order to better meet their customers’ needs.
I took great care to preserve the same content and workflow the owners already have - but with some organization, responsive UI, and a few tweaks to the Information Architecture, I was able to put a prototype in users’ hands that not only met their needs, but exceeded their expectations.
I took great care to preserve the same content and workflow the owners already have - but with some organization, responsive UI, and a few tweaks to the Information Architecture, I was able to put a prototype in users’ hands that not only met their needs, but exceeded their expectations.
Initially, as I was in bootcamp part-time, I had only offered my services as Designer and Consultant for the duration of the project timeline. After submitting my portfolio, I will further extend my offer to help build the design with the use of a CMS tool.
I’m looking forward to shipping this redesign for Mythic in the near future, and I hope their customers appreciate it as much as the testers do.
I’m looking forward to shipping this redesign for Mythic in the near future, and I hope their customers appreciate it as much as the testers do.
Responsive case studies coming soon!
For now, the full case studies can be viewed on desktop.
