Empires Comics Vault
Summary
This project was a website redesign for Empires Comics Vault, a comic book and hot sauce business. Much of the site was difficult to navigate as well as failing to showcase much of what the intended audience wanted—a convenient way to see the newest comic releases, an easier way to apply to be a vendor at the store’s events, a way to place orders online, and a way to easily sort through the titles the store carries. To start with, I reordered the site’s content to create a more cohesive navigation. I also created pages to catalog the store’s comics that would allow customers to purchase and generated content to provide more information about the product before purchase. I used Adobe XD to create a prototype to showcase the navigation of the site.
The Problem
Who: Empires Comics Vault
What: Website redesign
How: Adobe XD
Why: Users of the site struggled with navigation and finding relevant information. They were also frustrated that what they thought were links to more information led them to external sites. Furthermore, the site’s aesthetics did not make me think of comics.
Phase 1: Existing Site
A view of how the site looked before I started this project. The site navigation was not very clear, and the provided pages, especially the home page, did not provide the most important information.
Phase 2: Preparation
I started off by researching what people who shopped at comic shops, and bookstores in general, were looking for within the store’s webpage. I also looked at other comic shops’ and bookstores’ web pages to get inspiration about what to include in my redesign.
From there, I crafted four user personas to guide my design towards my target audience. I also crafted a content inventory to ensure that I kept all of the information currently on the site, and a site map to visually see how I planned to organize the pages on my redesign. Finally, I crafted a style tile to generate an aesthetic for the site, heavily leaning into the bold colors of competitors.
Phase 3: Beginnings of Design
I sketched out some designs, designing three variations of each page. With instructor feedback, I created a polished drawing of the most effective iteration.
Desktop
Phase 4: Utilizing XD
I brought the sketches into Adobe XD, utilizing a grid to ensure that all of my elements were aligned and spaced nicely. I began in grayscale, just placing the structure.
Desktop
Phase 5: Colored and Finished
Finally, I inputed all of the text, images, and graphics. I designed more pages to fill out the site map I had created, utilizing all of the information from the website.
I also created a prototype to test and view how the pages interacted with each other. Success for the prototype was measured by how easily potential customers could interact with the product.