top of page
MYC coverproject.png

RESEARCH, PROTOTYPING AND TESTING  | 2023 | STUDIO PROJECT

Re-Designing the way incoming students connect with their peers

DURATION

Overview

May 2023 - August 2023

ROLE

PROJECT OVERVIEW

MeetYourClass is an innovative platform dedicated to bridging the gap between universities and social media, with the ultimate goal of fostering authentic and meaningful connections among incoming college students. Their mission is to enhance the overall college experience by leveraging social media to create a sense of community before students even set foot on campus.

This summer the company wanted to focus on redesigning their website

Lead UX Designer in a team of 2 UX Designers, 2 developers, and 4 Co-Founders

DESIGN OUTCOME

A Hi-Fidelity prototype of the re-designed website

WHAT I DID

Mentoring, Heuristic Evaluation, User Flows, Information Architecture, Mid-Fi Prototyping, User Testing, Hi-Fi Prototyping 

Situation

SITUATION UNDERSTANDING

What is the goal? 

Increasing usability and driving retention

MeetYourClass is redesigning its website from the ground up. They wanted to make it more usable, appealing, and resourceful with the intention of increasing retention on the website and adding more useful features. The biggest thing to keep in mind was that the main user group for the organization is undergraduate students with a very limited attention span for things like onboarding or trying to understand how the website works

Evaluation

HEURISTIC EVALUATION

Okay... so what's up with the current website? 

Pointing out all the usability gaps

Based on a few initial stakeholder interviews, facts reported by users, and a heuristic evaluation, we found the following usability gaps in the existing experience.

Aligning the stakeholders

Each stakeholder held distinct visions for the website's overarching purpose and the company's core objectives. Recognizing the need for feature enhancements and new additions, I realized the importance of aligning each design decision with specific goals to drive the project in a cohesive direction.

stakeholders.png

What did I get from this? What could be used while designing?

Here were some things that we cleared up

Organization

We finalized the order of sections for the main user flows of submitting posts, creating profiles and landing page, to clarify what type of information I was designing for and why.

UX Writing

We decided to simplify the overall content design to create more clear understanding of user flows and CTAs

Design System

We decided that we needed to maintain a design system and utilise Figma's new 'Ready for dev' features for the developer handoff of components

Testing Strategy

We decided that screen recordings and think-out-loud techniques would be the best way to go about the testing of the revamped user flows

Problem

PROBLEM

How might we redesign a social and informational hub to make it more intuitive, resourceful, and aesthetically appealing?

  • The current MeetYourClass website exhibits inconsistencies in its user interface and design principles, resulting in a fragmented user experience. 
     

  • Navigating through the website, especially for new students looking to submit a post or engage with their peers, has proven to be cumbersome. 

Research

RESEARCH

Let's look at some of the feedback from live chat support

We conducted a card sorting analysis of the HubSpot portal, examining user conversations from the live chat feature on the website to identify the most common pain points

hubspotaffinity_edited.png
Ideation

USER FLOWS

With all that in mind ... 

Time to design!

I visualized and analyzed the website's information architecture, revealing intricate and confusing pathways that posed challenges for users. Subsequently, I deconstructed the architecture, delving into the essential user activities driving website engagement. Utilizing this insight, we meticulously crafted new and optimized user flows for each key task, as depicted in the accompanying visual representation

Untitled_Artwork 18_edited.png

In the early phases of the redesign, we prioritized ongoing stakeholder feedback, iterating with low-fidelity and mid-fidelity designs as well as developing a design system at the same time. This iterative process allowed us to refine the user experience and align with stakeholder expectations effectively.

hi-fidelity1.png

The phone and email verification need to go to another page, this page is too long

We need to add another feature to the find people section, like a "feed"

This might take the user too long to search for a tag

Instead of steps we can utilise this space to showcase roommates and community

Don't need a sorting feature for the feed

Change the wording to real word language

Designing with a mobile-first mindset

I spent too long perfecting the mid-fi web iterations, but it was simpler to work on the mobile site first and then transfer it to the desktop. So, we decided to finish the mobile flows and test them out before we moved on to the desktop designs. Our user group was 'undergraduate students' who used the website more on their phones to submit posts 

just1.png

Adding a new flow

After analyzing stakeholder feedback and refining our screens into High-fidelity designs, we incorporated a new feature named "Feed" within the "Community" tab. The aim was to establish an information hub generated by students for students, allowing users to view posts on various campus topics and connect with others on campus simultaneously. This involved dividing the "community" tab into distinct sections, namely "Feed" and "People," each serving specific purposes.

