How to create an emotional connection with the target audience: World of Comics

The Turum-burum team knows how to create a themed experience for a narrow target audience and convey the overall company vibe through UX/UI design. Read the article about the RSR (Revolutionary Site Redesign) approach, custom design development, and changes to the key site pages.

World of Comics: Get to Know the Company

World of Comics is a chain of themed stores for geek and pop culture fans in Ukraine. The store offers only official and licensed products: merchandise, Funko Pop, comics, board games, and collectibles.

World of Comics' physical stores are works of art. It is a unique place where characters from almost all universes seem to come together to discuss the latest news from their worlds. Bright banners, themed showcases, and life-size figurines of popular characters are used to immerse visitors in the world of movies, TV shows, anime, and superheroes.

World of Comics has 4 offline stores in Kyiv and one in Lviv, but there are geek and pop culture fans in every city in Ukraine. That's why we decided to create a new cool-themed e-commerce website because all fans deserve to get the best experience and impressions of World of Comics services.

Our goal was to develop a web design for an online store that:

• Conveys the atmosphere of the fantastic universes of the physical stores through the screen;
• Demonstrates the key benefits of the products and the online store;
• Unites fans of geek and pop culture from all over Ukraine;
• Will be adapted for mobile devices.

UX/UI Design for the World of Comics Fan Store by RSR Approach: Stages and Solutions

The World of Comics online store was specialized and contained only Funko Pop products. The client's goal was to create an online platform where fans of fantastic universes could find any product they wanted, as there are more than 12,000 of them in the store.

We decided to create the design of the online store by RSR, which means a complete redesign of the site:

• Analysis of the current site functionality issues;
• Review of available products;
• Development of the theme design of the online store;
• Creation of user-centered navigation.

The client wanted to optimize the project budget and create a UI & UX design in a short period of time. So we used our best practices from previous e-commerce projects for a narrow target audience and customized them to meet the client's requirements.

The case was special because most of our team is the target audience of World of Comics and knows all the nuances of geek and pop culture. In fact, it was the creation of an online store design “by fans for fans”.

Below you will find more details about the stages of the redesign of the main pages of the site and examples of the UX/UI solutions we provided.

UX Audit: Expert Analysis of Website Interface and Usability

The work began with a briefing with the company's representatives. To understand the concept of the future online store, it was crucial to clarify the following aspects:

• The product range of the online shop;
• The pricing policy;
• The future growth plan of the company;
• The expected results.

We then developed the information architecture of the online store, finalized the layout and content of the pages, and then began designing the website for World of Comics using a mobile-first approach.

Website Stylistics: Developing a Design that Emphasizes the Benefits of Products

The products in the World of Comics store are brightly colored, so our goal was to create a UI design that would not distract customers, but rather focus on the products. So we:

1. Created a minimalist design for the online store, choosing a white background with black text, and accentuated key elements of the site such as “Buy” buttons, “SALE” stickers, etc. with bright colors (yellow, red, and blue);

‍

2. Refused to use stock images and developed our own custom illustrations that emphasize the superhero theme of the store and its product line.

3. Used Tone of Voice to get on the same wavelength as the target audience. The way of communicating with customers is another distinctive element of the website design.

4. Developed a non-standard design for the standard “Contact Us” option placed in the homepage header. By selecting it, a customer is automatically redirected to a page with a themed image created by the Turum-burum team. If it's off-hours and a person wants to get feedback, we also write about it in a theme-based style: “Sorry, consultants are on duty now”. Such an element helps to create a positive user experience from the very beginning of the customer's journey with the World of Comics online store.

Website Navigation: Transparency and Clarity

We added links to service pages in the header so that users can quickly find all the information they need about the store, shipping methods, and return policies from any page on the site.

In the adaptive version of the website, all this information was added to the burger menu according to standard user behavior patterns. Meanwhile, the catalog with the main categories in both the adaptive and desktop versions was built using a tunnel approach to avoid confusing users and make the search for the needed item as easy as possible. The header also includes a search tool with prompts. 

We created a UI UX design with an emphasis on product photos and bright interactive blocks that serve as additional entry points and speed up the search for the desired product. Noteworthy is the site menu, which is presented in the form of custom images of comic book characters, allowing users to find all relevant products through the visuals quickly.

Homepage Design

We designed the homepage with alternating blocks of bright and neutral colors. Thanks to this, users are not overwhelmed and do not lose their attention.

Homepage structure:

1. We added large colorful banners to the homepage with the latest store offers: new products, discounts, exclusive products, etc. This is the first thing customers see when they visit the World of Comics website, so the banners have several functions:

