capa 2.png

'O Livro' Bookstore

Culture and innovation books at your hands

The challenge

 

'O Livro' - The Book, in english - is an e-commerce app concept.

This work is the result of my pre-employment test at Kobe Creative Software House. The goal was to deliver in two days an e-commerce app concept with a minimum five and maximum ten wireframes, an checkout userflow, the UI guidelines, a prototype and an usability test script. As a bookworm, I chose to make a make-up bookstore e-commerce app that sold innovation culture books.

As the UX / UI Designer to be hired, my role in the was:​​​

  • Userflows

  • Sketches

  • Wireframes

  • Branding

  • UI Design

  • Prototype

  • UX Research Script

Introducing the Design Process

 

It was clear that I needed user insights that would help the platform to achieve its goal. Without these key insights, I would be guessing the best solution. To get out of this deadlock, the team had to search and understand some of the mostly used books e-commerces. 

The method for this challenge was inspired in the Design Thinking Process launched by IDEO in 2011, focused on human-centered design:

Inspiration

Benchmarks

 

I started the process to making quick research on benchmarks in bookstore apps and popular e-commerce apps that sell books. Then I tested some of them, to see how their "buy a book" userflow worked. I took some notes and made a tiny analysis to guide me through the ideation phase.

Ideation

User flow

I've created a user flow diagram to map every step of the user interaction required to achieve the main goal of this app: "As a user, I want to buy a book".

You can check it out the complete userflow of the app in here.

Sketch

Based on the main user flow, I started to sketch some ideas using Design Sprint method Crazy 8s, drawing 8 low fidelity wireframes for the app.

Wireframes

 

At this phase, I started to create in Adobe XD digital wireframes based on my paper sketches, focused on the main user flow, to buy a book in the app. 

wireframes.png
Branding

I tried to create a simple and easy to remember name for the app. Then I created a slogan and started a references and inspirations search in the web. I then defined some concepts for the product's brand:

  • Fun

  • Creative

  • Trustworthy

I created some sketches and then started to design some more options in Adobe Illustrator. When I got the final version, I made some improvements to integrate the brand with the UI Concept.

Implementation

User Interface Concept

Once I had the brand ready, I started designing the UI concept and final layout in Adobe XD. I followed a fun and light visual style, inspired in

apps with a relaxed language and spirit. The main concept for this UI was to integrate the brand, designing a trustworthy, creative and user-friendly platform. 

You can read the UI Guidelines here.

Prototype

 

I created a prototype in Adobe XD from the UI, to deliverThe prototype also allowed our team to test navigation and usability internally, as well as what could be our design language for the components and how layouts should look like.

UX Research Script

 

The final phase was to write an UX Research script for the app. I planned a remote moderated usability test, that included a task analysis and a questionnaire, that aimed to:

  • Detect problems in userflows;

  • Understand users perception of the app;

  • Verify the tasks usability in the app;

  • Evaluate users NPS.

You can read the complete UX Research script here.

The beggining

 

I delivered this project for Kobe's evaluation and in some days, I got an interview and soon hired. Challenge accepted! It was a great experience to start in a job like that. When I started in the company, I began working on a furniture e-commerce app, so the test just helped me a lot before get into it.