Creating an interactive way for students to discover clubs and events during Covid-19 lockdowns
Overview
Clubs and societies have always been one of the best ways for students to make the most out of their university experience—yet I found it disheartening that very few students actively engage in them.
While on a mission to teach myself UX and product design for the first time in my life, I set out to solve this problem through a case study aiming to provide my peers a more engaging way to navigate and interact with clubs and societies in an online environment.
The challenge prompt
My key achievements
Noticing low student engagement
What sparked my inspiration for the problem initially was the concerning number of posts I had seen, and am still seeing on my Facebook and Reddit feed, about students feeling hopeless about their social life at university.
Common pain points students expressed were:
- Not being able to make friends, and
- Lack of knowledge on how to get involved in clubs and societies
Investigating the University’s current systems
To gain further insight into the problem, I conducted an audit of the current UMSU clubs listing website, followed by surveys and 1:1 interviews with end-users.
Website audit
Key issues with the current listing page:
- Extremely long and overwhelming list of clubs
- The default alphabetical sorting order is unhelpful
- Lack of information about each club on the main page
- Severe lack of personalisation and customisation
Surveys
I also surveyed 44 current UniMelb students, 31.8% of whom are first-years, about their clubs and societies experience this year.
Validating the most critical parts of the experience before launch
Up until this stage, we hadn’t had any sort of user validation on our prototype. I ideally would’ve liked to do in-depth walkthroughs with UniMelb students to observe how they’d navigate flows in the Challenge. However, due to time constraints, we opted for guerrilla testing with friends and random students we came across at Melbourne Connect.
Usability testing
I moderated 3 10-minute testing sessions with 3 current UniMelb students to assess task completion, as well as identify any jarring issues that could cause drop-offs and disengagement.
Confusing links on bottom menu nav
→ Changed link icon and copy from “Challenge” to “Community”
Not enough visibility for tasks, hard to find a way to revisit them
→ Added Orientation tasks to users’ main Deckle feed
→ Added banners notifying if a user got assigned a task
The ‘randomly assign’ function was confusing to understand
→ Cleared default selection
→ Redirected back to the previous screen with banner saying who was assigned
High-fidelity prototype
Prototypes of the 8 main flows, including views for both participants and organisers, are shown below.
Creating the challenge
Challenge organisers (the Orientation Team) set up the challenge for participants. They can customise the look of the challenge page before officially publishing it
Creating tasks
Organisers populate the challenge with tasks. Tasks can be posted immediately, or scheduled for release at a later time
Posting announcements
Organisers update participants about the challenge by posting announcements, which participants can view
Joining the challenge
Once started, participants join the challenge with a pre-existing group, or form a group by selecting friends or other Deckle users
Using the team chat
Participants in the same team can chat about the challenge and message each other directly
Assigning tasks
Participants can assign tasks to either themselves or someone else
Editing and submitting tasks
When ready, participants submit their own tasks in the required text or media format
Reviewing submissions
Organisers can view the public feed of submissions. To keep the community safe, organisers can remove posts that are inappropriate
Launching the new app update to up to hundreds of incoming students...
We released Deckle version 1.14 on the App Store and Google Play Stores on Sunday July 10th, the weekend before UniMelb Orientation Week. We saw...
100+
Downloads on Orientation Day
Just under 200 students downloaded the app and began using the new ‘Challenges’ experience
$13k
Won deal with UniMelb
We received overwhelmingly positive feedback from students and the Orientation Team, who signed a contract with Deckle for the next 6 university semesters
#80
Social Networking app
Deckle ranked No. 80 on the App Store in the ‘Social Networking’ category, 2 weeks following the Orientation Challenge launch
3,000+ students, employees and companies love Deckle
Deckle’s user base grew by 30x a year following our first release of Challenges. Today, thousands of UniMelb students are using Deckle Challenges to make lasting friendships, while familiarising themselves with their new campus. 200+ organisations from all over the world are using Deckle for university orientations, scavenger hunts, and employee team-building activities.
The app has evolved drastically from where it first started, and I’m proud to have been part of the beginning of Deckle’s pivot, from a simple to-do list app to a successful end-to-end, global platform for event games.
Read about how organisations are using Deckle Challenges today ⤸
The University of Melbourne partnered with Deckle for its third Orientation Challenge event in July 2022, engaging 500+ active participants per event.
Deckle co-hosted the UniMelb Student Services Team at a student wellbeing conference, where 100+ staff gathered to complete fun tasks around the Melbourne Zoo.
Deckle brought to life an office Christmas party for employees at SoFi Technologies through a Christmas-themed Incredible Race.
Defining our problem and pain points to solve for
Combining the insights from our independent research, we came up with 3 main user pain points and a single problem statement outlining the problem we planned to tackle.
Abundance of conflicting information
It’s time-consuming and mentally challenging for consumers to filter through information from various sources and mediums to determine what’s genuine
Unclear credibility of sources
Without clear credibility indicators, it’s difficult for consumers to determine what information sources are reputable, based on their personal judgement
Unknown personal health compatibility
Even when presented with the facts, consumers are confused about whether a product would suit their own dietary needs and preferences
Problem statement
How might we leverage the power of AI to mitigate misinformation and disinformation around health foods so that consumers can make better informed choices about their health?
What would success look like?
Faster fact-checking, in as fast as a few seconds
Consumers can expect easy and quick identification on validity of health claims, saving them hours of manual research, or days waiting for confirmation from authorities
Consistently high % of accurate classifications and recommendations
The solution should produce consistently accurate fact-checks, and recommendations closely aligned with the user’s health goals
Increased consumer trust and empowerment
Positive feedback from consumers can help validate AI-generated assessments are trustworthy, and can empower them to make better purchasing decisions
Increase in reports of improving health and reduction in reports of declining health
We can expect consumers using the tool to consume healthier products, and conversely, avoid unhealthy products, by monitoring their personal health data
Ideating on our researched pain points
Our second week was dedicated to brainstorming solution approaches.
Ideation workshop
I prepared an ideation workshop for the team. For our identified user groups and pain points, we brainstormed:
- Potential solutions and AI capabilities
- Value to the end-user and businesses
- How closely it follows the challenge prompt
Feature selection
After a round of voting, we shortlisted the following 3 ideas based on their potential real-world impact and alignment with the challenge prompt:
- Fact checking & flagging assistant
- Personalised nutrition recommendations
- AI nutritionist chatbot (stretch goal)
Piecing our ideas together for the final product
User flow
I mapped out the journey a consumer currently takes to verify an online health claim, based on the process interviewees described in our user research. I then mapped out the ‘to-be’ flow of a simplified experience for the team, combining the features we agreed upon.
High-fidelity prototype
As the clock was ticking, we had to move onto prototyping in high-fidelity. My teammate and I worked together to design 3 main flows within a 3-day prototyping sprint.
Inputting information source
Consumers upload an image of a screenshot or paste in a link to an information source for fact-checking
Checking claim accuracy
Consumers receive a clear, numerical breakdown of the accuracy of the health claim, with options to report the claim and read more information from reputable sources
Checking health compatibility
Consumers can find out how well the product from the claim suits their diet, and what healthier alternatives there are that better align with their health goals
Pitching our solution to IBM design executives
We worked together with the rest of the team to create our submission video pitching our solution to a panel of judges consisting of VPs, distinguished designers and practice leads, from IBM and Adobe.
Summary of key issues
of students did not visit any O-Week clubs booths in either SummerFest or WinterFest this year
of students spend 10 minutes or more browsing the UMSU Clubs Listing to find a list of all the clubs they want to join
students have never actually bothered to look at the listing at any point in their lives
of students are unsure of where to go if they wanted to find a full list of events a club or organisation has
Synthesising survey data into personas and journeys
From first-years to seasoned postgraduate students, an overwhelming majority have attributed their lack of engagement in clubs and societies this year to either COVID-19, or simply not interested in clubs and/or events, indicating that the current systems promoted by UMSU are not effectively reaching people.
Personas
To encapsulate these common concerns from students in different stages of their university journey, I created personas representing the two typical students you would find if you attended UniMelb:
- A keen first-year who wants the ‘amazing university experience’ she reads about everywhere
- A final-year Masters student looking to surround himself with a valuable network of people
Task flows
I mapped out a task flow of how the two different personas would explore the available clubs and societies at uni.
Designing a better way to discover clubs and events
Feature ideation
I brainstormed different ways to help bridge the gap between students’ interests and clubs:
- A recommendation system
- A buddy system
- Personal clubs and events management
- Rewards
User journey
I created a user journey exploring 3 out of 4 of the proposed features above, helping me identify the necessary UI touchpoints for each portion of the experience.
Wireframe sketches
At this stage I sketched out different layouts, focusing mainly on the recommendation system and the ability for users to manage their own clubs and events.
Prototyping the proposed features
I started with a low-fidelity prototype of the app for testing, to help validate the solution early on.
Usability testing
As part of testing, 3 current UniMelb students were each asked to complete a series of usability tasks over 30-minute moderated Zoom sessions.
.webp)
Iteration 1
- Users tend to be uninterested in the club description, and would prefer to be shown events, cost of membership, and the link to sign up
- Users wanted the ‘Register’ button to be towards the top
- The ‘My Events’ page was used more frequently than expected, which led to users being annoyed that it was so hidden away
- The ‘Browse more’ button was less intuitive than expected, with all interviewees mentioning that they were confused by its sudden appearance
.webp)
Iteration 2
- Users tend to be uninterested in the club description, and would prefer to be shown events, cost of membership, and the link to sign up
- Users wanted the ‘Register’ button to be towards the top
- The ‘My Events’ page was used more frequently than expected, which led to users being annoyed that it was so hidden away
- The ‘Browse more’ button was less intuitive than expected, with all interviewees mentioning that they were confused by its sudden appearance
Mid-fidelity prototype
I took inspiration for the app’s visual design from UMSU’s current branding.
A personalised guide for clubs and events
Components of the final design include high-fidelity screens and an interactive prototype of the mobile app.
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
What do people think?
How I would measure the app’s success
Ideation
Researching and exploring different visual directions.
Mood boards
I began my design process thinking about what qualities I envisioned Haiku Hands to embrace. I was fascinated by recent design trends that had an experimential, energetic and rebellious feel, and revolved my inspiration for the brand's visual aesthetic around 3 different mood boards.
Stylescapes
Synthesising the 3 different themes, I developed 3 stylescapes for each of the mood boards, imagining the overall aesthetic in the context of Haiku Hands.
development
Developing brand assets for the chosen visual direction.
After receiving feedback from my tutors that the brutalist themed stylescape perfectly captured Haiku Hands’ rebellious yet whimsical and nonsensical personality, I went on to produce concept sketches for the main logo as well as ideas for brand assets.
Logo
In conceptualising the logo, I based my sketches off symbols in the brutalist style—graffiti and gang-like symbols.
Album art
The art style of the band’s previous album artwork is carried onto the rebrand, with the consideration of new colour palette comprised of energetic, disco-party tones.
Photography
The following were made by spray-painting over a series of paper-printed photographs of the band. After that, the scans were uploaded to Photoshop where I changed the colours of highlights and shadows to mimic a risograph effect.
final design
An experimental, progressive identity for Haiku Hands.
The new logo draws on the deep-rooted teamwork that drives the the Haiku Hands trio to produce artwork together. The logo mark signifies earnesty, inspiration, experimentation, and progressiveness. This is echoed across the rest of the brand identity in the form of rave-inspired colours, and bold and bright splashes of spray paint.
mock-ups
Applying the new brand identity across media.
The brand had requested that designs be made for:
- Cover art for their new album Dance Compilation
- Dance Compilation tour poster
- Merchandise
- Website
- Email signature
.webp)
.webp)
%20PNG.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
Event graphics
Sponsor promotion posts
Key learnings & takeaways
- Always challenge your assumptions
Yes it’s a cliché but it’s true. Never assume what users think, or how they interact with your design—when possible, always validate your prototypes by testing! - Priorities over perfection
You cannot solve every problem users mention about. Good product design is about making tradeoffs and finding the best compromise between costs, feasibility and impact.
Don’t leave yet! Read another case study ⤸
