RESEARCH, PROTOTYPING AND TESTING | 2023 | STUDIO PROJECT
Re-Designing the way incoming students connect with their peers
DURATION
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 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
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.
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
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
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
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
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.
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
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.
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
At this point, Figma became my one true love
Time to deliver ; Key solutions
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.
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.
-
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.
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.
