Quick View
Over three years and multiple versions, I shaped the UX and UI of NeverEatAlone, a social dining web app focused on hosting and discovering events. From hosting design workshops to making specifications and prototypes, I planned and executed the entire design process.
Below is a view of my major contributions throughout the process.
Design Workshops & Information Architecture
For a long-term iterative project like NeverEatAlone, one of my main challenges was ensuring each version introduced the most pertinent features without requiring lengthy development time.
To establish a clear roadmap, I hosted workshops with leadership and design colleagues to define values, user needs, and version scope. Workshops were user-centred and feature-focused. I used activities like ideation exercises, persona exploration, and affinity mapping to frame our discussions.
The results of these high-level collaborative sessions defined for us a clear project scope, which informed my work on lower-level information architecture, such as site maps and user flows.
Design Library—Creating Scalable & Universal Components
With a small team, we were highly iterative and collaborative, and needed a strong way to meld design and development. I used our design library to bridge this gap. It was a source of building blocks for design, and a specifications sheet for development.
Since design was often working one version ahead of development, I also handled version control and maintained a separate library for each subsequent version. This helped ensure that our design updates remained distinct between versions, while keeping the core brand identity in sync.
Each design library contained states for all reusable components, such as buttons, input fields, dropdown menus, cards, and icons. This allowed us to insert components with predefined parameters into the design of each page, and kept components shared between design and development.
I created each component to comply with accessibility standards, considering proper contrast ratios, keyboard navigation, and focus states.
If static components were the broad strokes in our process, then micro-interactions were the polish. I took the initiative to define transitions between component states—such as hover, on-click, and focus—and document the specifications of each interaction. I also wanted to give development a feel for these transitions, so I included mini-prototypes to bring each interaction to life.
Wireframing & UI Design
Using the components from the design library, I was able to iterate quickly on high-fidelity wireframes. Without the need to push pixels, the UI design process was focused on creating fluid user experiences for each page and each page-component.
Prototyping & Design Handoff
As we were a small team working on NeverEatAlone, I focused on making functional prototypes that could be referred to during the development process, as well as creating graphical wireframe flows.
Here is an interactive prototype I created to demo NeverEatAlone. Click around, and try treating it like a live app!
View Prototype
