top of page
artd318_mockup.png

Collaborative Experience

ARTD 318 Interaction Design | UI Design and UX Research

Roles & Responsibilities

  • User Research

    • Personas​

    • User Journey Map

    • Card Sort Analysis

  • UI Design

    • Information Architecture

    • Interaction Flow Diagram

    • Mobile Interface Design & Iteration

Project Context

  • 8 Week Course

  • Fall 2021

  • Partner-Based Project

    • UI/UX Designers: Karen Chen, Cindy Phung​

Tools Used

  • Adobe XD

  • Adobe Illustrator

  • Miro

Project

This project was brought to life by Karen Chen and Cindy Phung in ARTD 318 with Professor Juan Salamanca at the University of Illinois at Urbana-Champaign.

 

We designed personas, journey maps, and a mid-fidelity clickable prototype that was presented to our class. The app explores how relationships and connections can be made through the shared love and enjoyment of cooking and learning how to cook.

User Personas

We decided that our app was going to set out to help connect experienced and non-experienced chefs through recipe sharing, rating, and making. We narrowed it down to three specific types of users: university students struggling to get proper nutrition, parents feeding their young children, and grandparents who want to pass their recipes down to the next generation. 


The user persona cards were designed by Cindy Phung in Adobe Illustrator.

User Journey Map

Then we zoomed in on our two personas, Kanako and Allita, to explore how they might interact with our app, how they meet and connect on the app, as well as what knowledge or experience they take away with them after using our app.


This user journey map was designed and iterated by Karen Chen. 

Journey Map edited.png

Card Sort Analysis

For our prototype, we performed a card sort analysis to see how users might categorize information within our app. Since our app is centered around recipes and recipe sharing, the best way to aid the user would be to categorize recipes into meal types.


In order to perform this analysis, we sent out a survey to college students, adults, and elderly members of our community across many different ethnicities and backgrounds. This was a closed card sort analysis which meant we could dictate the categories and notice trends that appear with the user's categorized foods.


The main trend we noted was that lunch and dinner were inter-changeable and that sweets were often categorized as deserts based on mental maps developed over their life span; savory foods were for meals and sweeter foods were for dessert.

artd318_cardsort.PNG

Interaction Flow Diagram

In order to better illustrate the function of our prototype, we put together a flow diagram that guides the user through the app.
In this, we elaborate on triggers, feedback, and constraints the user has when interacting with each flow. We also indicate gestures the users can perform on each frame and how they connect to the next.

This interaction flow diagram was designed and iterated by Cindy Phung.

artd318_interactionflow-01.png

Prototype

In Adobe XD, we put together mid-fidelity wireframes as well as their transitions from each page. 

From this project, we learned to pivot ourselves and focus more on our intended users and how this app may weave into their daily routines rather than interrupt them completely. 

​

Divison of Work:

  • Karen Chen: 

    • Settings interface

    • Filter interface

    • Meal planning interface

    • Recipe library page

    • Card Sort Analysis Report

    • Information Architecture Diagram

  • Cindy Phung:

    • New recipe interface​

    • Forum/Home page

    • Search function

    • Personal profile

    • Recipe viewing interface

    • Card Sort Analysis Survey

    • Interaction flow diagram

Works Cited

Wolf, Michael. “Yes, Millennials Are Staying Home to Cook. Here's What They're Making.” The Spoon, 8 June 2017, https://thespoon.tech/yes-millennials-are-staying-home-to-cook-heres-what-theyre-making/.

​

Taillie, Lindsey Smith. “Who’s Cooking? Trends in US Home Food Preparation by Gender, Education, and Race/Ethnicity from 2003 to 2016.” Nutrition Journal, vol. 17, no. 1, 2018, https://doi.org/10.1186/s12937-018-0347-9.

​

User persona images are taken from Pexel, a creative commons photo website.

bottom of page