Embedded Files
Study Case
By Celso Hernandez
PROJECT-OVERVIEW
PROJECT-OVERVIEW
The product:
Atelier Caffe is a family-owned chain specializing in crafting coffee recipes using a wide variety of beans, along with delicious sandwiches and pastries. The goal is to help the business optimize waiting times and expand its audience by providing a multi-language ordering platform and customer service.
Project duration:
January 2023 to June 2023 (6 months)
UNDERSTANDING THE USER
UNDERSTANDING THE USER
User research
Personas
Problem statements
User journey maps
User research: summary
I conducted research through interviews and empathy maps to enhance user interaction with the business when placing orders, streamlining the process for everyone involved. The first round of user interviews showed that many were able to access the new app features.
The initial assumptions helped me improve the use of a multilingual platform and QR scanning functionality for placing my individual orders and making payments. Additionally, I implemented an AI model as a virtual assistant to assist me further.
USER RESEARCH:
Pain Points
LANGUAGE BARRIER
01
Non-English native speaking users often face challenges with access and understanding
ACCESSIBILITY
02
Food ordering platforms lack assistive technologies
AI
03
Content-rich apps are cluttered with too many options and are also inaccessible for individuals with impairments.
UI
04
Companies that rely solely on websites miss a significant portion of their audience, as their traffic depends primarily on desktop connections.
PERSONA:Sarah Thompson
I developed a persona grounded in user research to bring our target audience to life. This fictional yet data-driven character embodies a key user segment, reflecting their demographics, goals, behaviors, pain points, and motivations. Through humanizing the research, I gained a deeper understanding of our users, allowing me to empathize with their needs, stay focused on what matters to them, and make design decisions that truly connect. This approach kept the design process user-centered, ensuring the product effectively addresses real problems for real people.
Problem statement:
Sarah is a Medical assistant
who needs an app that helps her to better manage her online takeaway orders
because her work schedule is too tight.
USER JOURNEY MAP
I created a User Journey Map with the goal of understanding how users perceive the usability of the app and identifying which aspects they find intuitive or challenging to navigate. By mapping out their interactions step-by-step, I gained valuable insights into their pain points, emotions, and moments of friction. This helped me pinpoint opportunities to improve the app’s design, making it more user-friendly and aligned with their needs and expectations. Ultimately, it allowed me to craft a smoother, more intuitive experience that enhances user satisfaction.
STARTING THE DESIGN
STARTING THE DESIGN
Paper wireframes
Digital wireframes
Low-fidelity prototype
Usability studies
PAPER WIREFRAMES
By drafting iterations of each app screen on paper, I ensured that the elements included in the digital wireframes effectively addressed user pain points. This hands-on approach allowed me to quickly experiment with layouts, prioritize user needs, and refine the design before moving to digital tools. For the home screen, this process was particularly impactful—it was during this phase that the idea of incorporating a QR code emerged. This feature not only solved a key user challenge but also added a layer of convenience and functionality to the overall experience. Iterating on paper helped me stay user-focused and creative, leading to practical and innovative solutions.
Some side notes were added to make sure the main ideas prevailed during the initial development of app.
DIGITAL WIREFRAMES
I created a collection of wireframes to highlight the interaction design and the seamless integration of functionality, which is supported by thorough research and design thinking.
My goal is to equip myself, as the end-user, with all the necessary resources within the app to ensure a smooth and seamless experience.
DIGITAL WIREFRAMES
Being design-inclusive is paramount for me to ensure the full usability experience of the app. For that reason, I’ve put all my effort into adding the new GPT-4 voice integration, as well as the cutting-edge Google login API, to enhance the overall functionality and accessibility.
LOW FIDELITY PROTOTYPE
Atelier’s Caffe Lo-Fi prototype compiles a number of frames that take me through the workflow interaction of the app.
My aim is to make the app as fluent as possible by providing a flawless and smooth user experience.
USABILITY STUDY: Findings
During the development of the app, I conducted two studies: one during the transition from the app to a digital prototype, and another during the high-definition phase. In both cases, I addressed usability issues. Below are some examples of findings that I corrected as I progressed to the advanced phases of the project.
REFINING THE DESIGN
REFINING THE DESIGN
Mockups
High-fidelity prototype
Accessibility
Mockups
In this instance of the landing page, I noticed that the app lacked visibility due to the small size of the login button and did not provide adequate assistance for the visually impaired.
I resolved these issues by implementing a visually dynamic login button and adding a widget that interacts with the new AI voice assistant to improve accessibility and usability.
Mockups
During an insight study, I observed that 40% of participants found sharing a QR code difficult. After noticing that many people skipped the QR module, I decided that adding a prompt window to remind users to share the code was the best alternative to improve the experience.
Key Mockups
ACCESIBILTY CONSIDERATIONS
LANGUAGE BARRIER
01
Implementation of the new Chat-GPT widget to assist visually and hearing impaired users in navigating each page of the app, making it easier to follow the workflow.
ACCESSIBILITY
02
Addition of the Google login add-on to make accessing the app easier for new users
AI
03
Incorporation of hint pages for users who may find navigation challenging at any point, making it easier for them to complete the ordering process.
GOING FORWARD >>>>
GOING FORWARD >>>>
Takeaways
Next steps
TAKEAWAYS
NEXT STEPS >>>>
Let’s connect!
Thank you for taking the time to review my work on Atelier’s Caffe App. If you’d like to reach out, please feel free to contact me using the information provided.
All rights reserved - www.thunderousmind.carrd.co
Page updated
Google Sites
Report abuse