Our goal is to make 191 for 191- website the platform to share and discover past, present, and future UCI capstones projects. This space will focus on showcasing projects, following more of a standard UCI website interface. 191 for 191 will serve as a one-stop for all sponsored project-related questions for students, faculty, and potential future sponsors.

This project idea was pitched by professor Matthew Bietz, our sponsor for this project. He shared how the capstone project professors are interested in having a platform where they can share the work created by the students of ICS capstone projects.

Therefore, our team set out to design a capstone project website, a website that enables users to display past, present, and future capstone projects from different ICS classes.

Based on the information provided by our sponsor, our team came up with the following design question:

How might we reduce the workload and better organize the capstone project courses for the UCI ICS personnel?

Due to special circumstances with our previous sponsor, our project is considered a 10-week project instead of 20-weeks. Professor Matthew Bietz proposed multiple projects, but there was one that stood out the most for our team, and this project is called “191 for 191,” a platform that holds information about the past, present, and future capstone projects and sponsors.

After understanding the problem space, our team decided to do some user research to understand the problem in-depth. Our team conducted user interviews with potential users of the system to understand their goals, pain points, and frustrations. While formatting our user interviews, we made sure of the following things:

After finishing our research, we started defining our requirements document and created personas, and developed a problem statement. Shortly after gaining an understanding of what our sponsors and stakeholders want, we wanted to conduct some market research to gain insights into our competitors and begin the ideating process.

Finally, our team worked on the wireframes to create a clickable prototype to mimic the feel of the website and to get feedback from our sponsors and stakeholders.

We had regular meetings with our sponsor to discuss and understand the requirements of the application, seek feedback, talk about the next steps and any obstacles we were experiencing. Our sponsor acted as our mentor and guided us through the entire process, from brainstorming to implementation. These meetings helped us understand things we were confused about and encouraged us to push ourselves to learn more such as front-end development.

User Research

Our user interviews provide valuable insights into the project's requirements, we summarized our findings into two main key points.

Reflecting the needs of our users, the website must have:

• Homepage with relevant information about the Capstone Program and highlights student past projects

• Projects Page that allows users to see past projects sorted by different school year, quarter, and ICS departments

• Projects Detail Page where visitors can learn more about a specific project

• Become a Sponsor Page that holds all the information and process of sponsoring a project

User Personas

Our user personas were created to understand the types of users that will be interacting with our system and their most common frustrations and goals. For this project, our team was able to identify two personas: a college professor and entrepreneur as suitable candidates.

Hi-Fi Mockups + Figma Prototype

After conducting user research and speaking with our sponsors, our team created the requirements document. Once we got the requirements document done, we started creating sketches of our potential system. While sketching we made sure to keep the user stories as well the requirements in mind. Once we completed the sketches, we asked for our sponsor's input in terms of which design they prefer. Once we got their approval, we instantly started with the lo-fi wireframing on Figma.

One of the crucial parts of the UX process is the iterative design process; thus, we made sure to follow it through our design journey for this project. In addition, we incorporated user feedback and sponsor feedback in our process of making final prototypes.

Click above to interact with the Figma prototype of our Project Management system! Zot Zot!

At the end of 10 weeks, we completed hi-fi prototype and we handed off all the necessary documentation to the sponsor:

Access to Google Drive containing all the user research data such as Interview notes, user insights, and over research documentation consisting of Competitive Analysis, User flow, User Personas, Requirements & Design Document, UML Diagram, ER Diagram.

Access to the Figma file which consists of all of the Lo-Fi Wireframes, Design System, Hi-Fi Mockups, Clickable Prototype, and Handoff documentation.