TEAM MEMBERS
SPONSORS
UCI Donald Bren School of Information and Computer Sciences (Professor Matthew Bietz, Professor Hadar Ziv, & Jason King)
PROJECT MANAGEMENT & DESIGN TOOLS
G Suite
Trello
Slack
Figma
Miro
PROJECT TYPE
Website Design Interaction DesignProject Management System(10 Weeks)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.
Debra is a college professor at UCI under the school of ICS. She is part of the senior capstone project series, but struggles to organize the past and current projects of her students as well as organize the information of past and current sponsors her classes work with.
Noah is our entrepreneur persona who is currently looking at capstone programs to work alongside students in order to jumpstart his growing edTech business. In order to do this, we recognized that Noah would need to see the works of past students and their capstone projects in order to understand how the capstone project process works.
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.
Home Page
Upon opening the website, this is the first page that users see. Since we are creating a website for the school of ICS, we wanted to stay consistent with UCI's design and color branding to mimic the look and feel of other UCI school websites.
We made sure to keep the home page simple and clean in design. The homepage includes necessary details such as- a short description of the capstone projects, past projects, a navbar with a link to the projects page, and a sponsor page.
Sponsor Page
While designing this page, our sponsor persona and user stories helped us make important design decisions. For this page, we wanted to list all important details that a sponsor would need when they want to sponsor a project at UCI. This also lists what a sponsor can expect from the student as well as from the courses. Finally, after careful consideration, we wanted to include a capstone sponsor guide to answer any questions future sponsors might have and help them make informed decisions.
Projects Page
Finding a specific project from a specific course is just a few filters away! Our project page is designed to make searching for a project easier. We included filters for departments, courses, and quarter/year to find the specific projects easier, making it time-efficient. Since each project is linked with a tag for categories, such as Health, AI Machine Learning, etc., searching for the project is made even easier with the search bar based on these tags. Lastly, we wanted to give enough information about the project without making it too cluttered or complicated, so we only included important information for this page. If the user wants to further look into the project, we created a separate page for each project in more detail.
Projects (clicked)
Learn more about each project in detail by clicking “final website” on the project page! This page contains detailed information about each project in terms of its sponsor, project, deliverables, and course.
Dashboard
Projects Page
Uploading Media Page
Adding a New Project
Click above to interact with the Figma prototype of our website! Zot Zot!
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.
Justin Huynh