This project was a student-driven Capstone at the University of Washington's Information School in Winter/Spring 2023. Starting June 1st 2023, it will transition to open source for future iSchool Capstone teams to develop (with no plans for maintenance by the original team).
Plate of Nations is an electrifying annual event that was crafted by the MLK Business Association. It serves as a platform to promote the eclectic mix of independently-owned restaurants nestled in the vibrant MLK community. This two-week long festival is a celebration of culture and diversity as it showcases the mouthwatering delights of immigrant-owned businesses in the Rainier Valley neighborhood of Seattle, Washington. It's an incredible opportunity for food lovers to tantalize their taste buds with the delectable flavors of traditional dishes from around the world.
Our team embarked on a mission to elevate the online presence of Plate of Nations by breathing new life into its website design. The goal was to create an unforgettable user experience that would immerse attendees in the cultural richness of the participating restaurants. We put usability and accessibility at the forefront of our design process, embracing a mobile-first approach that delivers a seamless and engaging browsing experience. The redesigned website now features detailed event information, a searchable restaurant directory, and a Digital Plate of Nations Passport.
- Homepage
- Introduction to event
- Navigation to Restaurant Directory
- Vendor Spotlight
- Social Media Previews and Links
- Restaurants Directory
- Menus and information about this year's participating restaurant (location, hours of operations, owner, etc.)
- Filter by cuisine and dietary restriction
- Digital Passport
- Users can digitize their PoN passport by registering a valid phone number
- Track stamps virtually by scanning a QR code for each restaurant
- Be notified via text if you win a contest
- News & Press
- An archive of media that features PoN for each year since its establishment
- About Us
- What is it & how to participate
- Gallery of photos
- A timeline detailing PoN's history
- Sponsors
- Literature Review
- Market Research
- User Interviews
- Concept Validation
- Usability Testing in person and on virtually (on zoom)
- Users are unwilling to read through heavy text
- Creative, unique mobile experiences that differ in structure from typical mobile sites excite users. Don't be afraid to take design risks!
- Users hesitate to create a profile/ account just for a once a year event like Plate of Nations
- Show don't tell: Prompt users to take an action instead of instructing users how to use features (i.e. passport), information about the event (i.e. homepage), etc.
- Information about the event and how to participate should be clear and obvious (especially on homepage)
- User flow is disrupted if there are too many pages and buttons to click through
- Minimalistic design is well-received by users
- User flow can be organized using a storyboard describing user's journey
- Users want to digitally keep track of their plate of nations' passport
- Users appreciate being educated on cultural cusines, such as how to eat it and its cultural significance
- Communication (marketing of the event) is essential to the success of a food event
- Differences exist between the type of food event and audience attracted -- Younger individuals expect more than just a food festival (i.e. paired with music event)
- Food events positively affect customer purchasing behavior
- Food events bring together communities and people
- There are disaparities in cultural representation at food festivals
- Figma
- See how our design changed between iterations, from low-fidelity to high fidelity
- This website was based on iteration 4's design
- You will also find pictures of examples that served as inspiration for our design
- We based our website’s interactions on Flow 3
- HTML & CSS
- React JS
- Bootstrap
- Firebase
npm installnpm start
There will be comments in the code documenting the meaning of different variables and the purpose of each code file/ function. Please keep comments concise to avoid cluttering the file (under 300 characters).
- Selena Ando
- Jennifer Do
- Grace Kim
- Samuel Taylor
- Jack Weinstein
After meeting with stakeholders, we decided to strictly use only the Plate of Nations brand colors -- reds, oranges, yellows, beige, and black. There may be some other colors used as accent, but the website will primary be in these colors
Reason
- Too many colors --> considered distracting
- Keep the Plate of Nations branding and theme consistent
While our team explored possible website builders that could be used to create this website, we decided to code it manually with Github instead.
Reason
- Our group was unable to afford the annual fees. Too many features had to be "unlocked" with an expensive subscription to implement our solution.
- We do not have access to PoN's current website (we realize this might be a liability and security concern for them so we decided not to ask)
- Github is a collaborative, low cost platform -- there are little to no fees associated with creating an account, maintaining a repo, and collaborating with several users.
Here is also the list of pros & cons we created to assess how suitable each website builder would be for implementation.
During our last round of usability testing, we received feedback on how the current iteration might be considered "cookie-cutter" and there were suggestions to implement a more creative, unique experience. Here is a list of pros & cons we created analyzing popular website builders
Reason
- Due to limited time and upcoming capstone deadlines, we decided to prioritize implementing our current design. If given more time, we would definitely explore other alternative deisgns that might be more engaging and exciting.
If you have any questions or concerns, please don't hesitate to contact us at menufacture.info@gmail.com