.png)
191 for 191
Web Interaction Design and Content Management System
INTRODUCTION
How might we organize UCI ICS capstone projects and provide capstone project process information to future sponsors?
How might we reduce the workload and better organize the capstone project courses for the UCI ICS personnel?
My Role
Product Designer
User Resercher
Timeline
Jan 2022 - Mar 2022
(10 weeks)
Tools Used
Figma
Trello
Miro
G Suite
191 for 191 is a senior capstone project that was sponsored by the University of California, Irvine, Information and Computer Science department. 191 for 191 serves as a one-stop for all sponsored project-related information for students, faculty, and potential sponsors.
CONTEXT
Collaboration and Requirements
Along with other project managers, designers, and software engineers I worked to design a website that allows to share and discover UCI capstones projects. We also created interaction design for the backend content management system for these projects. We worked in 2-week agile sprints while organizing user stories in Trello. The Product Requirements Document helped us to communicate requirements and user goals with each other and with sponsors.
RESEARCH
Understanding user needs and pain points
User Interviews
To understand our user’s pain points, I conducted 2 user interviews with key stakeholders through a Zoom video call. I interviewed an ICS professor who closely works with students and capstone projects. I also interviewed the director of corporate relations who recruits sponsors and works with them on the onboarding process.
The user interviews provided some valuable insights into the project's requirements; the two key insights state the main goals of the website.
“As a professor, I want to be able to share a link to my class's projects to inform others.”
“As a potential sponsor, I want to be able to see past projects so I can understand the capstone projects program.”
Competitive Analysis
We conducted a competitive analysis to understand the capstone project's space. We analyzed direct competitors - UCI Samueli School of Engineering and UCI Department of Informatics. Our indirect competitors were The University of Texas at Austin, UC Berkeley school of information, the University of Washington, and MIT.
Some of the advantages of the competitors were the easy navigation experience, and the ability to access projects by different courses. Some of the drawbacks were a lack of information for the sponsors and the inability to filter projects from different years, and semesters.
Key Research Takeaways
-
Reflecting the needs of our users, the website must have:
-
Homepage with relevant information about the Capstone Program and highlights students' 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
-
-
Current organization system for capstone projects is not efficient.
-
Professors and administrators use google sheets to organized all the projects.
-
Users need more effective way to upload and edit capstone projects for the website.
-
SKETCHES
Early ideating
After gathering all the reseach data, I started sketching some early ideas for the website and the projects management system for the faculty. I then gained feedback on these early designs in weekly sponsor meetings.
PROTOTYPE
Designing and branding
To maintain the professionalism and branding of the University of California, Irvine, we followed the UCI brand system guidelines found at https://brand.uci.edu/.
Design System
HOMEPAGE
PROJECTS PAGE
.png)
BECOME A SPONSOR
.png)
PROJECT MANAGEMENT (BACKEND)
The content management system is designed for the professors and administrators to help them organize all the projects for the website. This allows them to efficiently upload, edit and manage all past and current projects.
High Fidelity Mockups
We gained contant feedback on our sketches, lo-fi designs in our weekly sponsor and stakeholder meetings. After few iterations, we came up with final high fidelity mockups.
ENGINEERING HANDOFF
Designer-developer collab
Throughout 10 weeks, we had weekly meetings with the software engineer on the team for constant feedback on the designs. We developed a consistent design system, utilized a grid layout, and demonstrated user flows with comments for a smooth engineering handoff.
