Design x UIUC: a platform for making the most of design at UIUC
Design x UIUC is a centralized information resource for all things design at the University of Illinois at Urbana-Champaign, created and designed by Design Innovation Illinois project teams. It highlights relevant design classes, clubs, spaces, events, trends, and history at UIUC. Our goal was to create an enabling resource for all students and stakeholders to make the most out of the design related opportunities, experiences, and resources UIUC has to offer.
This project was started in the fall of 2019 and worked on until spring 2020 by Design Innovation Illinois project teams. Check out our site:
This project was originally inspired and gives credit for the idea of Design x UIUC to Design at Berkeley’s original project. A recently updated website (which we’re also inspired by) is found here:
Our full project can be found here:
Below is a case study from our spring 2020 design team when we set out to design a mobile app version of what Design x UIUC (Design at Illinois at the time) could look like.
Project Members: Suryaa Murali, Steven Pan, Sylvia Peng, Melanie Tran, and Emma Wang
Discovery:
Project Overview: Our application provides users with a centralized source of information about design-related classes, majors, clubs, and events at UIUC. It also provides detailed overviews of past design trends, allowing users to understand the evolution of design as a discipline over time.
Current Problem:
Many departments at the University of Illinois offer design related courses and there are many design related news occurring around the campus. Though there are many opportunities happening, students can lose out on useful design related info and opportunities because currently there is not a centralized information hub for students to get a full overview of design related happenings. Design at Illinois is a platform that solves this problem. It offers information on design related courses, programs, spaces, news, etc.
Research
User Interviews: To specifically pinpoint the issues that people face in finding design-related resources, we conducted six interviews with students across three universities. The feedback from these interviews indicated that people were interested in reading about design (e.g. MIT Technology Review newsletters). However, this enthusiasm often failed to translate into action. Multiple interviewees expressed that they hadn’t enrolled in design courses or joined design-related clubs, in part due to a lack of centralized information.
Interesting Insights!:
Opportunity: “Talk more about how design is a foundation in the context of specific disciplines (ex. panel, courses, etc)”
Challenge: “Look(ing) around campus for flyers/posters for design-related stuff- Feel like they kind of just show up coincidentally”
Pain Point: “Lack of real-world experience opportunities to see how design works within an organization that has many other departments”
Challenge: “How can we create flexible spaces that can be used by people from a wide variety of design disciplines?”
Opportunity: “I think design can be associated with a wide variety of disciplines. Environmental science, biology, and writing are a few that come to mind. Other more traditional examples include urban design, architecture, industrial design, etc.”
Photo Journal: To identify the pain points that current students are facing and to gather current and future opportunities, we established photo journals that include pictures of design related things on campus and online.
Affinity Diagram: We used an affinity diagram to organize excerpts from our user interviews and images from our photo journals. Ultimately, we found that each piece of information fit into one of seven categories:
- Academics and Courses
- Spaces
- Initiatives
- Design Tools and Processes
- Organizations
- Programs and Events
- Centers, Institutes, and Research Labs
Additionally, we classified excerpts from user interviews as presenting either a pain point, opportunity, or challenge. This allowed us to better understand the issues that people who are interested in design are currently facing.
Ideation
Ideation (Part I: Lotus Blossom & HMW Q’s)
To begin the ideation stage, we gathered all the important points from our user research (interviews) and categorized it as either a pain point, opportunity, or challenge. We further organized these points by linking them with a corresponding theme within our app — organizations, design tools and processes, academics, design spaces, programs/events, or campus initiatives.
After aggregating and organizing our user research, we moved onto developing problem statements surrounding each of our themes using ‘How Might We’ questions. After generating about 19 different HMW questions, we narrowed down what we thought were the most valuable ones to further explore and expand.
Using our narrowed selection of HMW questions, we used the Lotus Blossom method to develop ideas for solutions. The Lotus Blossom method uses the HMW question as the focal point, then “blossoms” into eight surrounding boxes that contain solutions. The purpose of doing this was to push our creativity to envision different and new ways to solve a problem. We realized that some of our solutions were not feasible — for example, we can’t control the room reservation process for design spaces. However, when applicable, we connected different solutions together to broaden our concepts.
Ideation (User task flows & Information Architecture)
Following the development of our solutions using the Lotus Blossom, we defined 3–5 ideas/features we wanted to implement on the interface. For example, one feature was a map that shows all free design/collaborative spaces at UIUC. In addition to the features, we also developed the goals each feature would achieve to ensure that each action has a purpose. Afterward, we designed created user task flows that describe how the user would navigate the features we defined. By illustrating the step by step process the user would take to complete the goals of the feature, we can move forward to visualizing how those features would look like through low-fidelity prototyping.
Implementation
Wireframes and Lo-Fidelity Prototyping
With our feature set, information architecture, and user flow complete, the next stage was implementation. We began by selecting features and flows that we wanted to implement, and began to undertake an iterative design process of designing out interface flows. The first iteration was a basic wireframe of what the ui could look like and an interaction model of touch points a user could go through. This was then walked through and critiqued at one of our meetings, and the next stage was basic content included in a more realistic lo-fidelity prototype.
UI Component Library
From the get go this project started off with the intention of using a ui component library to speed up work flows and ensure design consistency. With our lo-fidelity prototypes we began to compile shared ui components and styles used to make our components consistent with one another for better usability and overall experience. Some of the components included cards, image frames, dividers, inputs/toggles, etc. At the interface level we came together to develop standard ui patterns like a shared nav bar, layout, icons, and typography.
Hi-Fidelity Prototyping
Finally it came to hi-fidelity prototyping. We began by making fine detail changes like to the typography by bolding to create hierarchy and content through images and shadows. Choosing a color scheme to best represent the interface came down blue and light blue to reflect our club and UIUC.
Check it out below!