• Immerse customers in the core theme of the online store;
• Serve as an entry point to specific product categories;
• Attract the attention of potential buyers;
• Inform about the store's current offers.

‍

2. We added separate illustrative blocks with custom images, which serve as an alternative to the text menu at the top of the page. That is, if the user has not decided on the category of interest at the beginning of his journey through the store, banners can help him choose one at the next stage.

3. We used custom blocks to demonstrate the company's benefits and provide useful information. The first image contains a hyperlink to the “Contact Us” page. There, users can find information about the company's offline stores, opening hours, contact phone numbers, etc.

4. We added informative blocks with promotions that may interest the customers:

• Popular universes;
• New releases;
• Popular brands;
• Popular products;
• Sales;
• “Previously viewed”.

The product cards themselves in these blocks are very simple: 80% is taken up by a photo, a short description, the price/discount, and a bonus that the buyer will receive. There is also a “Buy” button to quickly add an item to the cart without switching to the product card, and an “Add to Favorites” button in the background. Such a simple yet informative design allows users to save time and quickly proceed to checkout.

In the adaptive website version, these blocks are automatically scrolled every second. In such a way, we provide users with all the information in a particular block within one screen. 

Category Listing

The design of the category listing page is minimalistic but very functional. On the left, we added the most popular filters so that customers can quickly find the product they need based on certain parameters. We also designed a quick switch for sorting and the number of products displayed on the page.

In general, the category listing page contains all the necessary information for customers at this stage. Thus, we avoid cluttering the page and overwhelming the user with unnecessary information, so that nothing distracts the user from the product.

Filters in the adaptive version are presented as a contrasting button that opens a separate window with available filters when clicked.

To prevent customers from leaving the store if they fail to find the needed product in the selected category, we added an illustrative block similar to the one on the homepage and a bright block with popular categories.

Product Card

The product card is a key page for any e-commerce site where users make a purchase decision. That's why we:

• Allocated the most space to high-quality product photos, so the user could see the item in detail;
• Catered to the needs of different audiences: those new to geek culture or looking for a product as a gift can ask for expert advice, while more experienced users have the option to buy with one click;
• Added all important shipping and payment information to the product card to save users time;
• Developed a custom image of a pizza placing an order to emphasize the speed of processing the order using the “Quick Buy” option.

Below that, we added a block with similar products, product descriptions, and reviews, because social proof is important for online sales. We made these blocks in the form of a drop-down menu so as not to clutter the online store interface, but to provide all the necessary information.

Besides, we used an interesting comic block that informs about the bonuses that users receive by writing product feedback. This is an effective tool for engaging the audience and motivating customers to make further purchases in the store.

The product page contains an upsell tool that is a block of products from a related category within the same price segment or slightly more expensive. In such a way, not only do we take care of customers by offering them other product options, but also increase the average check.

We also optimized the product page to be mobile friendly to improve the mobile user experience:

• Emphasized the name, series, and item number with a different font to make it easier for the user to get additional product details over the phone if needed;
• Added a scroll bar between product pages in the same category so customers can quickly overview each item in the series;
• Left breadcrumbs for faster site navigation;
• Provided brief but concise and structured information about delivery and payment;
• Placed the CTA on the first screen.

Cart

We designed the shopping cart as a pop-up window. That allows users to browse the selected products from any page of the site, as well as minimize the shopping cart without the need to return to previous pages.

The shopping cart itself contains only the necessary information and is designed according to industry standards. To prevent users from confusing the button for removing an item from the cart with the button for closing the cart window, we used the icon of the trash can instead of crosses.

We also added a cross-sale tool: a block called “Customers buy with this product”. It allows the customer to pay attention to another product of the same category and add it to the cart, or change the selected product to a better option.

We have also added a loading bar that shows the number of products left to select to get free shipping. This solution saves customers from unnecessary calculations and serves as a certain stimulation to increase the purchase amount.

Checkout Page

The checkout is only one page long, and customers only need to fill out a few fields to complete the purchase process. In other words, we have created a "clean interface" that requires minimal time and effort from the user. Even at this stage, customers can opt for a quick order.  

We have made the checkout process in the adaptive version as short as possible, so it only takes 2 screens.

Results of the World of Comics Online Store Redesign Using the RSR Approach

The Turum-burum team succeeded in creating an online store design that:

• Emphasizes the benefits of the products presented;
• Gives the feeling of being part of a community;
• Creates an emotional connection between the company and its customers.

We created a minimalist website design, developed custom images, placed the necessary accents, chose the right tone of voice, and got a cool-themed online store that fully meets the target audience's needs and fulfills the business objectives.

We achieved this result thanks to close communication with the client throughout the project, as well as the expertise of our specialists who are fans of geek culture.

‍