Armonia

E-COMMERCE WEBSITE

Armonia is a Print-on-demand web platform for books

Final product

SEE IT IN ACTION

Duration 80 hours

Project Type:  Web App

Team: Solo Project

Tools: Illustrator and Figma

Read case study

HOW I GOT THERE

PROJECT BACKGROUND

OVERCOMING THE PANDEMIC

Armonia Impresores is a printing shop based in Colombia struggling to stay afloat during the pandemic. They offer products that rely on people being on the streets to have a demand. Products like flyers, billboards, and restaurant menus were their main sources of income.

Now that things have changed in the post-pandemic world, they want to create a print-on-demand platform specialized in books to bring more revenue into their business.

THE CHALLENGE

CREATING A NEW PRODUCT FROM SCRATCH

This is the first time the company will be working on developing an e-commerce site. Although they have already identified the category of product they want to compete within the digital space, they are unsure of how to offer the service.

I was tasked with defining the best way to build the product.

HIGH LEVEL DESIGN GOALS

1. Design a responsive website to offer a service to self-publish books. 


2. Identify potential users for this service to develop a content strategy for the product

MY ROLE

This was a solo project. I was tasked with researching, designing, and testing the feature.

KICKOFF

USING RESEARCH TO FIND THE RIGHT STRATEGY FOR THE PRODUCT

UX RESEARCH METHOD 01: SME INTERVIEWS

To kick off my research, I decided to conduct subject matter expert interviews. I had two, one-hour-long interviews.

During the interviews, I was able to identify provisional user personas and map out hypotheses in regards to knowledge gaps users might have when it comes to hiring the service of printing a book.

INSIGHT 1: Provisional personas

Self-published books have little commercial value.

People that hire this service are usually authors that receive government grants, small publishing houses, and professionals such as physicians and lawyers that publish books in order to advance their careers.

INSIGHT 2: Knowledge gaps

Users come in to hire the service, with an idea of the type of bookbinding they want. But are unfamiliar with the type of paper they require and how to get their files ready for production.

UX RESEARCH METHOD 02:  PRIMARY RESEARCH

I used the findings of my primary research in regards to provisional user personas to recruit a group of people for in-depth interviews. I managed to talk to 3 authors and 1 editor who owns a publishing house.

The purpose of these interviews that lasted between 30 to 40 minutes was to understand people’s motivations to start literary projects and how they end up self-publishing.

Most importantly, I wanted to test the hypothesis that users have little idea about book materials. And figure out key informational points users needed to decide on purchasing the book through the website.

KEY INFORMATIONAL TOUCHPOINTS

A helpful visual guide of the different materials they can choose from
Pricing information and how it changes depending on volumes
Delivery times
A clear message that customers can print a single sample of their book to as many as they want

SUMMARIZING RESEARCH

Before moving on with the ideation part of the design process, I created a customer journey map and a user persona to keep my solution focused on the needs of the user.

Through primary research, we decided that this product should be built for people that self-publish themselves to advance their careers.

Publishing houses were left out as users because their creative process required less standardized products, that are outside the scope of this project.

User persona

Customer journey map

IDEATION - POV and HMW questions

TRANSLATING RESEARCH FINDINGS INTO IDEAS

To launch my brainstorming process,  I translated insights into how might questions.

How might we show Amalia the different materials available so that she can identify the ones she wants for her finished product?

How might we show Amalia that self-publishing can be affordable?

IDEATION - MID FIDELITY WIREFRAMES

TESTING THE USER FLOW USING MID-FIDELITY WIREFRAMES

I began creating a set of low-fidelity wireframes. By the end of the exercise, I was able to fine-tune the user flow for a customer that wants to customize a book.

I then converted the sketches into mid-fidelity wireframes and into a prototype in Figma. Lastly, I recruited 4 people in a broad range of age groups (30 to 65 years old) to test it. The usability tests were a mix of in-situ interviews and video calls.

The participants that were on the older age range were recruited through a list of clients provided to me by the company to resemble the user persona as much as possible.

Each participant was given 3 tasks:

1. Explain how the service works
2. Attempt to quote a project through the website
3. Upload a literary project, customize it and place an order

Through this exercise, I noticed that the user flow needed to be reconsidered. Users found the page explaining the different materials confusing. They were expecting the customization process to start right away. There was also some friction in the tab design pattern for the book customization. Both issues are highlighted on the image below.

IDEATION - UI KIT

CREATING UI COMPONENTS TO USE IN THE FINAL PRODUCT

Before incorporating all the feedback gathered through testing, I created a UI kit to inform my high fidelity prototypes later on.

The company didn’t have a style guide in place. They only provided me with a vertical logo that was rearranged to fit a digital design better. I used the background color of the logo to come up with an analogous color palette to keep the design consistent with the brand.

IDEATION - HIGH FIDELITY PROTOTYPE

FINAL RESULT

I used the results from usability testing to improve the flow. Then conducted a second usability test, using a different set of participants and the same tasks of the first round.

The overall results of the prototype were positive. Users thought the design was very easy to interact with.

OUTCOMES

PROJECT TAKEAWAYS

WHAT I LEARNED

The most relevant learning experience for me during this project was to become a true user advocate.

I come from a business background, and during this project I only got to talk with clients that work on the business side of things. So at times, I felt inclined on compromising features that would make it less expensive to build. However, I managed to defend my design decisions in order to provide users with what I thought was the best experience possible.

If you want to know more about me, or my work, I’m an email away!
carolinahgor@gmail.com
+57 318 831 4676