NLA Web Archive

Modernising the search experience of Australia’s largest web archive with generative AI

Desktop screens of designs done for the Australian Web Archive, with generative AI features.
Some elements of the design have been censored for non-disclosure reasons
Company
IBM
Role

Workshop planning & facilitation

Heuristic analysis

Secondary research

Wireframing & UI design

Presentation design & delivery

Team

UX/UI Designers (x2)

Technology Engineers (x2)

AI Engineers (x2)

Business Technology Leader (x1)

Solution Architect (x1)

Timeline
May - October 2023

Overview

The Australian Web Archive, hosted by the National Library of Australia (NLA), is one of the largest web archives in the world, containing 16 billion archived Australian webpages. Every year, 3 million curious visitors rely on the Web Archive to access the country’s cultural and historical heritage.

In a 6-week co-creation between NLA and IBM, we designed and built a proof-of-concept solution reimagining how visitors search for content on the Web Archive. Work on the engagement lasted 5 months in total, and was done while I was concurrently on 3-4 other client projects at IBM. During the engagement, I was proud to co-lead several parts of the design process, from discovery to hand-off.

Read more

Protected case study

Hey there! This project is unavailable at the moment. Check back again for more details later. In the meantime, feel free to browse through my other work.
The challenge prompt

My key achievements

Discovery
Research
Ideation
Design
Testing

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

Launch

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

Impact

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.

Problem definition

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

Ideation

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:

  1. Fact checking & flagging assistant
  2. Personalised nutrition recommendations
  3. AI nutritionist chatbot (stretch goal)
Design

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

Submission

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

80%

of students did not visit any O-Week clubs booths in either SummerFest or WinterFest this year

50%

of students spend 10 minutes or more browsing the UMSU Clubs Listing to find a list of all the clubs they want to join

1 in 5

students have never actually bothered to look at the listing at any point in their lives

30%

of students are unsure of where to go if they wanted to find a full list of events a club or organisation has

Analysis

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:

  1. A keen first-year who wants the ‘amazing university experience’ she reads about everywhere
  2. 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.

Sara and Steve’s task flow directions
Ideation

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.

Design

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.

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
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.

Final design

A personalised guide for clubs and events

Components of the final design include high-fidelity screens and an interactive prototype of the mobile app.

What do people think?

“I definitely see myself using this app!”
“I was previously not that interested in clubs, but now everything's all together in one place, it makes me want to actually join and attend those events I signed up for.”
“You need to actually launch this!!”
“I would look through this more than Facebook.”
“I definitely see myself using this app!”
“I was previously not that interested in clubs, but now everything's all together in one place, it makes me want to actually join and attend those events I signed up for.”
“You need to actually launch this!!”
“I would look through this more than Facebook.”
“I definitely see myself using this app!”
“I was previously not that interested in clubs, but now everything's all together in one place, it makes me want to actually join and attend those events I signed up for.”
“You need to actually launch this!!”
“I would look through this more than Facebook.”
“I definitely see myself using this app!”
“I was previously not that interested in clubs, but now everything's all together in one place, it makes me want to actually join and attend those events I signed up for.”
“You need to actually launch this!!”
“I would look through this more than Facebook.”
“I definitely see myself using this app!”
“I was previously not that interested in clubs, but now everything's all together in one place, it makes me want to actually join and attend those events I signed up for.”
“You need to actually launch this!!”
“I would look through this more than Facebook.”

How I would measure the app’s success

# of downloads on the App Store
% of 5-star reviews and positive customer feedback
Increase in number of signups in societies, acquired through the app
Increased signups and overall participation in club events

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.

Theme 1: Riso print
Theme 2: Cut-out collage
Theme 3: Brutalism
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.

Logo development on Illustrator
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.

Logo (black)
Logo (white)

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
Album cover (front)
Album cover (back)
Album sticker
Dance Compilation tour poster
T-shirt and merch collection
Website pages
Instagram story
Email header
Email signature (light)
Email signature (dark)
This pictogram suite is based off the collections of the University of Melbourne, with the icons representing subcategories such as chemistry, medicine, electrical engineering and mechanical engineering. The colour theme is precisely reflective of these disciplines, making the pictograms most applicable in educational contexts, notably in a university setting.
Exploring different pictogram variants on Illustrator
The functionalities of these pictograms can be extended digitally, in the form of animation or similar. Additionally, the theme of the pictograms could easily be replicated to other related aspects of design, like a branding system, or an illustration style.
Development
No items found.

Event graphics

No items found.

Sponsor promotion posts

No items found.

Key learnings & takeaways

Launch

Don’t leave yet! Read another case study ⤸