evening brew matches student clubs with cafes to use as event spaces based on ambiance and amenities. The platform fosters local communities by creating third spaces for students while increasing profitability for cafe owners. This project won 1st place at the FRAME designathon, hosted by UW/UX.
Roles
Design Lead
Product Designer
Team
3 product designers
Timeline
July 2024 (8 hours)
Skills
UX/UI Design
Interaction Design
User Research
01 // PROBLEM SPACE
Design Challenge
Based on the given design challenge, we narrowed down our focus to define student organizations/clubs as the community, and cafes to be the small businesses. We then refined the given problem statement:
How might we design a solution that creates third spaces for students and increases financial viability for cafes, while supporting community building both amongst students and between the greater student population and local businesses?
02 // USER RESEARCH
User Interviews
We conducted user interviews with the designathon’s event organizers to understand aspects of student and event organizer perspectives. Given time constraints, we used online research to identify cafe owners' key needs and pain points.
Competitive Analysis
We conducted competitive analysis to explore similar existing solutions’ user experiences and task flows, focusing on the event host role and the task of finding, evaluating, and booking a venue. The goal for this exercise was to identify pain points and potential solutions in the booking process specific to student needs and frustrations. Key takeaways included:
Proximity of actions to their decision-context = faster, easier task completion.
Place reservation actions in a dedicated column alongside venue details to reduce cognitive load and task abandonment. (Miller’s Law & Jakob’s Law)
Lead with key details to accelerate decision-making
Structure venue details in an inverted pyramid—present key decision-making data (images, availability, pricing) first to reduce scrolling and support users’ decision-making models.
03 // IDEATION
User Flow - Student View
Based on our user research, we decided to create a platform to build communities around spaces, by connecting students with cafes to use as event venues after typical cafe operating hours end.
Our goal for the designathon was to design a flow for a student user to browse and search potential venues, view a venue in detail, and submit a booking request. To streamline our ideation and design phases and efficiently divide tasks, I created a MVP list of features/screens and comprehensive user flow, which were discussed amongst and iterated upon by the team.
Low-Fidelity Wireframes
While we didn’t have much time to explore low-fidelity designs, these are some sketches for early visualizations of our design. We revised these designs through internal discussions as we moved into our high-fidelity wireframes while iterating upon our user flow to accelerate our design process and eliminate any hand-off time.
04 // VISUAL DESIGN
Primitives
Blue was an obvious choice for primary colours, to emulate the theme of nighttime and “burning the midnight oil”. I paired a rich ultramarine and a lighter shade of blue with a canvas-coloured beige to represent creativity, which is often a characteristic of student organizations.
For typography, we chose a blocky, sans-serif font for a mesh between modern and playful aesthetics.
Components
While our goals for the student user flow did not include many different screens, there were several specific components for key features in our solution, many of which were frequently used. I first created default states or early versions to allow my team to quickly map out our high-fidelity wireframes, then added revisions, variants, and interactions afterwards to ensure alignment on visual design decisions.
05 // FINAL DESIGNS
High-Fidelity Wireframes
Prototype
06 // REFLECTIONS
Working simultaneously in a team of designers
This was my first time working with other dedicated designers, and my first time acting as a lead designer. It was daunting to manage our overall tasks and ensure we were on track to complete the project within the deadline while working on my own tasks, but I learned a lot about the intricacies of team dynamics and how to balance personal and team priorities and desires.
My team members attributed much our success to the feasibility-focused strategy I facilitated throughout our design process. Each team member worked mostly independently on 1 screen or primary feature at a time, while maintaining alignment on the current level of detail. This allowed us to quickly prioritize which screens to design and determine the level of detail that was feasible given the remaining time, which also ensured visual design decisions were consistent across the final designs. We were able to easily decide what needed to be done or should be worked on next, and how it could be improved upon or what could be added if there was time to spare. While this strategy worked really well for an extremely time-limited event, I would likely take a different approach for a project with a need for scalability.
The importance of understanding your users
We spent a lot more time than other teams on refining our problem statement and understanding the problem space. We didn’t even start our ideating phase and low-fidelity sketches until halfway through the event. The demographics my team honed in on allowed us to leverage our own experiences and interests, and the event organizers available to us for user research. Speaking with people who fit our primary user personas helped us identify nuances in their needs, and allowed us to tailor our solution to a particular niche rather than creating something with a similar purpose and function to existing solutions. Rather than quickly coming up with an idea solely from the given design challenge, our process of defining what key components of the prompt meant led us to examine community in the context of a location. This gave our solution depth, and guided our vision of creating a solution to enable interactions and community building rather than facilitating it.
Next Steps
We chose not to add in certain features, such as a user profile and settings, of the student flow due to lack of significance to our solution, and lack of differentiation these features would likely have those of from the competitors we looked at. At this stage, functionality for booking was also excluded and was intended to be directly facilitated between students and cafe owners via email/messaging. In future iterations of our solution, we would like to add in features like the user profile and settings to round out the student-specific flow. We would also like to conduct further user research with cafe owners, and eventually implement a cafe owner flow, and features for students and cafe owners to confirm and manage bookings within the platform.
