Mountains of Paper
Mountains of Paper (Montañas de Papel in their Spanish original name) is a small self-publishing service which helps authors publish books under the print-on-demand system. At the beginning they operated locally but now they would like to increase their area of influence. That’s why they want to build a website through which they will try to reach more clients.
Problem
The client has two primary needs. Firstly, Mountains of paper needs to find more writers who want to publish using their self-publishing service and second, they also want to help these authors promote and sell their books.
Goal
To build a responsive website with an ecommerce module that atraccts people around the Spanish speaking countries interested in publishing and selling their own books.
Role
T- Shaped UX designer. It could be said that I was more focused on the UI design, but I was also engaged in other activities such as researching, conducting a testing process, writing the text content and uploading the whole project to the web hosting.
Target Devices
Desktop, tablet and mobile.
Time
Around half a month.
Tools
Adobe XD, Adobe Photoshop, Miro, Flaticon, UsabilityHub, Unsplash, Color.adobe, Contrast-ratio, Grammarly, Readable.
User Research
I divided the research process in two parts. First, I conducted some interviews asking potencial clients questions about aspects related to book publishing. Then I started a competitor analysis for evaluating the different options that other companies offer.
Interviews
I chose people interested in publishing books. I received the help of Valentín, a veteran bookseller that introduced me to several writers that were regular clients of the bookstore where he worked. Below, you can see some of the questions that I asked the interviewees.
Competitor Analysis
I selected five Spanish companies that have offered publishing services over the last several years. Thanks to the competitor Analysis I got a better understanding about this market.
User Personas
Reviewing the answers collected during the interviews I found two types of distinct profiles.
User Persona 1
Place Statement
Claudia is a girl who loves poetry and dreams about publishing her first book.
User Persona 2
Place Statement
Alberto is finishing a historical novel inspired by an event that hapenned in his family in the past.
Preparing the Design
Before starting the design process, you need to organize the content of your website in a way that aligns with the brand style. That’s why I decided to create an affinity diagram, a useful method used to group ideas generated by brainstorming. The staff of Mountains of Paper helped me do it.
Affinity Diagram
Thanks to the artist Marina Abramovic, I learned many methods to control the aggressive emotions properly. One of my favorite Abramovic’s method is counting grains of rice. Maybe, right now, you can’t make sense of it, but I guarantee this method works. Affinity Diagram is like counting grains of rice; you need to experience it to realize its utility.
Looking for Inspiration
Inspiration is a magic force which can appear at any moment and anywhere. This moodboard is comprised of inspirational elements that try to illustrate the style that Mountains of Paper’s team wishes to communicate with their clients.
Wireframing
In order to move to the next step you need a compass which indicates where North is. Wireframes are like compasses that you can use to find the appropriate visual tone for your website.
Paper Wireframes
Mobile Version
Tablet Version
Desktop Version
Digital Wireframes
Mobile Version
Tablet Version
Desktop Version
UI Design
The moment of truth is coming. In the UI process you will start to perceive the sense of your design.
Mockups
Thanks to the Mockups the stakeholders of the Mountains of Paper was able to get a better understanding about my design’s intentions.
Content Writing
In this part of the process and, according to the main ideas of the stakeholders, I tried to write texts for the website that were able to communicate in a direct and a simple way with the people interested in publishing books through this service.
Mobile Version
Tablet Version
Desktop Version
Design System
I used blue as the main color in my design system. Generally, this color conveys loyalty and trust; two qualities that matches perfectly with Mountains of Paper’s spirit. For the typography I chose “Raleway”, an elegant sans-serif typeface family which has good readability.
Design Observations
In 2010 Eric Schmidt, who was CEO of Google at that time, invented the concept “mobile first” for product design. As I am a fan of this concept I decided to apply a mobile-first strategy to build this website. I was sure that using this method would simplify and improve the final content, in addition to saving product design time.
In order to get a responsive web design that allows users a correct visualization in every device, I established 3 breakpoints: 576px for mobile phones, 768px for tablets and 992px for laptops.
Uploading Process
Due to lack of budget, the CEO of Mountains of Paper could not afford a computer engineer. As I am familiar with some Content Management Systems and I have certain knowledge of HTML and CSS, I lead the implementation of web pages on a web host. For this case I hired the hosting service of webEmpresa, a Spanish company that has a good technical support. For managing the content I chose WordPress, a powerful CMS that is very easy to use.
Usability Test
Testers found several pain points during the usability test, especially in some aspects related to the accesibility. For correcting these pain points I added new features to the website. I speak about this in more detail in the next section.
Accessibility Considerations
For addressing the accessibility problems I decided to install a wordpress plugin that allow users choose a dark mode option on the webiste. Thanks to this option people with low vision will feel comfortable when they scan the contents of the website.
Another important decision to improve the accesibility experience was adding aternative text for describing each image. In this way the screen readers will not have trouble to read this text.
Light Mode
Dark Mode
SEO* Approach
At the beginning of the project one of the essential targets of the stakeholders were to design a plan which allows them to catch clients through the use of searching global tools such as Google. In this way, people interested in finding a self-publishing service, to publish a book, would be able to find “Mountains of the paper” on the top positions of Google results. One plugin called “Yoast SEO” helped me to achieve that.
*Search engine optimization (SEO) is the process of improving the quality and quantity of website traffic to a website or a web page from search engines.
Takeaways
Impact
Nowadays, for surviving in this age of the disruption, I think it is really necessary that companies have visibility in the digital world. Having a website is only a first step to adapting to the new times. I hope this webiste helps Mountains of Paper expand their target audience.
What I learned
Many years ago, Albert Einstein said that “A day without learning is a day wasted“. I totally agree with this phrase. In my life I have tried to follow this lifelong learner philosophy as much as possible. Building this website has helped me to consider the importance of accessibility on design and to improve my resilience in stressful situations.
Thanks for Scrolling!!
