Creating a small commerce website from scratch
For the next project in my UX UI design project at Ironhack my group and i were given another challenge. To find a local commerce that need to increase their presence online.
The Covid pandemic was a nightmare for many shop owners, small commerces were closed from one day to another and struggled to survive.
The pandemic showed us how vulnerable small shops are and how there is a huge need for them to start selling online.
One of my member teams knew one bookstore owner that was in this situation and we decided to create a website for their shop for this project.
Le tiers mythe
Le tiers mythe is a bookstore based in Paris founded Mr Salamatian back in the 1970’s.
It is known for it’s geopolitic books and scholar oriented books. At the moment they need to improve their online precence in order to have more sales on their shop and increase the clients.
The owner gave us some interesting information for this project:
“ We started collaborating with libraires.fr (fin 2019) and chapitres.com (2014). Problem is they do not have the same clients as we do.One only sells new books and the other sells ocasional books.”
“We have always organised Literary events and usually publish them the day after on our instagram and youtube. Since COVID, We could not organize any event and our Social media is not up to date.”
“ We would have loved to have an e-commerce website for ourselves but unfortunately we do not have the resources.”
Market research
While we started with the user interviews we worked also in the Brand comparison analysis, competitive feature analysis and the and market positioning.
This was pretty much the first step in defining some of the features we needed in our website and how we are positioned at the moment and where we want to be.
We analysed different bookstores : Gibert, Amazon, Recyclivre, Libraires independents, Unitheque and La Hune.
After doing this research we defined what opportunities we had and some of the features we were going to include in our MOSCOW feature ideation.
Interviews and affinity map research
We had the chance to interview not only the owner but some actual clients of the shop and people that are not clients of the shop as well and a writer.
This gave us some really good insight on their expectations and needs.
Some conclusions of the affinity map were the needs to find specific books in a better way, people still prefer real books than digital ones, people still like going to bookstores in order to see other things than what the algoritms can offer. They want custom recommendations from humans and some are interested in going to book related events.
Empathy map
Analyzing the empathy map was really interesting in order to create a user persona and finding the different pain points for this project.
User Persona and journey map
We had two main personas: Simon the university student and Fabienne the university professor.
I am mainly going to focus on the main persona that is Simon, the student here : He needs to find books fast and get them delivered quickly.
As you can see in this user persona he is frustrated for having to search for this books far from his home, not knowing if they are available or not at the moment he comes to the shop. He also wants to avoid buying from amazon because he prefers to support local shops.
Our user journey map shows how our user goes from needing a book to the moment he finally finds it.
Storyboard
I quickly made a storyboard using a wacom tablet and photoshop it is easier to understand than the user journey.
Problem Statement
Young Researcher needs a way to find, order and recieve a specific book because It’s hard, expensive or not friendly to find it elsewhere. We will know that we reached our goal if he buys the book and keeps coming back for other books.
Hypothesis statement
We believe by making book search easier for students will achieve help Le Tiers Mythe grow it’s business. We will know we are right when there is 10% more sales for students in the next 6 months.
Moscow feature ideation, Zoning and MVP
For this part we defined what we were going to add to the website and what priorities we had.
The goal of Le tiers mythe website, at the bare minimum, is to let readers easily find old books and limited editions and find out about recently published books on middle east and order or Buy them. the website further aims to encourage and keep human interaction between bookseller and writers, bookseller and readers and among readers .
User flow
Our user flow shows how the website should work from the moment that the person looks for a book until the moment the user actually buys the book.
Site map
Low Fi, Mid Fi and user comments
We created our Low Fi and Mid fi using figma and we had some interesting comments from some users each time in order to iterate.
Visual Feature analysis
Once we finished our mid fi prototype we started working on the visual feature analysis, comparing all visual parts from different competitors.
This is just a small part of the research done.
Brand Attributes
Our moodboard helped us decide on our brand attributes
Authentic
Knowledgable
Closeness
Closeness
Orientalism
Color palette & typography
The first version of the high fi prototype we did together had several comments concerning the layout and the fonts/colours.
This is a second version of the colour palette and fonts.
We chose Alegreya and Alegreya sans, Alegreya is only used in book titles and certain category parts while the other font is used in many other parts.
High fi
After presenting the project with the group, i decided to do a different version improved with all the different comments i got from different users so i will just show the final version of the prototype here.
Main page
As you can see in the main page there is a search, a carousel, different categories and links to my account, wishlist , events page, about and blog.
The user can select a book from the suggestions or recommendations based on what the user searched before.
The events part on the main page lets you discover a vidéo from an event/author and you have more information on the right that you can continue reading on another page.
The footer is kept simple with the logo, the most important links, social média and the possibility to join the newsletter
For this version we are going to choose the book, bottom of the pot.
Userflow has been a little bit modified on this version from the last version after users comments.
Book page
On this page we can, read a short description (and also continue reading more if we want). Read reviews (load more if we want), know if this is a new version of the book, get all details of the book, see some pages of the book and get recommendations of other books.
We click on Quick order to add quickly the book to our basket and go to directly to checkout.
Checkout page
In this page we can check all product details, prices, add a coupon, leave a note, and have in an easy clear way an order summary that will show the total price all the way during the payment process. So we proceed to check out.
Identification page
On the identification page we can either order as a guest if we don’t want to create an account, login or sign up.
Delivery page
On the delivery page we need to enter all personal information and choose a shipping method.
There are many shipping methods to choose from, you can select one by clicking on the tab and expand the different options for each. the price of the shipping will modify the total price and then we can proceed to payment.
Payment page
For the payment page, you can either choose a credit debit card and other alternative payment methods.
At the very last moment before confirming the order you have to accept terms and conditions and if you are a guest and tick the second box you can create an account on the website and get a password mailed to you (you already entered all information you needed either way).
Confirmation page
When you confirm your order you get the order reference and all the information of your order. You can also download an invoice and go back to the main page.
Prototype
You can check out the prototype here
Lessons learned on this project
This was a very interesting project because we were creating a website for a client that really exists, we only had two weeks to do this project, it was a short time.
I’m aware not all of it was perfect but i kept improving the concept after the presentation in order to show you a better prototype today. I hope you enjoyed it :)
