top of page

CHI 2023 DESIGN CHALLENGE-INSPIRED INTERACTION DESIGN PROJECT  

PROJECT OVERVIEW

My team was tasked with developing an interactive design solution over the course of the semester in response to the CHI 2023 Student Design Challenge's Design Brief topic – Appropriate Solutions for All.

Upon carefully evaluating the17 Sustainable Development Goals identified by the United Nations and listed in the CHI 2023 Design Brief, my team chose to focus on creating a design that would help to reduce inequality for students

After conducting research and defining our problem space, we decided to create an app that would give low income and international students access to a social space to build a community and meet mentors in preparation for college.

 

As a member of the team, I played an integral part in each step of the design process that went into producing our final digital high-fidelity prototype.

RESEARCH

Interviews with our team's target domain (consisting of the same questions we developed together) were conducted individually by each member and qualitatively analyzed for major themes. Afterwards, we reviewed our findings together.

MY FINDINGS

  • Low-income students often have to personally seek out knowledge and resources for college due to lack of guidance from others

  • There is a want/need for support networks by low-income students to help them with college readiness and/or experiences while in college

  • Being a low-income student can come with extra difficulties in relation to work-life-school balance

IDEATION

My team continued the process of defining our design focus area and began to ideate solutions. We did this through creating user personas and scenarios, making design sketches and storyboards, and developing a user flow diagram with Miro.

PERSONAS

Developed with other team members

P1: Low-income High School Student without Support Network/Community

Primary

User that has limited financial resources and lacks a network of people to teach them about applying to college or financial aid. Wants advice on how to complete various college application steps.

P2: International Student 

Primary

User that wants to find college application and preparation resources as well as learn about colleges in the United States. Has limited access to information on U.S. colleges and lacks peers or mentors who have such information.

P3: Low-income College Student with Support Network/Community

Secondary

User that has limited financial resources and lacks a network of peers and mentors to support or guide them. Wants to learn about career preparation and find a community of individuals who share similar experiences.

One of my team's design storyboards

STORYBOARD (for P1)

Developed with two other team members

  1. P1 begin the process of applying to colleges but becomes confused with how to find and apply for financial aid, writing their college essay, and asking for letters of recommendation 

  2. P1 starts looking online in the library computers for college prep mentoring services and resources to help them with their struggles

  3. P1 is too busy to spend a lot of time on searching for resources because they have to work, go to school, and help their family at home

  4. P1 finds out about the app HelpMeCollege from a friend and downloads it

  5. P1 sees that there is a chat section in the app for reaching out to mentors

  6. P1 reaches out to a mentor that specializes in financial aid via the chat section 

  7. P1 is able to get guidance for the college process through the app and apply for financial aid successfully. 

  8. P1 gets enough money so that they can go through college without worrying about their financial situation too much.

USER FLOW DIAGRAM

Developed with other team members

In initially developing the information architecture of our design, my team created and iterated on a Miro user flow diagram to show the various flows that our user could take through our app's multiple screens. 

PROTOTYPING

Once my team ideated a design for an app, we began the process of creating digital wireframes and prototypes with Figma. Over the course of our multiple prototypes, we conducted usability testing (5 each time) to identify which aspects of our prototypes could be improved for users.

WIREFRAMES/LO-FI PROTOTYPE 

Usability Testing Feedback (which we addressed):

  • General

    • Many pages are not linked so some pages cannot be accessed via others (ex. "Messages" page from "Profile" page and vice versa)

    • "Back" navigation is confusing because it will go to a certain page instead of the previous page

    • Need more consistency with profile names as one users was confused as to why they had to look at their own post and profile (they signed up as Serena)

    • Several typos​

  • Sign-in/sign-up page

    • There is no option for the user to proceed if they do not want to link their university account

  • "Messages" page

    • There aren't time stamps on the messages so users don't know when the messages come in

    • There isn't an option for users to send attachments (pictures, documents, etc.)

    • One of the message previews doesn't match with the message that appears when opening it

    • Seems cluttered to users

INITIAL HI-FI PROTOTYPE

Usability Testing Feedback (which we addressed):

  • General

    • Users wanted us to not use Lorem Ipsum text so they could more clearly see the kind of content being included

    • Users wanted tags to differentiate students from mentors (including themselves) as well as for seeing the topics discussed in certain posts

  • "Feed" page

    • A plus sign was wanted for users to create their own posts

  • "Explore" page

    • ​Users wanted the button for following someone to display a different color as well as an option for sending a message to them

    • There isn't an option for users to unfollow a user after following them

    • Filtering option to choose a specific school

    • Descriptions (such as those relating to job or experience) are not listed underneath users, especially "Recommended Mentors"

FINAL HI-FI PROTOTYPE

TITLE OF THE CALLOUT BLOCK

CONCLUSION

After finishing the final prototype, my team had to present our project to our course instructors and fellow students (which we did with our slide below). We received positive feedback in the end.

 

Overall, this project was a great experience that I really enjoyed. I was able to collaborate with a team of people to come up with a high-level design solution to a real-world problem through a systematic process. 

My team's final project presentation poster

Final project presentation slide

bottom of page