The challenge
Rika Comic Shop is a very well known comic book shop that has been in business for more than 27 years in the city of São Paulo, Brazil. Our challenge was to understand both the business and the users, and spot opportunities for improvement to propose a re-design for their e-commerce website. Our ultimate goal was to humanize the online shopping experience at Rika by making the users feel more confident, supported and inspired.
Disclaimer: This challenge was brought to me as part of my journey as a student at Ironhack São Paulo UX/UI Design Bootcamp 2020.
Team
The project was done in partnership with Juliana Carlin and Caio Munarolo.
Timeline
The project was done on a 5-day sprint in March 2020 at Ironhack São Paulo.
Tools
We used tools such as pen & paper, Google Forms, Figma and Illustrator.
The process
We followed the Design Thinking Process: discover, define, develop, deliver. We analyzed the business, empathized with the users and then developed a solution taking both into consideration.
My role
As a team member on this project, my role included taking part in the whole research phase, followed by a strong focus on the project management, ideation and wireframing of our solution.
Understanding the business
Our first step was to get a better grasp of the whole comic-book market in Brazil, find out more about Rika and analyze its main competitors.
We started off by conducting market research and found out that there are more than 20 million comic-book readers each month in Brazil and that Comic Con, the biggest pop culture festival in the world, had over 280 thousand visitors last year in São Paulo. Then, we researched the business and realized that Rika is very well known in São Paulo and focuses on selling second-hand books. To dig deeper, we interviewed Rika’s manager, Jaqueline, and got some insights into their current situation. After, we did a competitive analysis between the top 3 comic book shops in São Paulo, understanding how they showcase their inventory, what content they include, how it’s organized and what UI patterns are standard practice.
Empathizing with the user
Our second step consisted of better understanding our users, their habits and the problems they face within this specific comic-book-shop context.
We began by conducting user research and found out that 78% of users were male; 50% were aged 20-30; 70,5% buy books both online and on physical shops; and 53% have suffered from receiving items that fail to meet their expectations, delayed delivery and lack of support. To dive deeper into this data, we performed some in-field guerrilla research, interviewing 5 users and finding a bunch of insights. Then, we created an Affinity Diagram to visualize all of our research and understand our user’s profile, goals, and frustrations. At this point, we generated our final HMW statement: How Might We help comic-book enthusiasts easily find the book they want, while feeling the same immersion they’d feel in a physical shop?
Based on all our research, we were finally able to create personas and look at the world through our user’s eyes:
Identifying the problem
Our third step was to find out more and empathize with the frustrations that our users face on their typical comic-book online shopping experience.
To start with, we created a storyboard illustrating a typical comic-book online shopping experience for both collectors like Lucas, and newbies like Carla. With this, we were able to identify the users’ main pain points. Then, to help us explore those pain points even further, we decided to create a journey map to follow Lucas on his online shopping experience. This map made us realize Lucas’s lowest points, leading us to perform a task analysis documenting each step he currently has to take in order to complete his task of ordering a book on Rika’s website.
All these insights led us to our problem statement: Comic-book enthusiasts, both collectors and newbies, need a way to feel inspired, supported and confident while buying comic-books online because they want to feel the same kind of immersion they’d feel on a physical shop.
Ideating the solution
Our fourth step consisted of gathering all our findings and sketching our final concept on paper. This would ultimately lead us to our final solution.
To begin with, we listed down all the content, deconstructed the structure of all the relevant pages and created our first version of a site-map, specifying the exact structure of each page. Then, we performed card-sorting interviews with 5 users, asking them to group the content in a way that made sense for them. With this, we were also able to identify some patterns and iterate our site-map accordingly.
Finally, we put all of our learnings to use and did a series of ideation exercises — Round Robin & Crazy 8s — to get our creative juices flowing and collectively pour our ideas on paper. Then, we pulled all our best ideas together, iterated our site-map and sketched our final concept.
Building the solution
Finally, our last step was to deliver the solution we had come up with in the previous phase, by wireframing, prototyping, testing and iterating it.
I started off this phase by mid-fi wireframing our concept on Figma, basically creating a digitally structured version of our previous sketches. Then, Caio stepped in to turn the wireframe into an actual working model. As soon as we had a beta version of our product ready, we run usability tests with 5 different users, giving them specific tasks and constantly evaluating each and every step the user took.
The tests were fundamental to the success of our project. Even though we were confident about our prototype, our users quickly identified some frustrations that we wouldn’t have identified otherwise, allowing us to further iterate our prototype to best meet their needs.
The solution
The main differentials
Welcome to Rika’s new website, where our goal is to humanize the shopping experience, creating an online experience that surpasses the customer’s expectations by uncovering the power of confidence, support, and inspiration to obtain greater retention and lifetime value. In order to do that, we incorporated some important differential features into our design:
➝➝ The user feels more confident by having a simplified and visual navigation. This way, the user can preview some books before opening the category.
➝➝ The user feels more confident by being able to read a preview of the book (up to 10%) and having access to previous reader’s reviews on the product page.
➝➝ The user feels more confident by having simplified filter options, including an option to filter the state of the book (good condition / bad condition).
➝➝ The user feels more confident by being able to buy a book in one click (checkout as guest) without having to log in or create an account.
➝➝ The user feels more supported by having access to online customer service. There is a floating chat icon connecting the user to the service.
➝➝ The user feels more supported by easily viewing, creating and managing his own collections as well as knowing which books he’s already purchased.
➝➝ The user feels more inspired by having personalized recommendations, generated by machine learning by self-assessing their personal interests.
➝➝ The user feels more inspired by having personalized recommendations, generated by machine learning by self-assessing their personal interests.
The happy path for collectors like Lucas
He arrives on the home page > He closes the popup window > He clicks on ‘Marvel’ > He views the shop page > He hearts the book he wants and clicks on ‘create a new collection’ > He logs into his account > He creates a new collection > He views his collections and clicks to add a new book > He selects a book from the suggested books > He views his collections again < He clicks to add a new collection.
The happy path for newbies like Carla
She arrives on the home page > She clicks on the recommendations popup window > She selects her interests from the dropdown list > She views her recommendations > She clicks on the login popup to save her interests > She selects ‘create a new account’ > She views her interests in her account > She clicks on one of the recommendations to read more information about that specific book.
Next steps
Next steps would include offering the possibility to pick up the book at the shop; creating an alert notification for when your favourite product is in stock; accumulating points; defining different prices according to the state (quality) of the product; and creating a forum.
Lessons learned
I learned that mixing your personal passions with a professional project can prove to be tricky. I learned that it takes hard work to separate yourself from your users. And I learned that the key to successful teamwork is clear management and communication.
