Local E-Commerce — Irish Beer Pub in Paris
2nd Case Study at Ironhack’s UX/UI Design Bootcamp
Three weeks have already passed in Ironhack’s — Paris bootcamp UX/UI Design, and the last two weeks, the team, which I was assigned to has been working very hard on the local e-commerce challenge. Now, the time has come to present my 2nd case study. See my previous case study here.
But before I do, let me introduce you to my super fun & talented team (Mathieu Mura, Naomi Victor, Luc A., and Hanane A.) without whom this challenge would’t be as wonderful as it was!
Ironhack’s second challenge, Local E-Commerce, focuses on businesses, which are suffering a decrease in demand of their services or products due to ongoing Covid-19 pandemic. Enhanced online presence, in most cases, is a good remedy to turn things around. Why? Because it increases competitiveness of these businesses in the actual market. And better competitiveness gives better chance of survival.
The goal of this project was to create a Website designed for the desktop. And as a bonus, we were asked to create a mobile version of the design just to show our awareness of the responsive web design (RWD). But again, this was simply a side project and not part of the main goal.
In regards to the project Scope, we’ve followed the 5-step design thinking approach (Empathize, Define, Ideate, Prototype, and Test) like we did in the previous challenge but this time, we’ve added additional elements to it: Business Analysis & Hi-fidelity prototype.
The first thing we had to do as a team was to decide which local business we’ll try to help. First, different ideas were presented, then we voted on the best one. Finally, we decided to help a local Irish rock pub — La Taverne des Corrigans.
Personally, it was an exciting project to work on, and although it has been a long time since I went to a beer pub (not so easy to do for a parent with two young kids), I do like beer, I admit. I’m not a connoisseur by any means but in my younger years I’ve always liked to experience new flavors and to support local artisanal producers. It was fun! This project allowed me to reimagine those days, or at least, gave me an imaginary glimpse into the past. That was fun too!
We were almost ready to begin but first, as with any project, we had to employ a technique to effectively manage it. In other words, we had to use a process that would allow us to complete all project goals within the given constraints. Welcome to Project Management. In terms of our approach, we were asked to follow Agile methodology, which is basically a new philosophy for managing teams and projects. Unlike the traditional philosophies, like the Waterfall Model or traditional sequential development, Agile helps teams respond to unpredictability through incremental, iterative work cycles known as sprints. It allows teams to build products incrementally from the start, instead of trying to deliver them all at once near the end of the project, as you do with traditional methods.
During class lectures, we were introduced to two different agile workflow management methods: Scrum and Kanban. We were free to choose one or the other. These two methods work differently but both help teams to be more productive, allow for greater team collaboration, and help to achieve quicker product delivery. Scrum is a framework that was designed to facilitate complex projects. Teams work within time-boxed sprints, where the goal is to build functional deliverables that provide value to stakeholders at the end of each sprint. Kanban framework, on the other hand, helps teams deliver work by visualizing goals, tasks, and progress to help maximize efficiency. It works better with small-scale, simple projects. All you need is a whiteboard, post-its, and some markers. But since we were all working in a virtual space, we didn’t even need that! All we needed was Figma. So, our choice was simple : Kanban.
The idea of a Kanban Board is very simple : work items are represented visually on a board allowing team members to see the state of any piece of work at any time. And although our team has created one, it wasn’t really helpful to us. Why? Because we had so much to learn during the class, so many things to do for this project, and so little time to do it, all we really worried about was to finish it on time. Yes, it was chaotic, at certain times overwhelming but we somehow managed it without constantly relying on the Kanban board. We all knew what we had to do. This is, of course, not the way we should do things at work when working on a project, but again, Ironhack’s bootcamp is not a normal time, we are still learning. And to master all these tools it takes a lot of practice. Something we are just beginning to do.
Business & Competitive Analysis
After completing all the pre-requisites, it was time to begin our research phase of the project. First, we needed to find out about the business by examining its needs and goals. And to understand the business, we needed to conduct stakeholder interviews. The information we would learn would help us create solutions that will deliver value to stakeholders. Usually, it’s better to involve as many stakeholders as possible to ensure project’s success but we only had half a day to do it all: contact stakeholders, arrange meetings, and conduct interviews. Time was not our best friend! Thankfully, one of our teammates knew well the owner and the pub’s manager, and was able to arrange a meeting on a short notice. The interviews were conducted in French, as the stakeholders didn’t speak english, so unfortunately, I wasn’t very helpful here. Although I do speak French, I’m not fluent enough to feel comfortable conducting interviews in French. Luckily, all my teammates were French, so no problem there.
Stakeholder interviews were very insightful. We’ve learned a lot about the business : its goals, users, culture, problems, and its current and future market positioning. This information helped us further analyze the business and identify opportunities and threats. Then, we compared this information with its direct competitors to have a better picture of the current marketplace. We’ve identified four local competitors to La Taverne des Corrigans. To help us visualize all our findings and to pinpoint the pub’s strengths, weaknesses, opportunities, and threats we’ve used different tools.
First, a Feature Comparison Chart helped us visualize how competitors implement specific features. It also helped us identify what currently worked in the marketplace and what didn’t, f.e. features like, online menu, booking, and pictures gallery were all important to users.
Then, Brand Comparison Chart allowed us to visualize how the different brands compare among each other in terms of their value proposition, target audience, brand personality, etc. Since La Taverne des Corrigans brand didn’t already have a website, only a Facebook fanpage, we knew we’ll have to build one from scratch.
Finally, Market Positioning Map allowed us to identify and visualize where the Irish rock pub currently lies in the marketplace versus were would it like to be. This map also identifies gaps in the market that brands can take advantage of and turn them into opportunities. From stakeholder interviews, we knew that the pub would like to shift its current position from a traditional to a more modern brand while still maintain its counterculture attitude. This was very important for us to consider when building their website.
User Research
After we’ve learned all we could about the business, we needed to get some insights into what users think about Irish rock pubs, or in general, bars in Paris. We needed to conduct at least five User Interviews. Why? They can provide insights into user habits and behaviors, as well as point out what content should be included on our website. This portion of user research was much simpler than stakeholder interviews because we were allowed to interview our classmates. Considering our strict time constraints, they could be easily reached and meetings easily arranged, and of course, they all spoke english, so it was a big plus for me too. And, who doesn’t go to a bar ? (well, maybe except me). So, there was no problem trying to find bar-going classmates! Below are some quotes from the interviews.
The next step was to transfer all the data (suggestions & ideas) from our User Interviews onto post-it notes and arrange them into similar groups/categories. With this bottom-up approach, we were building an Affinity Diagram.
Then, we voted on the best ideas, and based on these winners, we’ve written the How Might We Statements, which simply turn insights into opportunities. Then, we voted again.
Finally, we ended up with three How Might We statement winners, which can translate directly into actionable design solutions.
But before we could move into sketching and prototyping, there were still a few things to be done. After we’ve learned about our users and identified their needs, we needed to create a User Persona, which will guide us throughout the entire design process.
The next thing, naturally, was to create a User Journey Map. For our fictional user persona, Chris Rock, we wanted to visualize his user experience over a brief period of time, 10 minutes only. The journey began when Chris decided he wants to go out to a bar with his friends, and ended after the decision was made which bar he will go to. Throughout that journey, we’ve mapped out different opportunities that we could pursue when building our client’s website.
After User Persona and User Journey Map, we were now ready to write a Problem Statement, which would help us define project’s main objective. A problem statement serves as a clear description of what our team would have to address in order to solve our user’s problem.
Based on our written Problem Statement, it was now time to make an assumption. A Hypothesis Statement is a prediction that can be tested since we believe that it will actually happen.
Next, came the MoSCoW method, which is a technique to manage priorities and to understand the importance of work to be done in order to make progress and to remain on schedule.
Information Architecture
We had reached the next phase of our design. Information Architecture allows us to organize and structure content on the website. By organizing information, users would easily be able to navigate the website and find everything they need without a big effort. First, we needed to create a Sitemap, the blueprint of our website. Sitemap is a way to show relationships between different pages on a site.
Then, came the User Flow. It shows a path, or paths, a user takes to complete a task. In the case of our user, Chris Rock, we chose to show a path he takes to make a booking reservation. We could have chosen any other path but we’ve decided to make ‘booking a table’ as a primary focal point of our web design.
Wireframing & Prototyping
Now, we needed to create low-fidelity sketches for both our homepage as well as the user flow (making a reservation). Same as on the previous project, each team member had 5 minutes to make his/her own design, and then share it with the team. Finally, we chose the best designs by dot voting.
Below is the winning design for our homepage and for booking a table.
After we’ve chosen our winning sketches, we needed to create a more realistic and accurate depiction of our design — Mid-fidelity wireframes. These wireframes are meant to be semi-functional without any design esthetics, color, typography, or graphic elements. Nonetheless, these wireframes contain most necessary elements of the website and closely resemble a final product. Below are the mid-fi wireframes of our client’s homepage, plus the reservation page.
After we’ve completed mid-fi wireframes, it was time to test it. Usability testing is a method to test the functionality of a website (in our case, the mi-fi wireframes) by observing behaviors and reactions of real users as they attempt to complete various tasks. The main goal of this testing is to discover problems and areas of confusion in order to improve the overall user experience. Note: the above mid-fidelity wireframe screens already contain changes that we’ve made following our usability testing.
Below is the primary feedback we’ve collected during the testing.
And a few takeaways from the testing:
Visual Design
The next step in designing our client’s brand was to understand the competitive environment of its product and how to position it within that space. Creating a Visual Competitive Analysis was important because it allowed us to identify current market trends within the competitive landscape as well as to get a feel of customer expectations.
Next, we had to establish the personality of our client’s beer pub, its products, and services. But first, we needed to define Brand Attributes, which would allow us to shape our client’s brand. These attributes, in turn, would create guidelines for both internal and external communications. What we did was to analyze the logo as well as its primary colors (black & white). Then, we analyzed everything else that we’ve learned about the company through stakeholder interviews and analysis. Finally, we’ve came up with the following five attributes:
Based on these attributes, we were now ready to create a Moodboard, which is an arrangement of images, materials, and pieces of text intended to evoke a particular style or concept. Moodboards are an inspiration, a visual foundation on which brands are built on. They capture the vision designers have for the brand and they should showcase the brand colors. Below is our first version.
We then had to conduct user testing to validate our moodboard. In other words, we had to ensure that it captures the precise emotional response that we have determined to be necessary for our brand. It was a class exercise where our classmates would assign three attributes to other team’s moodboards based on their emotional responses. If they would match our defined brand attributes then our mood board would be validated and we could move on. Unfortunately, their responses were completely different from what we wanted. Our classmates’ primary responses were: confusing, chaotic, and scary! And so, we needed to remake it. Here’s a new version:
We should have probably tested it again but unfortunately, there was no time. We had to move on!
User Interface (UI) Design
The first thing we had to do was to create a Color Palette for our brand. We would use our moodboard to create it. Each team member were asked to extract three primary and three secondary colors from the board in a 5 minute sprint. Then we dot voted.
Based on the results, we’ve created a winning color palette.
Next part was the Topography, which is the art of picking the right fonts for your brand to elicit certain emotions and convey specific messages. Text represents more than 90% of all the information on the web and it’s the most prevalent element in user interface. In other words, typography is the foundation of web experience and it’s about balance, positioning, hierarchy, and structure of your website. As before, each team member had 5 minutes to make his/her font suggestions. Then, we voted.
Then we voted again for the second round and so on until we end up with three winners: Bebas Neue, Pathway Gothic One, and Inter.
The next phase was to test the winning colors and fonts on our mid-fidelity wireframes to see if everything blends together well. If not, we would make fine-tune adjustments, which is exactly what we did with the color palette. We had also decided at that point, which colors we are going to use as neutrals and functional colors. Here’s our final color palette:
The next part of our UI Design phase was to create a Style Tile, which is a collection of visual elements (fonts, colors, and interface elements) that make up a site’s design. It communicates the essence of a visual brand and helps to create a common visual language for discussions between designers and stakeholders.
Hi-fidelity Design
We now had all the elements we needed to create a hi-fidelity design, which will closely resemble our final website project.
The last thing to do was to conduct Desirability Testing, which is a mix of qualitative and quantitative methods designer teams use to asses users’ attitudes toward aesthetics and visual appeal of the website. Visual elements can elicit a strong emotional response in users very quickly. Based on the research report by Lindegaard and his associates “Attention Web Designers: You Have 50 Milliseconds to Make a Good First Impression!”, a web design elicits an emotional response in users in about the time it takes to read a single word. So, understanding and exploiting these responses can help designers create better and more functional websites. For our desirability testing we’ve used the Microsoft Reaction Card method. The goal of this approach is to measure users’ attitudes towards the design through a controlled vocabulary test where users are given a list of vocabulary words and asked to select those that best describe the emotions that the design makes them feel. Our team conducted this test in the form of a survey using Google docs. We’ve tested 7 people. Each person was first shown the hi-fi prototype for a brief moment, then asked to complete a survey and select all the words they thought relate to the design. Below are the results:
Key Learnings & Next Steps
