“El Buscón” Web Redesign — Case Study
Briefing: The game rules
- Goal: Redesigning a complete bookstore web, including a new functionality based on an UX Research.
- Role: Group project formed by 5 UX/UI designers. All of us have participated allong all the phases ( Team: Rubén Alguacil, Mireya Fernandez, Nuria Gallego, Nerea Amate).
- Duration: 2 weeks.
(Let me say sorry because all my original work images are in Spanish although I’ve tried to explain everything in English. I promise I’ll try to work my stuff in English next time 🙇🏻♀️).
UX Research
Our client
The first step for this project was selecting the web to redesign. The only requirement was that it had to be the website of a physical bookstore. We finally decided to focus on a local bookstore to having acces to the owner and workers and be able to have more information about the redesign they would like to have.
By this way, our cliente will be “El Buscón”, a philosophy specialized bookstore with more than 40 years of history. The current web was designed in 2006, thanks to a governamental subvention but the designer did not understand the “El Buscón” style, so we are going to help them.
“El Buscón” Web: http://www.elbuscon.es/libros.php
“How can we improve the web?”
When we had already the “patient”, we began to think about how to improve this web. We made a deep analysis about the current functionalities and we created a first survey to began knowing our potential users:
What we extract for this first survey was (92 responses):
- 66,7% buys book in an online way (so it is important to have a good web).
- 63,3% reads reviews before buying a book.
- The most frequent online bookstores: Amazon, Fnac, La Casa del Libro, El Corte Inglés
Thanks to this results, we could made a features comparison between “El Buscón” Web and the most used online bookstores:
We could see that, although for the users is important to have reviews of the books, “El Buscón” did not have this functionality, contrary to the rest of websites. So we had already something to start but, what about the client requirements?
Listening to our client
As important as listening to our user is to take care of our client, so we went to the physical store to talk to the owner and workers. We got a lot of important information:
- Most online users come to the web looking for rare books, so it is something that distinguishes them from the other book stores.
- But the sells are not completed inside the web: the users finally call or write an email to make their purchases.
- “It is not a blog, it is not just information, it is the real stock and every day it is updated with the information that we put new from the stock of books. What happens is that it is very antiquate”
- “The web does not have a good search engine. It is too precise, and it does not have an editorial search engine. And then whoever made it specified too many genres. I mean, there is Greek philosophy, Latin philosophy, and you say, damn it. I mean, it’s too crazy.”
Putting the pieces together
So after all that investigation, we already had some pain points to work with:
- Bad information architecture: the genres shown on the web did not match those available in the library (and there are so many).
- The website does not have a book recommendations and evaluations service.
- Bad shopping gateway, without security and feedback.
- Its differentiating aspect is not exploited: specialized in philosophy.
All these points lead to the main problem: users do not finish the purchase on the web. We made a Lean UX to guide the project according to the results obtained:
Empatizing with users
Thanks to the info obatined, we could create an user persona for our project. It would be a students who likes read specialized books that rarely finds on other platforms like Amazon:
We tried to imaginate the User Flow of Gonzalo (our User Persona) inside the new “El Buscón” website, to see the points where we should be focalized on.
UX Design
Ideating
For helping Gonzalo in his way (User Journey), we made a Brainstorming:
We had really interesting ideas like making an “Author of the month” section or a Ranking by El Buscón of the best books. Moreover, we thought about foment the aspect of an original bookstore with special books and creating a comunity with events, discounts…
Too much book genres!
We had arrive to one of the most difficult parts of design a web: the information architecture . Moreover there was and added difficultie: organizing book genres is not easy! To hel us, we made a lot of Card Sorting to find a logical way of clasify the books that El Buscón have (previously, we had talked to the owner to verify what genres mantein and what eliminate).
Finally, we get a new Sitemap:
Contrary to current website, we decided to show our products in the home scrren in a “recomendations” format, changing the “Who are we” to a secondary section. Moreover, we eanted to mantein the search bar in the home screen, due to it is the main functionality of the web. The rest of the books were organised by 7 sections inside “Catalogue”. How it is show, the book genres were diminished to not confuse the user. “Philosophy” has been maintened like a principal section because of is the most importnat genre of “El Buscón”.
As new functionality, we had added a new “recomendations” sections with the author of the month, some books recommended by “El Buscón” and the favorites books of users. In addition, users will be able to valorate the books that they read and these reviews will appear inside the info cards of everybook to be seen by other readers.
Prototyping
We first created a low fidelity prototype to see if the results were usefull for the users:
When we saw that the new website was functional, we made a mid fidelity prototype to began locating the elements inside the space. We used a 12 columns structure.
UI Design
Renewing but keeping the essence
When working with a brand with more than 40 years of history, it is important to not change in a radical way the image because it can cause confusion to the abitual clients. Moreover, we believe that the trajectory of the brand is a very important aspect of “El Buscón” too, so we tried to respect it in our redesign, but giving it a new sense.
The logo is a good example of how we have worked on the redesign of the brand. We have respected the colors and theme, but in a minimalistic way to making it more adaptable and undertandable, abandoning the historicist style for one more atemporal.
The color: the first big change
For being able to adopt an style, we first made a moodboard to verify the brand attributes of “El Buscón”.
The most attributes mentioned was:
Historical / Intellectual / Classic / Mature
We found these attributes so in line with the nature of “El Buscón” (a specialized in philosophy bookstore with more than 40 years of history) so we decided to follow this aesthetic.
Following this line (and without forgetting the initial brand style) we decided to mantein de red principal color of the website, but making it a secondary color. As a principal color, we selected the purple (also present in the logo but not in the original website) that represents the philosophy and the greek culture. Moreover, this color is very present in the physical store, so helped us to create a connection between the web and the real world.
After showing the results of our style investigation to “El Buscón” owner, he said to us that the red color was not a really brand color. In fact it did not appear in the original logo. It had been used by the first web designer but without any brand relation. After knowing this, we decided to finally eliminate this red, using only the purple.
Typohgraphy
Keeping always in mind our Moodboard and brand attributes, we selected 2 different typographies for our new web: One more clasical and decoritive for the titles (Lora) and another more legible for the text (Lato).
By this way, we could maintain an historical style without sacrificing the legibility of the text and the atemporal design.
Almost finished: High Fidelity Screenshots
Finally we created a High Fidelity Prototype and tested with some users.
We were happy because we found that we have catch very well the philosopjhy vibes. A personal thought: the new web was like an ancient greek agora but in the digital world (you can call me crazy 😬)
However, when testing we found some problems with the design:
- The navbar was so heavy and toke so much attention.
- The “Top 3” section was not very clear.
- The “buy” botton of home page was not clear enough
Last changes
Final Prototype
Some conclusions
This has been a really interesting project due to has been the first time we create an entire website. I have learned a lot, but the most important thing is the experience of a team work.
When designing in a group there are so many good things: more ideas, more different points of view… But there are also some hard aspects like the decision making. Fortunately, in this case all the members of the group have had a good conection and we have managed the conflicts in a very mature way.
When working as a team, you have to bear in mind that sometimes you have to give in favor of the other and that it is very important to listen to each other and not get carried away by your own ideas.
In this case the experience has been really cool: we have laugh a lot! So I want to thanks my team for making the project go ahead so easily and for the patience when things come harder: Rubén Alguacil, Mireya Fernandez, Nuria Gallego, Nerea Amate ❤️
If you have read so far…
Thanks for being interested in my project 🤩 I am still learning so if you have any question, suggestion or comment I will be so happy to hear from you!
✉️ viviserranovivi@gmail.com
