top of page
GUIOT
UX RESEARCH | RESPONSIVE DESIGN | FRONT END | BACK END
A responsive website for a bakery, that serves as selling point to enhace the current ordering process for both clients & administration.
The bakery business is important as well as more complex than people usually imagine. With a distinctive business model, the primary challenge of this project was to assist Guiot's administration with a platform that could streamline their ordering process while showcasing the wide range of breads available.
The project entailed developing both the front-end UI for clients and the back-end UI for Guiot's staff, resulting in a seamless ordering and administrative process.
Creating this project was special to me as it began unexpectedly when I was asked by the manager at Guiot to cover for his assistant for two days as a favor. Of course, I said yes, and oh well… it was hell!
It turns out I was asked to cover the position responsible for the ordering and delivery process. Little did I know that their process was chaotic and left room for human error, making this role challenging and far more exhausting than anticipated.
I started getting ideas on how to help the administration and operations departments, it was quite inspiring. A couple of weeks later, I asked Ricardo, the owner, if my friend Kaja Parchanska and I could help them upgrade their ordering and administration processes through a UX UI approach, and he said yes!
Currently and by accident, although now well thought out, Ricardo created a business model that is unique compared to his local competition. However important any client is to a business, Guiot is aware that his main business comes from selling to restaurants (the 100+ clients Ricardo kept). As money is running low from having to start all over, Guiot doesn´t have a selling point, and that is what makes them so different.
Based in Xalapa, Veracruz, a small city in Mexico, Guiot is a french bakery founded by Ricardo Guiot, a chef obsessed with his Mexican-French roots and bread. Two years ago his investor broke their association on terrible terms leaving him with no tangible business, he did, however, keep his 100+ clients around the city allowing him to rebuild his bakery now called GUIOT.
The Client
BUSINESS MODEL
Former ordering & delivery process
CLIENTS PLACING ORDERS
As of today, any client, whether restaurants or individuals, places their orders in advance through WhatsApp. Each client has until 12 am to send their orders for the following day.
From the client's perspective, the process is straightforward. However, how does Guiot handle the incoming orders?
Throughout the day, the manager's assistant sends each order to a WhatsApp group until her shift ends. At 4 am, when the main chef baker (Ricardo) and his team begin making the bread, Ricardo sends any orders that came in after the manager's assistant's shift ended to the group. This WhatsApp group allows him to view every order and the quantity he needs to prepare in one chat.
If this doesn't sound messy enough, different restaurants have been charged different prices for the same bread over time. To assist with bill writing, the manager's assistant maintains an Excel sheet with access to every price variation.
DELIVERY OPTIONS
Not only is this process confusing, but the administration is also partly manual. The manager's assistant manually creates each bill by copying information from the WhatsApp group.
MANUAL ADMINISTRATION
Unfortunately, sometimes the orders are sent without specifying the restaurant or client's name, requiring them to go back and review every chat to determine who ordered what.
Regarding delivery, there are three options: clients can pick up their orders when they are ready, have them delivered by motorcycle or taxi, or utilize Guiot's own delivery service, although exact time delivery cannot be guaranteed.
Challenge
Develop an automated platform that streamlines the order processing system, helping Guiot's administration and allowing users to explore and discover their wide range of delicious products.
Device
Due to budget constraints, it was evident that developing a responsive website rather than an app would be the most suitable approach. We carefully considered user behavior on various devices such as mobile, tablet, and desktop for both clients and Guiot.
Research
STAKEHOLDER INTERVIEW & AFFINITY MAP
We had insights into the problem but we knew it was important to talk to the stakeholder to know his perspective and opinions. Alongside the owner, we talked to the manager. They both saw eye to eye with every question we asked in the interview.
To get a clearer view and summary of our findings we then moved on to creating an affinity map.
The most important findings were:
Reiteration of the ordering process´s problem for Guiot.
They want to keep on being perceived by their clients as warm and familiar however it was important to be known as a French bakery.
They differentiate from the competition by using better quality products, having a restaurant base clientele, and not having a selling point (store).
Alongside their values, we learned they are growing fast and want to expand, however, for the near future, a site would be their selling point.
Guiot prefers to receive payments by cash rather than transfers or deposits.
CLIENT´S SURVEY & AFFINITY MAP
Having a broader perspective we then created surveys for individuals as well as restaurants. We aimed to understand how they felt about Guiot´s current service, their perception of the brand, their pain points, and any other important opinion that could come up.
Once we had reviewed all the information we organized it through an affinity map.
Clients think that:
Ordering process can be messy sometimes due to time limits and forgetting to send the orders.
ORDERING PROCESS
Most clients percieve Guiot as warm & friendly however they don´t associate Guiot as a french bakery
BRAND PERCEPTION
Most clients would like a catalogue or menu to know the whole product range. They only know what they buy. Clients did make it clear they would like to know what else is out there.
OTHER FINDINGS
Most clients prefer payment by cash, however a little few like payment by transfer.
PAYMENT
CONTACT
Clients said even though they would like a site to place orders and get to know the products they would still like to have a personal trait through WhatsApp and feel that talking to the Guiot administration is accessible.
COMPETITORS ANALYSIS & SWOT ANALYSIS
After gaining valuable insights from both the stakeholders and clients, we proceeded with conducting a competitor analysis to effectively position Guiot and identify its strengths and weaknesses. Subsequently, we transitioned to creating a SWOT analysis, aiming to visually map Guiot's areas for improvement and potential opportunities. It was essential for us to ensure that our efforts complemented the existing commendable work done by Guiot.
Clients think that:
// Good quality ingredients
// A broad customer range.
// Unique business model.
// Strong reputation.
// Customatization of products for restaurants.
// Strong branding.
// Personal treat.
// Close relationship with clients.
STRENGTH
// Poor organization
//Timing
// The way customers currently place orders can be confusing sometimes.
// Administration regarding orders is analogous.
// Poor efficiency and extra hard work for the employee in charge of orders and delivery.
// Lack of selling point
WEAKNESSES
// Product expansion
// Diet trends - open to work on any demand
// New ordering process system
// Visibility online to increase the target market
// Social media and marketing efforts.
// Have a selling point.
// Focus more on “warm” branding for a familiar environment
OPPORTUNITIES
// Tiring the customer due to poor organization in delivery.
// Consecuences of a weak internal administration regarding the ordering process.
// Taxes and how it affects the payment process.
// Inflation - raising product prices.
// Competition offering similar products
THREATS
HOW MIGHT WE
“How might we automatize Guiot´s ordering process to ease its administraton and enhance user experience by providing an easier way to order, with all the right feautures, while mantaining personal treat and a warm atmosphere?”
EMPATHY MAPS
We created empathy maps for our two users: Clients & Guiot´s personnel.
Through the Clients´ empathy map, we were able to target and point out their pains and gains, mainly the ones we discovered with the survey.
PROBLEM & HYPOTHESIS STATEMENT
User Needs:
We have observed that Guiot´s clients, both restaurant owners and individuals don’t feel fully satisfied with their shopping experience. They need a platform where they can easily place their order as well as being able to see the whole catalogue range with product description and prices.
Business Needs:
Guiot struggles with a chaotic ordering process. Their process is analogous which leaves room for human error and confusion. They need a platform that can meet their needs regarding how to manage orders, create consumer awareness of their products, promote their branding and values and increase visibility online.
Goal:
A new website that will automatize Guiot´s ordering process to ease its administraton and enhance user experience by providing an easier way to order, with all the right feautures, while mantaining personal treat and a warm atmosphere.
HYPOTHESIS STATEMENT
“We believe that by creating a responsive website we will improve Guiot’s ordering process as well as their overall user perception by providing the client with features that will enhance their experience.
We will know we are right when Guiot´s management feels their working process is smoother and more organized with an evident increase of client´s satisfaction and sales”.
Ideation
PERSONAS & USER JOURNEY MAP
Now that everything was set and understood we decided to start the ideation process by creating user personas and their journey maps.
These personas represent a client and the manager's assistant. The journey maps created specific scenarios where every pain point is encountered showing how they affect the user.
These journey maps detected the exact pain points and moments with room for opportunity. Each bad moment helped us create a feature for better solutions.
CLIENT
Rodrigo Fernandez
Manager at NUBE | 34 Years Old
Rodrigo is a 34 year old restaurant administrator who´s goal is to lead a prime business with all details well thought out and met needs to provide an excelent user experience.
He is currently working with Guiot as they provide all the bread sold at Nube. He is happy with the personal treat and closeness however due to too much work, he sometimes doesn´t meet the deadline to place orders.
“I like having everything under control, especially when talking about my work.”
“I would like to enhace and optimize user experience at Nube as well as ease the process for my co-workers.”
Rodrigo´s Journey Map
// Due to excess of work Rodrigo often forgets to place the orders on time.
// Delayed orders affect the restaurant service and generate an extra cost. Rodrigo sometimes ends up picking up the orders to avoid the deficiencies in menu.
// There’s very stressful atmosphere at the Restaurant which affect both the employers and the customers.
// Rodrigo doesn’t have enough time to spend with his family and friends.
// Sometimes clients ask basic information about the bread (vegan, veg., meat) and he doesn´t know exactly.
FRUSTRATIONS
// Satisfied customers & great customer service
// Provide always fresh and good quality product for the customers
// Information on product range to be able to see and learn about all the possible options
// Being able to customize the product
NEEDS
MANAGER´S ASSISTANT
Frida Olivas
Manager Assistant at Guiot | 25 Years Old
Frida is the current managing assitant at Guiot. Her work requires her to recieve orders through whatsapp, pass on the order information to bakers and manage the delivery and pick up service. This process is chaotic as more than 25 restaurants a day place their order, leaving her with an overwhelming amount of text messages that are hard to handle. She would like to find a way to make her work be seamless and more fluid with less stress and error.
“I consider myslef workaholic. I love my job but I need to feel I have things under control.”
“I think that good organization and previous planification is essentia at work.”
Frida´s Journey Map
// Dute to chaotic organization she has a hard time administrating orders and passing them to the bakers
// The amount of open chats with clients makes her feel overmeld and stressed
// She¨s frustrated about having to deal with frequent delayed orders
// Frida feels that daily stressed is affecting her productivity and health
// She feels that Guiot could work so much better if the organization would improve
FRUSTRATIONS
// Frida needs a way to see administrative information organized and clasified.
// Having access to records, total daily orders and clients catalogue
// Enjoying her work, feeling satisfied and self-sufficient
// Separate her private life from profesional (being able to turn off her phone once she finishes her work)
NEEDS
MOSCOW METHOD
Thanks to the previous exercise we were able to create a Moscow method where we organized and pointed out every feature necessary to meet our user's needs.
SITE MAPS SPECIFYING FEATURES
Having pointed out the necessary features we created site maps of the front and back end. It was clear we needed to design what the clients are going to see (front end) and what Guiot is going to see (back end). Our sitemaps specified where every feature would go and how it would be organized.
WHAT CLIENTS SEE
FRONT END
FEATURE MAP
BACK END
FEATURE MAP
WHAT GUIOT´S TEAM SEES
USER FLOWS
With the help of the sitemaps to understand how our site would be distributed we created user flows that would show the routes, people would need to take to get to their goal.
For clients, the flow showed how they would navigate through their account, the menu, and the shopping and payment process.
For Guiot´s team, we created two flows: one for the manager assistant and her new process of seeing orders and downloading the bills if necessary, and the second one showing the route the chef baker would need to take to see the orders and amounts to make the bread.
FRONT END
USER FLOW
RODRIGO FERNÁNDEZ
BACK END
USER FLOWS
FRIDA OLIVAS ( MANAGER ASSISTANT)
RICARDO GUIT (MASTER BAKER / OWNER)
Design
MOOD BOARD
For the final stage, we started by creating a moodboard that would help us visually represent the brand.
Guiot has a very strong branding created by the infamous studio. We respected the branding while also adding certain elements that would give the site a french-artisanal vibe. We understood that not many clients thought of Guiot as a french bakery and we wanted to take care of that.
LOW-FI & MID-FI
After creating our mood board, we proceeded to ideate the layout of our website by creating a low-fidelity wireframe.
Following an in-depth analysis of numerous ideas, we ultimately settled on the concept that showcased enhanced usability and captivating visual appeal.
We then, developed a mid-fidelity representation that provided us with a comprehensive view of our final design while also allowing space for improvements.
FRONT END
BACK END
STYLE TILE & DESIGN SYSTEM
After having our mid-fi it was easy to spot what components needed to be created to ease our process of creating the high fi. With our style guide and design system, Kaja and I were able to keep a harmonious and consistent design.
STYLE TILE
DESIGN SYSTEM
Hi-Fi
The journey to crafting the high-fi was easy thanks to the well-designed components. Once our desktop layout was done, shifting to mobile and tablet formats was a smooth process.
DESKTOP
FRONT END
The front-end design caters to clients, serving as their primary means of interaction with the bakery. Through the website, they can conveniently shop using their accounts, select their preferred delivery service and payment method, maintain a purchase history, and explore the entire product catalog.
BACK END
The backend system is designed to facilitate Guiot's staff in efficiently managing all orders. From the main page, the administration department can access a comprehensive overview of all orders, records, pricing information, including special pricing, and client accounts. Additionally, the main page provides the master baker and all other bakers with access to vital order-related information. This access enables them to view orders categorized by restaurants and the quantities of bread they need to prepare each day. This feature streamlines their production process by ensuring they are well-informed about the bread styles they need to create, irrespective of the client. Once the bread is prepared and packaged, the system allows them to access each client's receipt, providing precise instructions on the items to be packed and for whom.
TABLET
MOBILE
Conclusion
This project was not just about creating a solution—it was a journey of discovery. What started as a favor quickly turned into an opportunity to revolutionize an outdated system and make a real impact on Guiot's operations. Through hands-on experience, I uncovered the complexities of their ordering and delivery process, and I knew a better approach was possible. Collaborating with Kaja Parchanska, we transformed chaos into clarity, designing a platform that streamlined operations and added value to both the staff and customers. It was a challenging yet rewarding project that showcased the power of thoughtful design in solving real-world problems. In the end, this project reinforced my belief in the value of understanding, creating, and making processes not just functional, but captivating.
bottom of page