Sprout case study

Sprout logo over an illustrated forest and lake landscape

‘How might digital media communicate the regeneration of Te Ara Tukutuku to help people maintain or increase their connection with this place – tāngata (people), whenua (land), and moana (sea)?’

Project
Overview

This was a group project my team created called Sprout, I focused on conducting the background research and developing & testing the website, bringing the platform to life using original artwork from the team.

Problem Statement

Te Ara Tukutuku currently lacks a strong digital presence to effectively communicate its historical, cultural, and environmental significance. The absence of interactive tools and social media engagement limits public access to information and weakens opportunities for meaningful community involvement.

Our solution

An interactive digital ecosystem where users nurture, and grow alongside their virtual plants. Over time, the collective participation gives life to the virtual biome, reflecting the regeneration of Te Ara Tukutuku.

Development of Website

This was the initial website sitemap layout originally planned before creating the initial wireframe prototype. To create a seamless and accessible experience, the idea was planned to be part of the AUDO’s official website.

Initial website sitemap diagram for the Sprout project
Black and white low-fidelity prototype of The Digital Garden

The sitemap was then turned into a b&w prototype due to the branding not implemented. The project was initially called originally called ‘The Digital Garden’ / ‘Plant digger’. The prototype then was used for user testing to identify potential issues and improvements.

Feedback:

High Usability:

  • Participants rated the navigation flow a strong 4/5 to 5/5, finding the core structure and quiz quick and easy to complete.
  • Validated Concept: Users saw strong potential in the core idea, confirming it is highly relevant for a younger audience.

The Friction

  • UX & Layout Gaps: A slow start and minor inconsistencies in button naming caused momentary confusion in the content hierarchy.
  • Low Engagement: The low-fidelity prototype lacked the vibrant colors and visuals needed to capture a younger audience’s attention.

Polish UX Flow:

  • Standardize the navigation names and establish clearer visual hierarchy cues to eliminate layout confusion.
  • Boost Visual Appeal: Inject bright colors, playful illustrations, and an immersive forest-themed setting to make the experience child-friendly.
Mid-fidelity grayscale prototype of The Rito Experience

Post-testing refinements focused on adding imagery and clarifying context as well as a new name ‘Rito Experience’. The Rito Experience was also made to be a separate website due to the amount of clutter it would have if it were to be integrated with AUDO’s website.

Main changes were that imagery and layout adjustments was added from the group for more of a approachable-friendly vibe for parents and children.

However due to limited time and an overly ambitious initial scope (including both the quiz and educational features + additional works for the project), further layout adjustments would be the focus on the website to ensure a more seamless, user-centric experience while the quiz will be made separately.

Mid-fidelity quiz selection screen
Mid-fidelity education page with species gallery

Quiz & Education

Now that a clear outline of the website has been made, it was now turned into a high fidelity prototype introducing colours and a better user experience.

High-fidelity Sprout design — before

Before

High-fidelity Sprout design — after

After

As we further developed the project, the project name was changed again to Sprout since we wanted a approachable, friendly design for parents and children.

Main changes to the Hi-Fi prototype compared to the previous, is that the layout was made to be a simple scrolling experience for parents and children. A lot of the texts have been cleaned up and made shorter. Important information was made and clearly defined into a short and quick flow. (Overview → explainer video → events)

Layout via grids, adding Sprout’s colours and the digital forest into the website was also a big change made to the website.

The layout & aesthetics were identified, but additional design such as adding the artworks and a section for a Te Ara Tukutuku map will be implemented.

Finally, this is the completed website of Sprout. More imagery and branding was added and a stylised digital forest was also added to fit with our aesthetics.

In this website the addition of the map overview was also created as well as shortening and adjustments to the layout for much better user experience.

Sprout website on a laptop outdoors
Person holding a phone showing the Sprout plant care screen
Sprout illustrated forest viewed through a green shipping container

Team Info

  • Team Leader/Motion

    Saige Moss

    • Illustration/drawing/animation
    • Concept Development
    • Photography
    • Branding/ Design

  • Producer/Interactive

    Eric Hwang

    • Research/user testing
    • Coding/Hi-fi development
    • Ui design

  • Scribe/Graphic

    Holly Wang

    • Research
    • Digital painting
    • Moodboards

  • Scribe/Motion

    Tumai

    • Storyboard artist/ scripts.
    • 2D motion design

  • Producer/Interactive

    Patrick Ng

    • Coding HTML, JavaScript
    • User Journey
    • Illustration

Reflection

Working within a multidisciplinary team of five on Sprout was an invaluable experience in collaborative design and agile communication. Beyond teamwork, the project reinforced the importance of in UX; accepting constructive criticism from both industry lecturers and user testing allowed us to strip away personal biases and iterate purely for the user’s benefit.