Cositas Cafe
At-a-Glance
Cositas Café is a family-owned Colombian coffee shop dedicated to creating a welcoming atmosphere for everyone in the neighborhood. With a focus on their "family first" motto, they offer delicious Latin-brewed coffee and tasty treats, making it a go-to spot for locals. Since opening less than two years ago, they have primarily concentrated on building their social media presence and have not prioritized their online footprint beyond just a landing page to boost brand awareness and engagement.
Problem
Due to time constraints and a lack of content/pages, they have experienced low brand awareness and website traffic.
While maintaining brand consistency, responsiveness, and accessibility, we will address the lack of informational content throughout the page to increase customer retention and overall engagement.
To begin the assessment of the original site, we performed a website audit of the landing page through a mobile screen to test the current responsiveness of the page.
Solution
After collaborating with Cositas Cafe's clients and marketing team, we developed a clear vision for their website. The solution is a modern, welcoming design that effectively narrates the cafe's story, evoking emotions of nostalgia and home-cooked Colombian cuisine. By incorporating retro elements and warm, inviting visuals, we created a user-friendly interface that not only showcases their unique family-first approach but also enables direct online ordering. This strategic design decision opens up a new revenue stream beyond their physical storefront, enhancing customer engagement and boosting sales potential.
Process
I used various methods, including user interviews, competitive analysis, empathy mapping, and user persona development. Our persona, is a transplant from a Spanish-speaking country and misses her cultural community treats while she transitions to her new environment. Working long hours, she isnt able to physically visit storefronts and benefits from making online purchases through her early-generation iPhone.
User Research
I used various methods, including user interviews, competitive analysis, empathy mapping, and user persona development. Our persona, is a transplant from a Spanish-speaking country and misses her cultural community treats while she transitions to her new environment. Working long hours, she isnt able to physically visit storefronts and benefits from making online purchases through her early generation iPhone.
Diving Deeper: User Interviews
After analyzing the screening results I wanted to gain insight on how to improve accessible features into the Hinge mobile dating app. After networking throughout several platforms I was able to interview three new participants who were advocates themselves of the dating disabled community.
This exercise helped me realize that the problems are deeper than visual accessibility but rather the lack of including those in the disabled community from the start, during research and ideation.
The general assumption amongst the majority of apps and websites that order to create accessible solutions by manipulating the contrast, color blindness and text size is the extent of inclusive design.
👉🏽 Turns out Accessibility Design and Inclusive Design are two different things.
I also created an empathy app to better illustrate the emotions and needs of my users below 👇
Wireframes - Mid to High Fidelity
The process below begins with mid-fidelity wireframes to match Hinge’s brand library as closely as possible. I returned it to my mentor for further iteration before moving forward to the high-fidelity mockups.
Below you will see the high fidelity mockups prior to usability testing. I built a homepage, match message screen and message screen in Flow 1. Following this in Flow 2, we see a match home screen and mock screens for opening the camera and recording a message.
Testing
The goal of our research was to determine whether users can accomplish two accessibility focused task flows. We tested 13 participants, including 3 of the original users we interviewed within our study.
Success Metrics
Completion of tasks - 80%/100%
The usability flow of accessibility features - 7/10
Severity and frequency of errors (via misclick rate/avg. duration) - 30%/100%
In our initial flow, we discovered performance gaps in the completion of tasks - falling 10% short of our target and experiencing a 20% higher error rate than anticipated.
By conducting a comprehensive analysis of heatmaps and participant feedback, we uncovered key usability challenges, specifically around icon clarity and message transmission. These insights directly informed our next design iterations, enabling us to address these user experience barriers.
Major Design Iterations 🔁
I made two significant changes based on feedback from usability testing sessions. I carefully considered participants' comments and suggestions, working diligently to incorporate them for the best user experience. My goal was to ensure that each iteration was thoroughly reassessed for accessibility issues, making the designs not only efficient to use but also enjoyable to interact with.
I decided to include an accessibility toggle in the message page after some of the gathered feedback. Several participants noted on the benefits of having a more obvious icon of some sort could help users with low vision in navigating and recording voice notes.
Another consistent feedback with the second flow was the differences in interaface with the first flow since both were a way to message, it made sense to avoid any confusion within the visual flow but rather bridge the two features into one. I kept similar interface and added a video message icon as well to merge the flows.
Final Design
What I Learned 🌱
My experience designing this new feature taught me valuable lessons:
Research is crucial: The initial research stage sets the foundation for the entire design process, guiding our decisions and outcomes.
Diversity within disabilities: I discovered that even individuals with the same disability often have unique needs, highlighting the importance of building genuine relationships with those you are designing for.
Adapting to challenges: While I couldn't test exclusively with low-vision users as planned, I learned to be flexible and work with available resources.
Building connections: Moving forward, I'm committed to continuing to develop stronger relationships within the disabled community through meetups, classes, and social media engagement.