Vente
Mystie Chamberlin
Introduction
The product:
Vente is a mobile-first event discovery app created to help users cut through the clutter of generic listings and quickly find events that align with their interests. Designed for socially active urban professionals in their 20s and 30s, the app focuses on curated, relevant experiences—from live music and art pop-ups to wellness meetups and community events. With an energetic tone and intuitive flow, Vente makes event discovery feel more personal, engaging, and easy to navigate.
Project duration:
August 2019 – September 2019 (6 weeks)
The problem:
Despite the abundance of local events, many users feel overwhelmed by the volume of generic listings and struggle to discover experiences that genuinely reflect their interests. Existing platforms often prioritize quantity over curation, making it difficult to find relevant or exciting options. Vente set out to solve this by offering a visually engaging, interest-driven platform that makes discovering and saving events feel personal, intuitive, and enjoyable.
The goal:
The goal was to design a mobile-first, responsive event discovery app that delivered a curated, user-centered experience. This included developing a complete visual brand system—from logo and identity to style guide and UI kit—as well as producing high-fidelity mockups for both mobile and responsive web, culminating in an interactive prototype that brought the concept to life.
My role:
UI Designer, Brand Designer, Interaction Designer
Responsibilities:
- Created moodboards to explore visual tone and direction
- Designed and refined multiple logo concepts based on brand values
- Developed style tiles to define typography, color, and UI components
- Built a responsive visual identity system and style guide
- Designed high-fidelity mobile and web screens for key user flows
- Built an interactive prototype to demonstrate core app functionality
- Conducted peer and user testing to gather feedback on usability and visual clarity
- Iterated on designs based on feedback, improving hierarchy and interaction cues
- Designed a responsive marketing site across mobile, tablet, and desktop breakpoints
Domain Research
- Competitive Analysis
- Affinity Mapping
Summary
Visual Competitive Analysis & Affinity Mapping
To kick off the design process, I conducted a visual competitive analysis of both direct and indirect event discovery platforms—such as Meetup, Eventbrite, Facebook, and Thrillist. I broke down key elements like branding, layout, color, type, and user flows, then used affinity mapping to surface patterns and opportunities across these products.
Key takeaways included:
- Bold, saturated primaries—especially reds, blues, and yellows—were used frequently in both UI and branding.
- Sans-serif typography was the norm, often paired with friendly title-case logotypes.
- Content-heavy layouts were organized through chunking and grid systems for scannability.
- User-generated imagery was a dominant pattern, while indirect competitors leaned more on editorial photography.
- Sticky bottom navs and modal interactions were commonly used in map- or calendar-based flows.
- Familiar features like save buttons, “like” actions, and social integrations were crucial for engagement.
The affinity mapping process helped synthesize these observations across brand tone, UX, and content treatment. These insights directly influenced Vente’s visual strategy, including:
- Prioritizing clean typographic hierarchy and flexible card-based UI components
- Choosing a tone that balanced playfulness with clarity
- Designing customization features and scrollable interactions to keep navigation intuitive
This research became a cornerstone for later design decisions—from selecting color palettes and iconography to defining layout structures and interaction patterns across both mobile and web.
BEFORE
AFTER
Show Full: Competitive Analysis Report Presentation Deck (pdf)
🛠️ Process
Brand Exploration & Identity
- Logo Concept Sketches
- Logo Digital Drafts
- Logo Final Design
- Moodboards
Logo concepts: paper sketches
This part of the process was about getting ideas out fast and free—translating the brand’s tone into visual language without worrying too much about perfection. I started by jotting down brand adjectives like curious, social, playful, and in motion, then explored how those values might come to life across different types of logo styles: pictorial marks, abstract icons, and stylized letterforms.
Some sketches leaned into metaphor—like the “Social Bee” concept, which evoked buzz, community, and motion with simple shapes. Others played with geometric repetition and modular grids to convey connection and flow. I focused on range over polish. Even rough sketches that didn’t quite land helped refine the direction. By the end of this phase, I had a handful of contenders that felt aligned with the app’s personality and were ready for vector refinement and peer critique.
Logo concepts: digital draft
After narrowing down my favorite sketches, I jumped into Illustrator to digitize five or six of the most promising logo concepts. I kept everything in black and white at this stage—focusing purely on shape, clarity, and how well each design held up without the distraction of color.
Each concept explored a slightly different tone. Some, like the “Social Bee” and “Highlight Life” ideas, leaned fun and friendly, while others—like the “Come Together” star—felt more minimal and modern. I tested how each design might work in real-world contexts, like app icons or small headers, to see what held up at different sizes. Feedback from peers helped spotlight which designs had the strongest personality and which needed more refinement, especially when it came to visual balance and flexibility.
Logo concepts: Final Designs
The final round of logo development was all about polish and context. I refined the top three concepts and presented them in full brand environments—testing each in color, black and white, mark-only formats, and across sample use cases like app headers, loading screens, and dark-mode backgrounds.
Each logo direction captured a different facet of the brand’s personality:
Social Bee felt lively and approachable, evoking a sense of community and shared energy.
Highlight Life emphasized rhythm and spontaneity—designed to echo those blink-and-you’ll-miss-it kind of moments.
Come Together (Star) leaned more minimal and structured, symbolizing unity and forward motion with a modern, geometric aesthetic.
Showing the logos in context helped reveal which one not only looked great, but felt right. That feedback directly shaped the tone, iconography, and visual rhythm I carried into the UI and broader design system.
Show Full: Brand Development Guide (pdf)
Moodboards
Before locking in any fonts or color palettes, I built three distinct moodboards to explore how different emotional tones might shape the brand. Each one captured a unique vibe—pulling references from photography, layouts, icon systems, and type treatments I’d seen across event apps and similar industries.
Familiar, Carefree, Warm leaned into a nostalgic, relaxed feeling with candid photography, soft lighting, and cozy color palettes.
Highlighted, Passionate, Bright focused on energy and spontaneity—saturated colors, dynamic compositions, and playful, hand-drawn accents brought this board to life.
Minimal, Geometric, Simple was more stripped-down and editorial, using tight grids, neutral tones, and modern typography to create a clean, sophisticated look.
The point wasn’t to choose a final direction just yet—it was more about seeing how different personalities could visually translate. These boards helped me build a visual vocabulary I’d refer back to during branding and UI development, making sure every decision stayed aligned with the spirit of the app.
🛠️ Process
Visual Language & UI Direction
- Style Tile Sketches
- Style Tile Drafts
- Final Style Tiles
Style Tiles (Sketches)
Sketching style tiles digitally with an Apple Pencil felt a bit unconventional—it’s not how I usually begin visual design work. I tend to jump straight into layout tools and build things up visually from there. But working freehand on a tablet helped me focus on core elements like tone, hierarchy, and consistency, without getting bogged down in pixel-perfect execution too early.
I explored three distinct directions based on my moodboards and logo ideas. One leaned bold and expressive, another soft and editorial, and the third clean and geometric. I blocked out logo placement, image layering, headline treatments, and possible UI elements like buttons and filters. Even in a rough format, these sketches acted as a visual blueprint—giving me space to explore tone and structure before refining things further in the digital drafts.
Style Tiles (Drafts)
Highlight Life
BEFORE
AFTER
Social Bee
BEFORE
AFTER
Come Together Star
After sketching out a few directions on the tablet, I moved into creating three digital style tile drafts—each one rooted in a different moodboard and logo concept. The goal here wasn’t to finalize anything, but to explore how color, typography, and UI elements could come together to express distinct visual tones.
Each tile included brand adjectives, early logo options, and example UI components like nav labels, cards, and buttons. Rather than use traditional swatches, I incorporated color through photography and layout snippets to suggest how the brand might feel in action—without jumping ahead to full screens.
Feedback at this stage was incredibly useful. It helped me simplify where needed, fine-tune text treatments, and think more critically about visual cohesion. These drafts worked like visual experiments—giving me a way to test tone and direction before committing to a final design system.
BEFORE
AFTER
Style Tiles (Finals)
For the final style tiles, I refined the three visual directions based on peer feedback, subtle color corrections, and how well each concept translated into a usable design system. While each tile expressed a distinct tone, all were built with cohesion, clarity, and flexibility in mind.
Social Bee embraced warmth and connection with soft shapes, rounded typography, and a honey-toned palette—conveying friendliness and community.
Highlight Life leaned into bold contrast, expressive type, and vibrant color for a more energetic, lived-in tone.
Come Together took a minimal, geometric approach with clean lines, neutral backdrops, and subtle color accents—designed to feel structured yet approachable.
Each tile included key UI elements, headline styles, and visual layering to hint at how the brand could scale across different contexts. Rather than treating the style tiles as static snapshots, I approached them as the foundation for a broader system—one that would shape everything from the app UI to the responsive web experience.
Highlight Life
BEFORE
AFTER
Social Bee
BEFORE
AFTER
Come Together Star
BEFORE
AFTER
🛠️ Process
UI Design & Prototyping
- High-Fidelity Mobile Screens (First Draft)
- Alternate Home Iterations
- Microinteraction Sketches
- Final High-Fidelity Screens
- Interactive Mobile Prototype
High Fidelity Mobile Designs
During the first round of high-fidelity screens, I focused on translating my selected style tile into a cohesive, functional mobile UI. This involved applying brand elements—color, typography, spacing, and iconography—across core flows like the home feed, search, and RSVP interactions.
I used this stage to experiment with visual energy: testing different button shapes, padding choices, and image treatments while keeping usability top of mind. As I worked, I started to see how consistent alignment and type hierarchy could anchor the layout—even when the content shifted screen to screen. These early drafts helped establish a strong structural baseline for the app and provided the framework I needed to move into interactive prototyping and iteration.
Toggle filter between “Messages” and “Notifications” Users wanted an easy way to distinguish personal interactions from system alerts. Improves clarity and reduces cognitive load by letting users separate high-priority messages from general notifications—addressing overload issues noted by personas like Nate.
Interactive calendar with support for quick date selections and custom date ranges. Users had limited time to browse events (Amy’s frustration), and wanted control over when to attend. Saves time and enables precision when searching events. Familiar, calendar-style layout allows for quick scanning and range selection, making the planning process seamless.
RSVP Microinteraction Heart icon toggles between “Interested” and “Going” states. Users were more likely to engage when the app allowed non-committal interest and soft planning options. Offers an intuitive, low-pressure way to interact with content. Microinteractions reinforce social behaviors while giving users agency in their decision-making.
Location-Based Filtering: Current location detection and adjustable radius for nearby events. Users wanted hyperlocal suggestions to save travel time and discover relevant events nearby. Reduces friction in finding nearby options. The location overlay and adjustable range enhance trust and accuracy in results, aligning with Amy’s goal to stay active without wasting time.
Map background with a floating sheet. Map background with a floating sheet Lets users explore nearby events visually and then refine their results without breaking context.
Voice Search Integration. Microphone icon in the search bar. A nod to accessibility and speed for on-the-go users who may be multitasking or visually impaired. Increases efficiency and usability, especially when typing isn’t ideal.
Horizontal chips with contextual filters Users like Nate were overwhelmed by too much happening at once. Provides a sense of control and relevance without needing deep filtering menus. Easy to scan, toggle, and adapt in real time, which improves discoverability.
User profile displays RSVP’d events and interest filters. Users wanted a clear, visual summary of their engagement without digging through the app. Makes tracking one’s schedule easier and encourages repeated interaction. Serves as a self-curated space and aligns with personalization goals.
High Fidelity Mobile Designs (Iteration)
To pressure-test my layout decisions and deepen the visual language of the app, I created seven alternate versions of the home feed screen. The goal wasn’t to land on a single perfect layout, but to explore a wider range of hierarchy, density, and interaction emphasis—and to see how far the system could stretch while staying coherent.
Each version emphasized different priorities: some leaned into bold imagery and punchy card layouts, while others tested more restrained grids and clean typographic rhythm. I shifted RSVP placement, adjusted filter behavior, and played with tone and contrast to evaluate what improved usability, clarity, and emotional tone.
What I Explored Across Versions:
Event Card Size & Density: From full-width cards with high visual impact to tighter, more scannable formats
Information Hierarchy: Rearranged timestamps, RSVP buttons, and tags to test visual priority and readability
Filter UX: Explored top-fixed chip trays, FAB-triggered overlays, and floating filter controls
Typography & Contrast: Iterated on header weights, line spacing, and type scale to balance clarity and energy
Map vs. List Balance: Tested variations in how dominant the interactive map background should be
Bottom Navigation Behavior: Adjusted active states, icon spacing, and proportional sizing for legibility and ease of use
Tone Expression: Played with brand color saturation, layout breathing room, and icon styles to express tone more precisely
This phase helped me evaluate layout decisions through a usability lens—not just aesthetics. It clarified which components could flex without breaking, and where visual consistency supported user trust. The insights directly informed the next round of prototype refinement.
Microinteractions (Sketches)
When brainstorming microinteractions for Vente, my goal was to enhance the experience through subtle, purposeful moments—never animations for their own sake. Each interaction was designed to reinforce an emotional or functional cue, helping users feel oriented, acknowledged, or engaged without disrupting flow.
One early concept involved visualizing live weather conditions directly on the event map, triggered by the user’s location. Inspired by Snapchat’s playful overlays, this idea balanced utility and whimsy—offering real-time context while reinforcing a sense of place.
I also explored motion-based direction cues on the map, using animated dashed lines to suggest the user’s path while navigating. The effect nodded to vintage flight maps—adding charm while improving spatial orientation.
For RSVP actions, I developed a responsive heart icon that toggled between “Interested” and “Going” states. The icon includes a slight bounce and visual flourish—just enough to confirm the user’s intent and add a sense of personality without overwhelming the interaction.
These low-fidelity sketches gave me space to explore narrative, metaphor, and tone in a lightweight way—while keeping accessibility in mind. Each microinteraction was an opportunity to quietly delight, clarify purpose, and bring the brand’s character to life in small but meaningful ways.
High Fidelity App Designs (Final
Between the draft and final versions, I focused on tightening the visual system and fleshing out areas of the app that hadn’t been fully built yet—such as registration, login, and onboarding flows. I also revisited the interest selection interface, drawing from insights gained during the microinteractions assignment. That exploration helped shape how feedback and filters could feel more dynamic, responsive, and visually expressive.
A key priority in this phase was establishing cohesion. I standardized key UI elements across screens, introduced a consistent grid and baseline rhythm, and refined spacing for better readability and flow. To create visual hierarchy without relying on heavy drop shadows or borders, I used hue and saturation overlays to separate layers and establish depth more subtly.
Given the project’s timeline, the focus was on making clear, intentional decisions to bring a complete, functional product to life. And while there’s always more to refine, this version provided a solid foundation—one that could easily support future iterations based on expanded user testing and feedback.
Draft
Final
Mobile Prototype
- Account Creation & Verification
The journey begins with phone number entry and a one-time verification code. Once confirmed, users choose a unique profile name—establishing both security and a sense of identity from the start.
- Onboarding: Friends, Interests & Location
Next, users can add friends and select interest tags (e.g., music, food, wellness, nightlife) to personalize their experience. They’re then prompted to allow location access to enable geo-based event recommendations.
- Home Feed with Event Cards & Map Background
After onboarding, users land on a scrollable home feed layered over an interactive map. Event cards display key info and include an RSVP button for quickly expressing interest or attendance.
- Search via Bottom Navigation + Bottom Sheet
Tapping the search icon in the bottom nav triggers a non-modal bottom sheet—allowing users to search by keyword or category without leaving the screen. The experience feels fluid and familiar, like Google Maps or Facebook Events.
- Floating Action Button (FAB) with Filter Chips
A floating action button activates category filter chips in a bottom sheet. This lets users refine their event feed by vibe, topic, or timing—without disrupting the map context.
- Events Tab with Calendar Background
The Events tab switches the background to a calendar, offering a structured, date-focused view of upcoming activities. It’s ideal for users who want to plan ahead rather than browse in the moment.
- Profile Screen: RSVP History
The profile screen collects all events the user has responded to in one place, serving as both a personal event history and a quick-reference list for past interests.
🛠️ Process
Testing & Refinement
- Visual Design Usability Study
- Key Findings & Iterations
- Accessibility Considerations
Usability study: findings
To evaluate the effectiveness of Vente’s visual design and navigation patterns, I conducted two unmoderated usability studies with participants representative of the app’s target audience—urban, socially active professionals in their 20s and 30s.
Each session began with a brief pre-screening questionnaire, followed by a series of task-based interactions within the prototype. Participants were prompted to explore the app organically and complete specific actions such as using the floating action button (FAB), applying filters, and navigating between key tabs.
After completing the tasks, participants responded to a short visual design survey and were asked to describe their impression of the interface in five words or fewer. The sessions provided valuable insights into both the clarity of the design and the usability of key interaction patterns.
FAB
Rethink filter
navigation; Consider
using Chips/tabs
Seems like users focused on the first image; May need to retest with random images or with design survey at begining and end of others with different image order.
Round 1 findings
Accessibility considerations
🛠️ Process
Marketing Site Design
- Paper Sketches (Wireframes)
- High-Fidelity Marketing Site (Draft)
- Responsive Final Designs (Mobile, Tablet, Desktop)
Responsive Marketing Website
As a final step in building out the Vente brand system, I created a responsive, scroll-based marketing site to promote the app and highlight its key features. The goal was to adapt the brand’s visual language to a new context—desktop and mobile web—while maintaining clarity, cohesion, and energy across breakpoints.
I began with wireframe sketches for mobile and desktop layouts, loosely inspired by event-focused products like Snapchat and Momentum. While the paper phase of this assignment leaned more rigid than my usual exploratory sketching style, it helped me experiment with sticky nav behavior, vertical rhythm, and ways to introduce scroll-triggered interactions. I sketched multiple directions, drawing inspiration from earlier iterations of the app and moodboards.
In the digital drafts, I kept the scroll-activated navigation bar and focused color usage to the header and footer for impact without overwhelming the layout. Based on early feedback, I removed the FAB in favor of visible filter components, which felt more practical for a marketing context. I also explored motion—using gifs and video references—to mirror the energy of the app and evoke the vibrancy of live events.
To refine the responsive behavior, I consulted with a developer about padding and vertical spacing strategies, referencing the CSS box model to improve consistency. This round of feedback and experimentation helped shape the final prototype into something that not only looked aligned with the product’s brand but also felt ready for future development.
If given more time, I’d love to push this site even further—especially by incorporating more motion-based storytelling and learning front-end development to better translate design intentions into functional components.
Responsive Design
Seamless experience across all devices
Wireframes & Mockups
🛠️ Process
Systemization & Delivery
- Style Guides
- Presentation Deck
🗂️ Style Guide
To support consistency and handoff, I created a visual style guide that outlined the logo system, brand attributes, typography, color palette, iconography, buttons, and photography direction. This document served as a reference for how design elements should behave across the product and ensured that future iterations would remain cohesive and on-brand.
🖥️ Final Presentation
The project wrapped with a final presentation deck designed to walk stakeholders through the full arc of the process—from early research and sketches to final UI screens and usability findings. It was structured to communicate both the rationale behind design decisions and how the solution addressed user needs, while showcasing the brand’s tone and visual system.
Show Full: Style Guide (pdf)
Show Full: Presentation Deck (pdf)
Going forward
- Takeaways
- Next steps
Takeaways
Impact:
User testing confirmed that the app’s visual tone and personality resonated with participants. One described the home feed as “colorful, fall, peace,” while another likened the brand to “Pumpkin Spice, Boho, basic.” While playful, those impressions aligned with the approachable, nostalgic vibe I had set out to create—validating key decisions made during the logo, style tile, and UI phases.
What I learned:
This project deepened my understanding of how visual identity and interface design can reinforce each other when grounded in clear brand strategy. I also learned that my process isn’t always linear: while sketching style tiles initially felt unfamiliar, it helped me stay focused on tone and hierarchy before polishing pixels. I’ve come to appreciate that jumping between analog (or analog-ish) and digital tools can unlock different kinds of insight. Another key takeaway? Users will always interpret design through their own lens. What I thought was bold and editorial was read as cozy and seasonal—which wasn’t wrong, just unexpected. That reminded me to test visual perception earlier in the process—not just usability.
