Let’s redesign! Norma Comics
Redefining Norma Comics’ website, a case study of my UX and UI journey
At a time when e-commerce platforms such as Amazon or eBay are monopolizing online sales in almost any sector, there seems to be a need to vindicate local and specialized sales. This is why local e-commerce, especially when not born in a native digital environment must be updated in order to try to compete with the big players in this field.
In this case study,
, and I are going to try to give a new look and structure to Norma Comics, a Spanish iconic comic and merchandising specialized store.Norma Comics was founded in 1983 in Barcelona. It is one of the most important bookshops specialized in this field in Europe. They have a huge selection of merchandising and gift products not only related to comics, but also to the world of cinema, TV and video games.
A fun fact: in 2018 they received an award for the best comic book store in the world! However, their e-commerce is not their strong suit.
From this case study, we will try to understand why.
First of all, some important facts about our client:
- This store was established by Norma Editorial, a publisher founded a few years earlier. Nevertheless, the store (Norma Comics) and e-commerce (led by Norma Editorial) don’t work together. They coexist in an independent way.
- Their business model is supported by comics and merchandising in equal parts.
- They have a wide-ranging product and a wide range of purchasers.
In this case study, we are going to imagine that store and e-commerce join forces and decide to undertake a joint selling project.
We went to the bookstore and the Comic Fair in Barcelona. This second space was essential because the first would provide us with direct customers of Norma Comics, meanwhile the second would bring us closer to the universe of comic fans and their respective merchandising.
and I conducted 10 interviews in total.Meanwhile,
did a survey too with questions about shopping habits and we learned some interesting facts:With this research we discovered some surprising insights:
- The occasional shopper has a big importance in the whole market. Many times their motivation to buy something is to make a gift.
- The buyer with a specialized profile loves the shopping experience in retail. They think that the e-commerce experience cannot match it.
- Users need guarantees when buying online: they want to know the product in depth. For example, a fun fact about comics: most of the times the illustrator who makes the cover is not the same as the illustrator who draws the comic! It is a problematic fact if the sale is online and Norma only shows the cover ;-)
- Online buyers highlight that they found problems in the checkout and after-sale services. This fact was due to a different stock from the website and the store and could be solved thanks to our proposal of merger of both markets.
Based on the information from the survey and interviews, we built these two user personas. We chose Lidia as the main user persona and Pau as the secondary one. We made this decision because, as we discovered during the research, there is a gap in the gift-buying market.
Additionally, Lidia is a more ‘relaxed’ and mainstream customer.
In the other hand, Pau is a more specialized one.
We proceeded to search an item in different ways as if we were Lidia looking for a gift. The most surprising fact was that the searches didn’t match the same results (neither in number nor content!). So we have to introduce a logical system into the Information Architecture to find the same results in different ways.
Card Sorting
The card sorting was a useful tool to find a logical way to distribute the information. As we have seen in the site map, the way how Norma structures the information doesn’t allow to find the right items in different ways. So we structured it into thematic collections (DC, Marvel, Harry Potter…) and by an organization by merchandising type. Due to the business model, it seemed necessary to give to the merch a privileged position and we discovered the most useful tags this way. We applied it when we added a navigation bar.
Our value proposition would be suitable for both kinds of user personas and rewarding from a business perspective:
- Mainstream users and specialized users can both buy on the website and feel comfortable.
- Product page where the specialized user feels satisfied and confident about his/her purchase
- From the business point of view: to expose the entire product as this is our selling point
Let’s prototype! From low-fidelity to mid-fidelity:
Once we had in mind our users and the business model settled, we started wireframing and prototyping 😈
For Lidia, we wanted to provide some kind of help to pick the right gift.
To do so, we decided to introduce an interface that would guide her through our vast product catalog.
This is how it looked like:
This feature would be accessible from the header of the page by clicking on a CTA button.
Besides that, we wanted to redefine the home page to make it more suited to everyone including Pau, our more advanced user, who would be able to dive right into his universe of choice.
From top to bottom, let’s walk through the home page:
- In the header, Lidia can start the gift picker interface.
- We introduced immersive navigation. You can dive right into the universe of your choice!
- Under that, we showed our most popular collections so that Pau could go straight to his content.
- For Lidia, our gift-seeker and merchandising lover user, an additional section was included highlighting our office-decor section.
- Under that, for Pau, a section showcasing a monographic of our artist of the month.
This is how it looked like in our first iteration with and without our improved search box:
After diving into a universe, we tried to give our users all the content regarding that section. We knew Pau and Lidia would feel comfortable with an immersive page before getting to the product page.
Last, but not least, we had a huge interest in providing the right amount of the right information on our product page.
The lack of appropriate information about the product is one of the biggest pain points towards Norma’s customers.
Once the cart was full and the user ready to go, we redefined the checkout process as we felt it was cumbersome and not as clear as it could be.
At this point, we started testing our design and we received some insights:
On one hand, our online tests indicated that the checkout part was too long, with too many screens. That could lower our conversion rate and we don’t want that.
From our in-situ testing, we discovered the following but, before telling you, let me ask you this question:
Can you point to the main navigation?
Neither could our users.
Our immersive navigation wasn’t as intuitive as we thought.
Our first guerrilla test brought us to this very important insight. We needed to add a clearer way to navigate through the site.
Additionally, we were told that we had gone too “minimalistic” for our lo-fi prototype and that, without any labels, our users wouldn’t know where to click to fulfill their mission.
Those who got to the checkout screens also told us that there was no button con confirm the gift message.
We were like…
Some of the users also told us that it wasn’t really clear what was going on with the scrollable parts. Some told us that scrolling horizontally wasn’t their cup of tea.
To address these issues we did the following:
- Add a navigation bar
- Add some titles and labels to ease the navigation.
- Remove two steps from the checkout process.
- Add the OK button for the gift message.
- Add indicators for the carrousels and removed horizontal scroll.
New insights that helped us reach the next step fidelity-wise:
After testing with these first changes that solved most of our usability problems, we got some new insights that helped us reach the next step fidelity-wise.
One of the changes we introduced was to put the spotlight on the products on every page, as the business required it.
We introduced a way to sign up for our newsletter and, in exchange, we would provide a discount coupon.
As Lidia was looking for a gift for her daughter, we felt that a filter for adult content was a low hanging fruit. She doesn’t need to find her gift mixed between mature content.
From our testing, we felt our gift picker wasn’t properly exposed to the user. The testers that found it actually like it a lot but not everyone realized it was there. We decided to move it from the header to the body of the page.
For our immersive navigation, we moved away from the more scholastic approach of differentiating between universes and collections towards a thematic approach based on characters or series.
An easier way to navigate between themes and categories was added, too.
The product page got a refinement, like our gift picker interface.
Regarding the checkout, we moved away from a page by page approach to a scroll based — snapping helps here — to reduce the page amount.
Our gift option finally got its confirm button — yay! — and added a 404 page😌
🥁🥁🥁
…And finally we got this!
You can check out the prototype — and feel free to give us as much feedback as you like — in our InVision interactive prototype:
With this, we culminated our case study!
Before moving on, let’s talk about the upcoming steps we would follow regarding this product:
- High fidelity prototype: with this step, we would increase the immersive experience into the comic universe with different iterations.
- Develop the product page: so that the expert user can learn more about the product. In this case, we have focused on merchandising, but if we develop the comic part, it would be necessary to include for example the preview of the first five pages of a comic.
- Develop a parallel market of the comic-reading subscription system.
Thanks for reading! Clap your hands if you are happy and let me know what’s your favorite superhero down below! Mine’s starts with B and ends with atman 🙌🏼
Adiós!
All the icons are designed by the amazing
Go check her stories out!