workresumeI wanted to create something to help plan a Lord of the Rings marathon potluck feast. I needed to send invitations to see who was interested in a particular day, decide when the movies would start and how long a break would be between each film, and figure out who would bring what meal. Previously I used Google calendar to keep track of attendance, Google sheets to see who would get what, and a sheet of paper to sketch out the times that everything would start.
I initiated a survey with 20 potential candidates, excluding five who expressed no interest in events, aiming to determine willingness to plan or attend events with assistance.
View User ResearchUser personas and user stories extrapolated from user research.
View AnalysisThe flow for the process would look like this - with the organizer interacting primarily through the website and invitees jumping off through email invitations. The planner is in charge of setting the date, start times, and guest list. The invitees need to be able to RSVP yes or no and what dish they want to bring if they're going.
Click image for larger view
Before sketching, I wanted an idea of the number of frames I would need for the completed prototype. There would be two ways to reach the site; planners would come through the landing page, but invitees would likely click the link directly in the email invitation.
Click image for larger view
The sketching for most screens was straightforward, including standard cards for events and calendars to choose dates.
Click image for larger view
The wireframing process focused on creating intuitive pages with all the necessary information. The home page includes the create event button and already created events, allowing users to edit events already created.
The date selection is a simple calendar format that allows the user to scroll month by month and select the date on the calendar itself.
%201.png)
Click image for larger view
I redesigned both the guest list and invitation pages so that they fit on a single page without scrolling.
%201.png)
.png)
Click image for larger view
%201.png)
%201.png)
Click image for larger view
The most complicated screen by far is the timing screen; it's the hardest to visualize and plan. I wanted it to be intuitive and obvious. The timeline is the center factor, with the movies represented in solid blocks above with times below.
Click image for larger view
I wanted the user to have a noticeable and easily editable format for the schedule. The timeline has various bubbles which are selectable to drag - editing the start/end time of movies and meal times. The meal times are independent of the film and vice versa.
%201.png)
image credit: Megan Sebesta
Click image for larger view
The UI Kit pulls from art and typography from the LotR brand. Designed for 1440 px desktops, featuring a 12-column layout, inspired by Hobbit homes, utilizing The Hobbit font, Cormorant Unicase, and Montserrat.
View UI Kit
Prototype
The design system used font color contrast to ensure that text was legible for users with visual impairments and that text captions were used to describe all media to make the website more accessible to users with visual and cognitive impairments. Additionally, the design system did not use color exclusively to indicate function, ensuring that users with color blindness could still understand and use the website effectively. The design system meets WCAG 2.1 standards, resulting in a website that is accessible to a wider range of users, including those with disabilities.
Click image for larger view
Maze was used for usability testing, results show heat map and user survey answers.
View Usability TestingAs the designer and client of the Second Breakfast Club, I created a web application that helps users organize a Lord of the Rings marathon feast served in a potluck style. I used Google Forms to conduct user research and identified Planners, Attendees, and Invitees as the primary user personas. To make the process of organizing the event easier, I designed a user flow with a clear separation between the organizer and the invitees. For instance, planners can access the website, while invitees will get a link through email invitations. I also focused on developing an intuitive information architecture, which includes a timeline screen that shows the movies and meal times in a clear, easy-to-edit format. Additionally, I created a design system with Hobbit homes as inspiration, with a green and yellow color palette that also has good color contrast and meets WCAG 2.1 standards for accessibility. Using user research and a thoughtful design process, Second Breakfast Club is a user-friendly web application for organizing Lord of the Rings-themed potluck marathons.
%201.png)
