Week #2: Local e-Commerce
An online store to Palavra de Viajante bookshop
During the 2nd week of the UX/UI Bootcamp, we had to design an online shop for a local business. We chose a travel bookshop based in Lisbon. Independent thematic bookshops not only offer rare, specialty books, but they also provide patrons with a wealth of information on all sorts of unique topics. In this case, we are only talking about TRAVELING. The atmosphere of the physical store is amazing, every detail of the place is related to travel in a special design concept, from the decor to the curatorship and the arrangement of the products. It’s a carefully crafted physical experience.
Our main challenge was to translate the atmosphere of the store to the e-commerce regarding that the owners had a bad experience with an online shop in the past.
So, let’s do some research, methodologies, sketches, prototypes, tests, and make it come true!
We started week #2 learning about the roles in a tech team and the relationship between Design and Development. To implement any design, the content must:
- Exist in a usable format
- Be stored in a database
- Be retrieved and processed (programming required)
UX is responsible for designing for all states and possible outcomes of user interaction, even think about errors that may occur while browsing, for example.
How we can achieve that? With a good project!
PROJECT MANAGEMENT TRIANGLE — This is the basic principle of Project Management to understand all the steps of a project to not break. Design is a process! The Project Manager can trade between budget (cost), deadlines (time), and scope (features).
We also learned about AGILE, a philosophy to manage teams. The advantages of this system are: building every time for the goal, iterative, always evolving, taking something new, it’s adaptive (adaptive planning), you’re always in the movement, the scope can vary, requirements can change and working software is the primary.
1. Research
UX Strategy
UX is the bridge between the business and users. It is important to understand what’s going on and where the business wants to go.
TECHNOLOGY + BUSINESS + DESIGN = UX
Strategy Blueprint
The UX Strategy Blueprint is a simple tool to help to define a UX strategy. It’s based on a template with CHALLENGES, ASPIRATIONS, FOCUS AREAS, GUIDING PRINCIPLES, ACTIVITIES, and MEASUREMENTS.
When you first start working on a project, the client always knows a lot more than you. That’s why is very important to ask for interviews, documentation, and valuable information about the business early. And it’s highly recommended to do some desk research about the business and the company too. As a UX, it’s your business to understand the business.
Stakeholders Interview
The stakeholder interview is an opportunity to gather vital insights to perform analysis. It was essential to translate stakeholder’s needs into actionable insights.
We structured an interview with one of the owners to know better the business of the bookshop, the history, the concept, the types of clients, inspirations, competitor, and more. Visiting the bookshop and spend one hour there was valuable to understand how the books are arranged (book sessions were separated by continents) and, because of it, we decided to include a map on the landing page and the products searching by destinations. We intended to apply this experience of “trip” on the website.
Business and Competitive Analysis
Benchmarking is often the very first step in a project to take valuable information about business competition. Here we analyzed the competitors’ websites and their e-commerce (5 bookshops located in Lisbon and 3 from abroad in the same business based in an online survey).
Brand opposites
Scaling in opposite values, we pointed out the position of the competitors in a matrix to take insights visually. By taking also into account to our comparison of the store’s physical experience and previous website, we decided to better accompany the transition to the online market, focusing on the bookshop’s image to make it more modern and innovative.
Positioning map
It is used to understand where our client’s service is located based on specific qualities in the market (LUXURY, INNOVATIVE, VALUE, and TRADITIONAL). In the analysis, our client is the green point (on the left) located between Luxury and Traditional. We found a gap in the market between the Luxury and Innovative (circled point). Valuable information!
2. Build
Information Architecture
IA is the organization, search, and navigation system that helps the user to complete tasks on the website. Typically, it’s practiced after the planning phase. The first question is: where will I put the information? In our case: how the user can look for a book to buy? How we organize a lot of features (blog, wishlist, events, etc) we want to add to the online shop?
The purpose is to gather things that make sense to help people find what they are looking for. People have different mental models, that’s why Information Architecture is so important.
The purposes of IA are: feel comfortable, find a way better, improve sales… Improve the experience of the user!
Sitemap
It helps the transitioning from DEFINE to IDEATE and PROTOTYPE. At this step, we took off a lot of features we were willing to add and make it simple and easy to do.
Card Sorting
Conducting different types of card sorts with 5 users, the first feedbacks started to come. With different goals, motivations, and behaviors they helped us to organize items into logical groups.
User Flow
IS A MAP FOR UNDERSTAND HOW THE USERS IS GOING TO REACH WHAT HE IS LOOKING FOR.
Many users flow in many tasks of the website. There is not only one way to do it… So why do we create UF? To define how the user can accomplish a task, anticipate the needs, validate your user journey. You will be able to detect possible pain points and simplify your solution quickly.
Use Cases and Scenarios
A use case is a written description of how users will perform tasks on your website. We created a User Persona called Marta, “the pro-traveler” that was looking for a guide to her next vacation trip to Africa. We also chose other kinds of cases to figure out who is going to be using the website:
- The user is looking for a guide for the next vacation trip
- The user wants to know the opening hours
- The user is looking for a book about Portugal
- The user wants to find a gift for a special person
We also created 15 possible scenarios to layout on what circumstances hold when a user encounters the website. It’s a real situation where users might be in when using your product. For example:
- Someone went to Bertrand to buy a travel guide book and was referred to Palavra de Viajante
- Someone is planning her next vacation and is studying destinations in Africa
- Someone read the store’s column in Jornal Económico and was drawn to visit the store
- Someone is from Lisbon, born and raised, but lived in England for a few years, where he fell in love with London travel bookstore Stanford and looked for a similar book shop in Portugal
- A tourist who walks by the store sees it and is curious to check its website
Concept Sketching
With Round Robin and Crazy 8 dynamics, we started to design with the minimum that we can to represent our idea. It’s the best way to start designing an idea before putting resources into a process of creation.
At this point, we started to develop the idea of a map or a glob on the landing page. Bellow you have some sketching in lo-fi.
Prototyping — Low Fidelity
At this point, we learned how to fake it! Prototyping is like a building facade for a movie set. But it’s more than that: meant to answer questions. So we designed wireframes on the paper (low-fidelity, a rudimentary working model of our website). “Believe that it can be done”, our teacher Hugo said. Yes, it does!
3. Test
Testing is a way of research! We are always researching along the process because it’s not a waterfall.
Test Prototyping
The simplest way to test if a product will solve a problem is to watch users using it. Finally, we have something to work with! Where they decide to click, what they asked, how they interacted with the concept, inputs, doubts… For example, we tried to call “my cart” as “my luggage” to relate the purchasing to a travel experience but one of the users didn’t realize that it was referred to shopping (he thought we were trying to sell him a travel service!). We realize that we should consider put aside a cool idea to be intuitive and clear for any type of user.
Prototyping — Mid-Fidelity
Last but not least, we had to design mid-fidelity wireframes — structured versions of our previous sketches.
Based on the User Persona, we had the following task:
Marta Araújo
45 years old
The Pro-Traveller
She wants to buy a guidebook to her next vacation trip to Tanzania
And… TCHARAN! Here I share the design of the landing page tested and retested and presented.
The main lesson learned here: all the decisions that you take is part of the process. Design is a process and without strategy is not design. It helps us find the path to pursue a solution to a problem. The second one: make it easy! If an MVP is required, try to make it as easy as possible.
A huge THANK YOU to my team Ines Almeida, Savoya Emilie, and Frederico Villaret to make it happen together :)
