UEat

  • UI/UX Project from Concept to Early Wireframes

  • Project for CS 422 (User Interface Design and Programming) at the University of Illinois at Chicago, Spring 2022

For this project, our assignment was to create a dining app for the UIC campus.

We were required to go through the beginning steps of a design process, including conducting a focus group, generating design ideas, creating low-fidelity wireframes, and using those wireframes to create an interactive prototype.

Contributions

Although we didn't designate official roles for everyone in our group, my main contributions were:

  • Assisting with organizing and running the focus group

  • Assisting with affinity diagraming

  • Creating a persona

  • Storyboarding

  • Creating task flows

Focus and Research

Focus Group and Affinity Diagram

Since the assignment gave us a specific problem to solve, the first deliverable of our project was to conduct a focus group and create an affinity diagram for compiling and organizing our notes. Since the concept is a dining app for UIC, the participants in our focus group were our classmates -- other students at UIC (who were not taking the same class).

Any note of any significance was sorted into one of six categories we came up with to appropriately group comments together.

Breaking it Down

We wrote "breakdowns" of each category to summarize the key points. Based on these breakdowns, we came up with design ideas for the app, and the things that users care about so that we could properly address them in our design.

Generating Ideas

Key User Needs

These breakdowns of each subcategory revealed a few key user needs:

  • Knowing what available food is near their current location and classes

  • Being time efficient since time is limited between classes

  • Being aware of what dietary options are available at each restaurant

  • Knowing what food options that are familiar to them are available

Personas

Based on these user needs, we created four personas -- fake people or characters who would have similar situations or lives to our target users. In this case, our personas were fake UIC students who would find use out of a dining app for a variety of reasons.

Jimmy Trains

Al E. Gater

Mocha Cafe

Fami Lee

Storyboards

We were also required to write storyboards for each persona, showcasing a certain feature of what our design would have and where or when a target user might need it.

Taskflows and Wireframes

Taskflows

With all of the above in mind, we created taskflow diagrams to demonstrate the process of using the app. These particular taskflows were created for some of our personas and their storyboards.

This taskflow follows the process of using the app to order from a restaurant ahead of time without missing their commutes.

This taskflow follows the process of using the app to find a place to buy coffee between classes.

This taskflow shows the process of using the app to order ahead for a particular restaurant that you have saved to your favorites, while still making it to class on time.

Wireframes

The next major deliverable of the assignment was to create wireframes of every screen on our app using Balsamiq. Below are four of the main screens.

Home screen

Restaurant screen

Search screen

Favorites screen

Interactive Prototype

Finally, using these wireframes, we were required to create an interactive prototype to show how each screen is connected. We used Invision (link here) to do this.