For this project, I worked to redesign the website of ChannelFireball.com. ChannelFireball is a site that sells cards and sealed products for a game called Magic: the Gathering. I focused the most on redesigning the e-commerce portions of their website and helped to redefine aspects of the shopping experience such as the checkout, site navigation, and finding and filtering items for purchase.
My Role: UX Designer
Duration: 2 weeks, July 2020
Tools: Sketch, InVision, Whimsical
Key Skills: User Research, Competitive Research, Wireframing, Prototyping, Usability Testing
Research
User Research
The first phase of my project was user research. I interviewed a group of five users with varying degrees of experience with the site. Because the site was hard to navigate and parse for many users, I gained a lot of valuable information from talking to users about their thoughts.
When I interviewed users, I wanted to know what they wanted out of an e-commerce site in general and I wanted to know what they thought about the experience on ChannelFireball.com. I had them walk through multiple scenarios on the current ChannelFireball website and I noted their struggles and frustrations with the current layout.
Through these user interviews and current usability testing, I was able to make a few key observations:
1. The current site is almost impossible to understand for a user who doesn't play Magic: the Gathering.
2. Even if someone plays the game, the navigation on the site is still hard to understand.
3. Because of these issues, users will resort to the search bar which still doesn't always help them find what they are looking for.
1. The current site is almost impossible to understand for a user who doesn't play Magic: the Gathering.
2. Even if someone plays the game, the navigation on the site is still hard to understand.
3. Because of these issues, users will resort to the search bar which still doesn't always help them find what they are looking for.
All of this information that I gained during this process was very helpful in influencing the design of my final prototype.
Competitive and Comparative Analysis
In addition to user research, I also did a lot of competitive and comparative analysis on other companies’ websites to see what they had to offer and how they implemented features such as navigation, sorting, filtering, and many others. This research helped my final design immensely as I was able to see good examples of how to implement key features through other sites.
On top of this, I created a sitemap of the the current site and what pages I wanted to add to get a better idea of the information architecture in the website.
Sitemap
Synthesis
Personas
After the user research, I used the data that I collected to develop two distinct personas. I made one persona for the “power-user” of the site and another persona of a person who would be more unfamiliar with the products and would be browsing the site for gifts. I found that these were the most common types of users through my interviews.
User and Task Flows
I also make sure to develop user and task flows for my two personas to keep in mind what they mainly wanted to do on the site. I was able to use these two personas and their flows to influence my design and always make sure that I was always designing what my users wanted.
Ideation
Wireframing
After the research and synthesis phase, I started sketching ideas for what my redesign might look like. After these sketches, I started working on a wireframe in Sketch. I took a lot of inspiration from other sites but I made sure to still keep ChannelFireball’s branding in my redesign. Throughout this design process, I made sure to always keep my users needs in mind.
Usability Testing
I made my wireframe into an interactive prototype and then tested it out on users. I had the users run through the same two scenarios on my redesigned site that I had them complete during the initial user research phase.
Through this research, I gained a lot of helpful data into what I could improve on in my prototype. I then implemented a lot of this feedback such as changing the site navigation to make it friendly to new users, reorganizing how filtering works, and many other things. After this process, I had a good mid-fidelity prototype that I was happy with.
Sketches
Search Results (Mid-Fidelity)
PDP (Mid-Fidelity)
High-Fidelity prototype
The next step after creating and testing my mid-fidelity prototypes was to transition them into high-fidelity. I wanted to build upon what I had already created with the mid-fidelity prototype and introduce ChannelFireball's branding, style, products, and images so it visually looked and felt like a live version of their site. I created both a desktop and mobile version of the high-fidelity prototype and made sure to implement the findings I obtained through usability testing when creating the designs.
The goal of the redesign was to transition ChannelFireball's site from a hard to navigate and hard to visually understand website to a new site that followed modern design principles and was cleaner and more friendly to use. I wanted to make sure that features such as filters were not obscured and they were presented to users in a familiar way. The new site is less cluttered and makes it a lot easier for users to find what they are looking for.
In addition to the prototype, I also created a style guide using Zeplin so that it would be easier for developers in the future to potentially develop the site fully.
Search Results (High-Fidelity)
PDP (High-Fidelity)
Checkout (High-Fidelity)
Next Steps
Because I completed this project in a short, two week time period, there were some features that I couldn’t implement. Given more time, I would’ve liked to work on things within the site such as refocusing ChannelFireball's branding and standardizing my design systems in the site more. I would also like to be able to pass along the high-fidelity prototype, assets, and style guide to developers so they could fully implement the site.