SI Connect

UX Design, UI Design

In answer to the 2019 CHI Student Design Competition prompt, my team and I designed an innovative tool for our school community to serve as a centralized resource throughout the program. We crafted our design statement, researched our users, and iterated on designs until we reached our final design solution.

 
 

 
 

The Brief

For a semester long project, my team and I were tasked with designing a solution based on the CHI 2019 Student Design Competition. With a theme of ‘Weaving the Threads’, we were encouraged to consider the way technology might be used to strengthen our social fabric. In answer to this prompt, my team decided to focus on our own UofM School of Information community. The relative youth of the BSI program attracts a diverse body of students who wish to be among the ranks of the field’s young pioneers, however, the dynamic nature of the young program can be intimidating and confusing to navigate. A lack of centralized resources cannot efficiently onboard prospective students or provide ongoing support for students throughout the program. We chose to “weave the threads” of the SI community by creating a tool to allow students to build strong connections vital to success in entering and completing the program.

 

 

Research

  • Problem statement

  • Competitive analysis

  • Personas & storyboards

  • Design space analysis

Problem Statement: UMSI students, whether current or prospective, are attracted to the program for its strong curriculum and community. SI Connect seeks to strengthen the sense of community within UMSI by facilitating peer engagement and networking.

We began by doing a competitive analysis of current resources in place for SI students, such as a mentorship program, as well as similar services such as LinkedIn. We analyzed a mixture of direct, partial, indirect and analogous competitors to get a feel for what was working and what wasn’t. While there are administrative resources in place to support students, there is no no effective centralized peer resource. We wanted to give students a flexible tool to connect with other students in a self-driven peer-support-oriented environment will help drive students’ networking initiative, and create a robust community within UMSI.

We then created personas and storyboards to hone in on our primary users and the journeys they take. We delved into the community surrounding us and came up with two primary, one secondary and one negative persona to guide our design.

Primary Persona 1

Secondary Persona

Primary Persona 2

Negative Persona

LOW-FI PROTOTYPes

To begin the design phase, we moved from initial sketches to paper prototypes. Allowing us a low risk way to test concepts, we created paper wireframes and iterated based on user testing. It was in this stage where we made several significant changes to our design, based on feedback, including the formatting and functionality of our ‘home’ page as well as a comprehensive search bar.

 
 
 
 

User testing

Throughout lo-fi iterations and into digital iterations we did user testing to validate concepts. Testing on our primary users, we were able to hone in on issues or missing aspects of the design. We used defect logs, like those below, to establish problems and their severity.

 
 

Final Design

We arrived at our final solution, SI Connect, for current and prospective BSI and MSI students. Users include students considering and entering the program, and current students. With SI Connect, these students are able to connect directly with peers to build relationships and have program-related questions answered. Users can browse connection recommendations, which are tailored based on the users own profile, and message another students directly. Our product also features a forum where users can peruse posted questions, ask their own, or help their peers by answering questions. At a high level, SI Connect provides a centralized platform for students to find peer support and eliminates the need to search through decentralized SI resources.

 
 
Mockup courtesy of https://www.anthonyboyd.graphics/mockups/product-red-iphone-7-plus-mockup-vol-3

Mockup courtesy of https://www.anthonyboyd.graphics/mockups/product-red-iphone-7-plus-mockup-vol-3

Closing Thoughts

Upon completion of this project I realized what it takes to take a project like this from ideation to completion. With more time, my team and I would have improved the visual design of the application, as well as continued user testing, but for the purposes of this project we found ourselves proud of our work.