feed2.png
tags2.png

TESTING

Testing

Are the users able to grasp the concept? 

Testing out the designs 

We employed the think-aloud, remote un-moderated task-based usability study method and distributed comprehensive interview documentation to guide users through the assigned tasks, accompanied by screen recording instructions. The documentation outlined four designated tasks, navigable through Figma prototypes. Students readily embraced the screen recording process and openly shared their thought processes throughout the user testing sessions. In line with Brian Chesky's perspective, 'You should be happy with your designs before you test them,' we strived to achieve a high standard of design quality and functionality.

We conducted 2 rounds of testing and iterations, resulting in the collection of prominent feedback quotes that drove significant design modifications

Users experienced confusion distinguishing between "View Community" and "Find People" features, seeking clarity on the distinction and connection between the two

Confusion about "Reach more people" feature and its relation to UMICHbios, alongside uncertainty about the "Filter for people" option. Multiple call-to-action buttons create ambiguity, leaving users unsure about editing their details post submission.

Users find the profile creation process redundant, especially after submitting a post, leading to hesitation and an expectation of a more streamlined experience.

Lack of clarity about costs in "Skip the line" and the need for visibility into the posting queue and dates

Users relate profile completion to tag application and anticipate its impact on filtering similar profiles, leading to a preference for postponing profile completion for improved viewing

Users prefer a search function over manual category selection on the All Tags screen, encountering difficulty with the Hobbies category. They find the term 'Resources' misleading and suggest using 'Buy' as a more intuitive label for this section

Design iteration ideas

Incorporating Search Functionality

Integrate a text search feature to facilitate smoother tag selection, aiding users in seamlessly finding relevant tags when browsing campus profiles or searching for content within the community feed

Tweaking the flow for tag selection

Offer the choice to bypass the tag addition process when users attempt to explore the community or search for peers on campus, enhancing the ease of navigation and access

Simple Profile Configuration

Distinguish the "Create a Profile" and "Submit a Post" flows by implementing separate user pathways, preventing confusion arising from the repetition of required fields during the information input process.

Final Design

FINAL DESIGN

At this point, Figma became my one true love 

Time to deliver ; Key solutions 

noun-send-message-4628072 1.png

Submitting a Bio

  • Users submit their introduction bios to their university batch's social media pages.
     

  • Users follow a 3-step process, filling in information, selecting photos, and submitting their profile.
     

  • Posts are queued due to platform limitations, and users are provided with an estimated posting day after post confirmation.
     

  • A paid "skip the line" feature is available to expedite the process.

noun-community-1163880 1.png

Community Tab

  • Feed:
     

    • Users can explore posts via a tag-based search system.

    • Users can submit their own posts to the feed.

    • Serves as an informational hub where students can access campus-related information and collaborative student responses.
       

  • People:
     

    • Allows students to search for friends and potential roommates.

    • Searches are based on shared interests, habits, and personal information.

    • Enables direct communication through an inbox.

post.png

Posting to Feed

  • Students can post to the feed by accessing the community tab and clicking "Add post."
     

  • Posts can be customized or chosen from a list of default layouts, which help students include all the required details.
     

  • Posts can be made public or private, with public posts being featured in the community feed for non-university members.
     

  • The goal of the feed is to provide students with an informational resource.

Group.png

Access Profiles

  • Students can view or edit their profile, or view other student profiles through the people finder.
     

  • Profile completion is required to connect with other students on the website.
     

  • Roommate searches can be filtered by shared interests, habits, majors, etc. using the tag selection system in the people finder
     

  • An overview of submitted posts and proof of admission can be found under the "Me" tab.

REFLECTION

Taking a step back, I now know  

Throughout my experience last summer, these were some of the most valuable lessons I learnt - 

Design Systems are a great asset 

Since MeetYourClass did not have an existing design system in place, I learned a lot in terms of what elements a design system needs, and how to develop components and replace things during iterations. Following Brad Frost's atomic design methodology significantly enhanced my comprehension of the concept of components and design systems.

Keeping your user group in mind is very important at every step

Throughout our design process, the primary focus was on ensuring that the interface was easily understandable for students, taking into account their limited attention spans. Often, what seemed clear to us was not necessarily intuitive for our user group, who tended to skip instructions. As a result, continuous iterations and A/B testing were crucial components of our workflow.

8606D8E8-BD7D-43D3-B061-4BC15A08D0C1.JPG
All Projects
InnovateMap
bottom of page