Designing an MVP for a new-age scavenger hunt app bringing together thousands of new uni students in Melbourne
Overview
Deckle initially started out as a productivity app for university students, helping young people stay motivated by letting them share daily tasks with friends and the community. Deckle’s growing impact on the community caught the attention of the University of Melbourne, who wanted to partner with us to design an experience within Deckle for their beginning-of-semester Orientation Challenge for first-year students.
As a one-person design team in a company of 3, I led and owned the end-to-end product design process of our new app upgrade Deckle Challenges, while collaborating closely with our engineers to develop this release in just 1 month.
The challenge prompt
The problem
The University of Melbourne’s Orientation Challenge is a scavenger-hunt style competition for new students to work on missions together to make new friends, while learning more about the university. However, as it was, the current system for students participating in the Orientation Challenge did not feel social or collaborative. It was long overdue for a migration.
The opportunity
The University engaged us to help build them a custom platform upgrade within Deckle that deeply understood new students, and encapsulated the spirit of the Orientation Challenge. Following the successful launch of the new platform, would be a deal worth over $10k plus an ongoing partnership with UniMelb for the next 3+ years.
My key achievements
- Worked closely with founders to bring an early-stage product vision to life
I was part of a core team of 3 that led and executed on this shift that propelled Deckle from an early idea to a profitable, seed-stage product - Introduced UX processes and activities like research and usability testing
Being the only designer in the company and hence the entire design department, I introduced, advocated for, and educated engineers on best UX practices - Established design system foundations from scratch
I set up Deckle’s first ever design system on Figma, creating 80+ new design tokens and 200+ new UI components. This helped us maintain a cohesive experience throughout the app, and accelerate time to development - Scored a $13k deal and ongoing partnership with UniMelb
The UniMelb Orientation Team were so impressed with our final deliverable, they signed a contract to continue using Deckle for their student orientations for the next 3+ years
Understanding the initial problem
To better understand the context and goals behind our collaboration, we organised an initial discovery meeting with the UniMelb Orientation Team to uncover more about the Orientation Challenge, and pain points currently experienced by participants.
Discovery session
The Orientation Team was previously using a scavenger hunt app, Goosechase, to host the challenge, which they found were not aligning with the goal of the Orientation Challenge. Key issues the team pointed out about Goosechase were:
Participants could not participate in challenges
Challenges could only be joined and done individually. The Orientation Challenge is a group-based activity, and should have a design and structure to facilitate that
Participants could not communicate within the app
There was no way for teammates to discuss about the challenge, which the Team hypothesised were a leading cause of drop-offs and disengagement
There was too much of a focus on competition
Challenges on Goosechase use a points system to track team progress, making the challenge feel more like a competition
Requirements prioritisation
In a deep-dive session with the Orientation Team, we listed out all the rules for the Orientation Challenge, and prioritised them using the MoSCoW method.
Must haves: Core logistics of the Challenge (forming teams, assigning tasks, submissions etc.)
Nice-to-haves: reminders, activity feed, post- Orientation Challenge tasks
Understanding the Orientation Challenge and observing what’s out there
Being quite a niche problem space, we didn’t have much to go off of—as this was also a new experiment for the University. However, I was luckily able to draw upon research as well as my own experience doing the Orientation Challenge, to gain an understanding of what the experience is like.
Competitor research
I researched several products centred around challenges, university life and social networking to help us further understand the problem space, and identify common features that make these products successful.
Defining the new app structure and exploring potential screen flows
Due to the tight time conditions we were under, we had to move into the design exploration phase by Week 2.
User flow
To help me start designing and the engineers set up the back-end system architecture, we workshopped the user flow for an MVP together. The features of our MVP were prioritised based on the initial requirements from the Orientation Team.
Wireframe sketches
I sketched out the look of several key screens based on the user flow we constructed and common design patterns from competitor products. Then shortly after, I went to present these to our engineers to seek their feedback about technical feasibility very early on.
Rapidly iterating from low to high fidelity
After having a clear enough visualisation of the screens on paper, I dived straight into high-fidelity design, wanting to have an interactive, first version of a prototype to show the Orientation Team by Week 3. This included a visual overhaul of the current app, as well as the creation of Deckle’s first ever design system.
Design system
Prior to this project, our Figma files were a mess and there was no cohesive design system in place. The new Challenges UI required a new set of components (for tasks, user displays, challenge thumbnails, etc.) that we didn’t have readily available. Hence, I created 80+ new design tokens and 200+ new UI components in Figma for us to reuse across the app. Key components and their variants are shown below.
High-fidelity wireframes
I worked with our lead developer to review the HTML and CSS as he coded up the app. We checked in for design reviews frequently to spec out any missing states or interactions that were not originally shown in the Figma designs.
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
- Done is better than perfect
Because we were so time-strapped we had to adopt an extra lean mindset to finish what was a ‘must-have’ to make the product functional, without any room for fluff. - Involve engineers in the process early and oftenThis project taught me just how important it was to share designs for feedback early and often. Had I not checked in with our engineers every day, we would never have been able to build and ship this release in as fast as 1 month.
- Little validation is better than none
Although we didn’t get around to structured user testing, I’m glad that we at least spent a few minutes of our day speaking to users. Having generous testers who were very vocal about their opinions helped us get the validation we needed in a tight timeframe. - Most people you work with don’t speak ‘design’—so don’t speak to them like designers
Working closely with stakeholders from non-design and non-technical backgrounds, I learnt how to effectively present my work to people with little to no UX knowledge.
Alice played a critical role in pushing out our Orientation product for the University of Melbourne, within the short turnaround time of a month. She was solely responsible for design and created professional user interfaces whilst ensuring our Figma prototypes were organised and easy for developers to understand.
