Case Study | Week 6_El Buscón Bookstore (part 2)
During this week we had the chance to join our team from week 2 and apply UI to our redesign of a bookstore webpage we chose. The main objective of this project was to make the webpage functional and aesthetically pleasant, creating a High Fidelity approach for the design.
Team Work
One aspect that we must stand out is that a new member was introduced to the group. One of the members of the team was switched to another one from some other team. Therefore, the first step was to explain to the new team member the most important elements of the project.
The whole process was very exciting and went very well, even though we missed our former partner. The new one pointed out this we didn’t take into account in the previous phase and helped us a lot during the design process.
It was very interesting to simulate this kind of dynamics that we will certainly have to face during our future professional life.
Previously on El Buscón…
Before digging into this week’s work, I will recap the conclusions we came up with during the first phase of the project (if you are interested, you can see more about this project on my Medium page, Case study — Week 2).
Research
After 90 surveys and 14 interviews we came up with this conclusions:
- 66,7% of the respondents buy books online
- 63,3% of the respondents read comments and ratings before buying books online.
- The owner of the bookstore told us that most of the online customers come to the website looking for uncommon books.
Main problem
After interviewing the owner, and trying to buy a book on his webpage, we realized that the main problem of El Buscón’s website is that:
The user rarely purchases the book online and ends up calling the bookstore to complete the purchase.
Here are some screenshots of the actual page:
Our User
After analyzing this data, we came up with a User Persona, ideal for our project:
Gonzalo is a Philosophy Ph.D. student, who can’t find specific books for his thesis on the most common online bookstores (such as Amazon). He lives in a small town so he cannot access in-person the bookstores that may have the books he is looking for.
Solution
The solution for this problem was to redesign the webpage making it user-centered, improving the Architecture Information (organizing the categories and creating search filters), and creating a Comments feature, in order to make the online purchase more reliable.
The New Phase
Now it was time to give some realism to our design, applying what we have learned during these past weeks about UI design.
The first step was to find the visual design that represents what the brand is.
To do so, we created a Moodboard and established our brand attributes:
We wanted to maintain the essence of El Buscón, which can’t be appreciated in their actual webpage, as the designer that developed it chose the colors and themes without asking the owners.
For that reason, we wanted to get rid of the garnet and beige colors that invade their actual page and focus on their brand color, purple, the color of philosophy.
We also redesigned their logo, updating it and making it more adaptable to web.
Next, I will show you some tools we used to create our design:
The Result
Here is the video of the prototype we presented for the keynote show:
Improvements
After the presentation, our instructors pointed out some elements that we needed to change.
These are some of the improvements we made in the design:
- Home Page: Redesign of the navbar and the purchase button. Also reduced the amount of color.
- Recommendations section: Redesign of the Top 3 structure.
- Book page: Increase of Line Height for the book’s synopsis. Changed the color of the action button.
Next Steps
During this week we had to design an app for this bookstore in Mid Fidelity. We decided to go beyond the assignment and developed the High Fidelity prototype of the app.
The next step would be to design the whole process also for the app, as we did on the webpage.
To Sum Up
We had some group crisis, which is completely normal, but in general, we did great teamwork. My teammates were very proactive and we had a great time while we did the project.
It was a very interesing project that helped us realize how badly designed some webpages are and what problems are originated due to this bad design. Small modifications, such as colors, make a big difference when making a first impression of an ecommerce.
Thank you for reading.
