La Parenthèse - A responsive website design
Context: Ironhack UX/UI Bootcamp
Timeline: 8 days
Team: Anju Chaudhary, Hugo Moissinac, Javier Quiroga
Tools: Figma, Figjam, Google Suite, Procreate
brief
This is our second project in the Ironhack UX/UI Design bootcamp. The goal is to design an e-commerce responsive website for an existing business.
client
La Parenthèse is a local independent bookstore located in a rural area of France, in a town of 4.000 people. It’s been open for 30 years and it’s entirely ran by two people.
the team
Anju Chaudhary, Hugo Moissinac, and myself.
We are millennials. We have grown up with a PC mouse in our hands, we have witnessed the birth of Amazon, and we swear by our Netflix subscriptions. But we have also grown up going to the store down the street to buy candy, we love the smell of a book, and the feeling of an old cinema seat. So our challenge lies here: how to help this local bookstore that is being eaten by the big A.
stakeholder
We start our journey by learning more about La Parenthèse. They have a website, but the design is very old, they barely update the content, and they don’t sell online. So there is definitely room for imporvement.
We get ahold of Cécile, one of the two owners of the bookstore, and we interview her for around 40 minutes. Everything starts making sense. We understand why the website looks the way it does, and we get why their customers keep coming back.
They started their website as a way to showcase the new books they got, and advertise more rural content, but it is difficult for them to keep it updated, having only two people running the place.
They know Amazon is a big threat, they can see their average customer getting older and they can’t compete with the ease in which people can order books online at any time of day. On the other hand, people keep coming back for the treatment they get. They are loyal and they know they can get personalised recommendations.
“I want the customers to feel that they can rely on us to find quality literature, and to get valuable recommendations from us.”
The younger customers that they get, however, are clearly aware of the situation and want to support local businesses.
“We start having more loyal customers that are younguer and sensitive to local businesses. They buy with us rather than on Amazon. People want to buy locally, from independent sellers, people are aware of this.”
It becomes clear where our challenge lies, we need to create an e-commerce website that stays true to their values and gives the same feeling as a local store where they know you and you can get personalised treatment.
users
With all of this in mind, we narrow down our choice of user interviews. 25 to 35 year olds who enjoy reading and like to support local businesses.
interviews
We get the impression that our users feel remorse when they purchase form big sellers online, but they do it regardless because “they don’t have a choice” due to time and location constraints.
“It’s paradoxical, I like supporting local businesses, but I have a Kindle and it’s practical, so I end up buying on Amazon.”
But we also get some insight into the reasons why they enjoy physical bookstores, which align with what Cécile is proud of.
“I enjoy local bookstores because I trust the staff, like let’s see what the staff is recommending. I like knowing the people that work there.”
affinity diagram
We create an affinity diagram with quotes and ideas that we extract from the interview, we organise them in different clusters by topic, and we vote on the most relevant ones.
user persona
Based on the testimonials of our interviewees we create our primary user persona, Bookworm Betty. Betty is a 30 year old Product Engineer who lives in Paris for work, but comes from a small town in France.
user journey map
Her endless daily commutes are only made bearable by her love for reading. She can devour half a dozen books every month while going to and from work, and nothing brings her more joy than spending hours roaming around a bookstore. However, with her busy schedule, this is not something that she gets to do often, so most of the time she ends up ordering from big stores online.
problem
After diving into Betty’s world we write our problem statement:
Young readers need to find a way to easily purchase from a local bookstore because they want to have a quick and easy experience while supporting local businesses.
An online bookstore is nothing new, so our challenge is to make it feel local and personal.
Ideation
We think of features for the website and we prioritise them using the MOSCOW method (Must have, Should have, Could have, and Won’t have).
Some features are obvious: delivery and click & collect options, best sellers section, a user account…
And some features not so much: A blog featuring the staff’s picks, curated lists on different topics, and a large “about us” section where it is made clear that this is not only an online business.
We now define our MVP (Minimum Viable Product)
La Parenthese website allows you to purchase books for both delivery and click&collect while maintaining the spirit of a local bookstore, with handcrafted blog posts with recommendations from the staff.
information architecture
Once we have this, we work on the Information Architecture of our website: a sitemap with how everything will be organised, and a happy path for Betty to satisfy her needs.
wireframing
Now that everything starts taking shape, we begin by creating a low fidelity prototype. We do this to focus on the concept, the placing of the elements, and the wording, rather than the style and visual design.
low-fidelity wireframes
We do some concept testing and incorporate the feedback when creating our mid fidelity, which we put to the test with some usability testing. We note that some of our wording isn’t always clear when referring to the different sections on the page and some elements of the design should be made to stand out more.
mid-fidelity wireframes
visuals
Now that we have the skeleton of our page ready, it is time for us to start thinking of visual design.
visual competitive analysis
We begin by having a look at what the competitors are doing. We quickly notice that even though all de designs are very neat, they are cold and impersonal, and it is obvious that they’re huge companies.
What we want to transmit to our users is quite the oposite. We want to make it clear that it’s a small business, to give them the same feeling they would get when going to their local store.
brand attributes and mood-board
We choose some brand attributes and put together a mood-board. After testing it, we realise that neither is fully working and not completely what we really want to go for. So we try again, we choose different attributes and we update the mood-board:
colours
From the mood-board we extract our colour palette:
We choose two tones of the same hue of turquoise as our primary colours. Turquoise is often associated with calmness, friendship, and loyalty, which are all values that we want associated with the brand.
We take it’s complementary as our accent colour: a peachy orange that creates some sparks of joy and playfulness, and balance the softness of the primaries.
We want to diverge from the competitors by having a warmer background than the white they were all using, so we go for two different tones of beige that we can use to separate sections and make the design more dynamic and three-dimensional.
typography
When it’s time to choose the typography, we know that we want a serif for our title font (duh!).
We decide on Baskerville for our logo and main headings. Baskerville was created during the industrial revolution and it’s a bridge between the old-style serifs and the new ones.
For our smaller headings and body, we find that Source Sans Pro pairs really well with our title font. On top of that, we discover that it is largely inspired by the Franklin Gothic typefaces, which we have often seen in newspapers and books.
style tile
We put all of this together in context by creating a style tile, in which we include some buttons, shadows, and icons.
high-fidelity prototype
And without further ado, here is our high fidelity prototype.
Desktop version
Tablet version
Mobile version
desirability test
We performed some desirability testing with our design, in which we showed it to multiple users and asked them to choose five words from a list with a mix of positives and negatives. We also asked them to compare our design to our competitor’s.
what’s next
The next logical step would be to continue designing pages for the website. We have created a happy path and the minimum product to satisfy Betty’s needs, but we still have some features from our ‘Should have’ list that we could implement to satisfy a larger audience.
We’d love to share the design with Cécile and her business partner, get their feedback and work with them to better it.
And finally, we’d need to collaborate with a developer to bring our design to life into an actual website, working out all the “behind the design” aspects to make it both usable, and easy for the stakeholders to manage.
retrospective
This was another good lesson on team work. I had already worked with Hugo, but this time he truly shined in the visual aspect. I know I have a good eye for the details, but sometimes I can’t see the forrest for the trees, and Hugo always sees the design as a whole and taught me to step back and see the ensemble.
On the other hand, Anju taught me to be loyal to the process. With a background in hospitality management where things can quickly get ugly and stressful, I’m always trying to make lighthearted jokes, make the process enjoyable for everyone, and improvise as I go. Anju, however, always stays calm but follows the script. If there is a step we have to go through, wewill go through it. Which, in the end, made our final result so much better.