01.
THE PROJECT
SPARKS Smart Parks was a university project, where I worked in a team of 5 designers of various disciplines.
My role:
• Branding & Identity
• User Research
• UX Design
• UI Design
Softwares used:
• Adobe XD
• Figma
• Adobe XD
• Figma
____________________________________________________________________________________________________________________
02.
THE PROBLEM
By 2026, the Melbourne City Council aims to encourage
and assist in early learning, ensuring positive growth in
child development, and provide facilities and programs
for children and families.
child development, and provide facilities and programs
for children and families.
However,
• Only 8% of kids play outside each day
and about 20% don't get enough daily exercise
• Only 8% of kids play outside each day
and about 20% don't get enough daily exercise
• 77% of children aged 5-14 years did not meet the
required daily 60 minutes of physical activity
required daily 60 minutes of physical activity
• 9 out of 10 children did not meet the recommended
guidelines for both physical and screen-based activity
The Opportunity
To address these issues, the goal is to educate families
guidelines for both physical and screen-based activity
The Opportunity
To address these issues, the goal is to educate families
on the benefits of learning through interactive,
outdoor play for children and encourage families to
seek out playgrounds, particularly adventure
playgrounds in Melbourne.
outdoor play for children and encourage families to
seek out playgrounds, particularly adventure
playgrounds in Melbourne.
What are adventure playgrounds?
• Adventure playgrounds are places where children
can use their imagination, run, climb, jump, create
and play
• Adventure playgrounds are places where children
can use their imagination, run, climb, jump, create
and play
• Adventure playgrounds offer a wide range of play
experiences than the traditional school playground
and can enhance academic learning
experiences than the traditional school playground
and can enhance academic learning
The Task
Create an app that allows users to identify adventure
playgrounds around Melbourne.
Create an app that allows users to identify adventure
playgrounds around Melbourne.
____________________________________________________________________________________________________________________
03.
MY PROCESS
To help with my design decisions, I follow IDEO's
human-centered design methodological process:
human-centered design methodological process:
• Empathise
• Define
• Ideate
• Prototype
• Test
• Define
• Ideate
• Prototype
• Test
____________________________________________________________________________________________________________________
04.
EMPATHISE
Understanding Users
• The primary audience includes families (of which
involves parents or grandparents) who have children
• The primary audience includes families (of which
involves parents or grandparents) who have children
• The secondary audience are childcare or primary
school teachers, responsible for children's learning
school teachers, responsible for children's learning
User Personas
Based on the research conducted, two personas were
created that could potentially use SPARKS Smart Parks.
There were two types of users: parents (fathers or mothers)
and grandparents. They value: outdoor play and learning,
interacting with the environment and technology.
Based on the research conducted, two personas were
created that could potentially use SPARKS Smart Parks.
There were two types of users: parents (fathers or mothers)
and grandparents. They value: outdoor play and learning,
interacting with the environment and technology.
User Persona 1: Gary
User Persona 2: Diane
____________________________________________________________________________________________________________________
05.
DEFINE
Identifying Pain Points
To better understand user needs and user behaviour, it
is important that the experiences throughout their journey is
recorded. This will address the pain points that need to be
considered as I progress with the design process.
To better understand user needs and user behaviour, it
is important that the experiences throughout their journey is
recorded. This will address the pain points that need to be
considered as I progress with the design process.
Storyboards
Storyboards were created to accurately depict a user's
step by step journey interacting with the app. As shown
below, both Gary and Diane find it difficult to search for
information regarding adventure playgrounds. There is a
lack of an online, social media presence. The SPARKS
Smart Parks app aims to deliver design solutions to tackle
user needs and pain points.
Storyboards were created to accurately depict a user's
step by step journey interacting with the app. As shown
below, both Gary and Diane find it difficult to search for
information regarding adventure playgrounds. There is a
lack of an online, social media presence. The SPARKS
Smart Parks app aims to deliver design solutions to tackle
user needs and pain points.
Customer Journey Maps
From the user personas and storyboards, customer journey
maps were created to follow the user's experience of trying
to locate and find information on adventure playgrounds
through a variety of print and digital touchpoints. As identified
below, both users have trouble finding information on
adventure playgrounds on social media, websites and apps.
From the user personas and storyboards, customer journey
maps were created to follow the user's experience of trying
to locate and find information on adventure playgrounds
through a variety of print and digital touchpoints. As identified
below, both users have trouble finding information on
adventure playgrounds on social media, websites and apps.
Gary's Journey
Diane's Journey
____________________________________________________________________________________________________________________
06.
IDEATE
Existing Competitors
Before I begun brainstorming SPARKS Smart Parks' features
and user interface, I researched for existing mobile apps that
offered similar services to help families locate playgrounds.
'Playground Buddy' is an app by Birds Eye Technology that
helps families find playgrounds worldwide. It provides
information on the types of equipment available in each
playground and includes photos and street views.
SPARKS Smart Parks however, aims to help families find
adventure playgrounds in Melbourne. It targets a niche
audience and therefore providing enhanced, detailed
descriptions of each adventure playground. SPARKS Smart
Parks also includes beneficial data for further learning,
local park events and activities for children and adults.
Before I begun brainstorming SPARKS Smart Parks' features
and user interface, I researched for existing mobile apps that
offered similar services to help families locate playgrounds.
'Playground Buddy' is an app by Birds Eye Technology that
helps families find playgrounds worldwide. It provides
information on the types of equipment available in each
playground and includes photos and street views.
SPARKS Smart Parks however, aims to help families find
adventure playgrounds in Melbourne. It targets a niche
audience and therefore providing enhanced, detailed
descriptions of each adventure playground. SPARKS Smart
Parks also includes beneficial data for further learning,
local park events and activities for children and adults.
Existing Competitor: 'Playground Buddy'
Wireframes
Wireframes of potential designs were then sketched to
address the pain points mentioned above. Users had trouble
finding information on parks, therefore I made sure that the
search bar was a prominent feature in every screen. A menu
bar was kept consistent across all designs to ensure seamless
navigation throughout the app but moreover, provide users
with easy access to the functions and features of the app.
Wireframes of potential designs were then sketched to
address the pain points mentioned above. Users had trouble
finding information on parks, therefore I made sure that the
search bar was a prominent feature in every screen. A menu
bar was kept consistent across all designs to ensure seamless
navigation throughout the app but moreover, provide users
with easy access to the functions and features of the app.
Wireframe Sketches
Lo-Fidelity Wireframes
I created a few lo-fidelity wireframes on Adobe XD to get
a sense of the functionality, layout and rough UI design
of the app. These wireframes are helpful to determine
whether to add or subtract features in an interface.
I created a few lo-fidelity wireframes on Adobe XD to get
a sense of the functionality, layout and rough UI design
of the app. These wireframes are helpful to determine
whether to add or subtract features in an interface.
Lo-Fidelity Wireframes on Adobe XD
Branding & Identity
When it came to the brand, the group collectively decided
to name the app, SPARKS Smart Parks. The word, SPARKS
stemmed from combining smart parks into a name. SPARKS
Smart Parks aims to spark learning, spark imagination,
spark growth and spark happiness.
When it came to the brand, the group collectively decided
to name the app, SPARKS Smart Parks. The word, SPARKS
stemmed from combining smart parks into a name. SPARKS
Smart Parks aims to spark learning, spark imagination,
spark growth and spark happiness.
Style Guide
SPARKS Smart Parks' brand expresses a fun, vibrant and
approachable mood. The bright, bold colour palette appeals
to children and parents; which will help stimulate learning. The
typefaces chosen are light, pleasant and inoffensive to the eye.
SPARKS Smart Parks' brand expresses a fun, vibrant and
approachable mood. The bright, bold colour palette appeals
to children and parents; which will help stimulate learning. The
typefaces chosen are light, pleasant and inoffensive to the eye.
SPARKS Smart Parks Branding & Style Guide
____________________________________________________________________________________________________________________
07.
PROTOTYPE
Hi-Fidelity Mockups
The project required a minimum of 10 screens to be produced.
I created hi-fidelity mockups of my proposed solutions on
Adobe XD. These design solutions aim to resolve pain points,
offering users the ease of finding information on adventure
playgrounds. The solutions also support further learning and
include a variety of events and activities for users.
The project required a minimum of 10 screens to be produced.
I created hi-fidelity mockups of my proposed solutions on
Adobe XD. These design solutions aim to resolve pain points,
offering users the ease of finding information on adventure
playgrounds. The solutions also support further learning and
include a variety of events and activities for users.
The Solution
The goal was to educate families on the benefits of learning
through interactive, outdoor play for children and
encourage families to seek out adventure playgrounds
in Melbourne. These goals have been met through:
1. Adding search bar, menu bar and filter features
As mentioned in the pain points, users had a difficult time
finding information about adventure playgrounds on
various digital touchpoints. Incorporating these functions
allows users to tailor their searches to their needs. Readily
available menu buttons and filters will accelerate the process.
2. Interactive, pinned location map
To aid in the exploration of adventure playgrounds, the
interactive map offers users a simple and accessible
method of browsing for nearby parks, furthermore allowing
them to read a quick overview of the playground's features.
3. Relevant, engaging statistical home page
To ensure families are well informed on the benefits of learning
and outdoor play provided by adventure playgrounds, the
home page features important data that offers users the option
to read upon further.
The goal was to educate families on the benefits of learning
through interactive, outdoor play for children and
encourage families to seek out adventure playgrounds
in Melbourne. These goals have been met through:
1. Adding search bar, menu bar and filter features
As mentioned in the pain points, users had a difficult time
finding information about adventure playgrounds on
various digital touchpoints. Incorporating these functions
allows users to tailor their searches to their needs. Readily
available menu buttons and filters will accelerate the process.
2. Interactive, pinned location map
To aid in the exploration of adventure playgrounds, the
interactive map offers users a simple and accessible
method of browsing for nearby parks, furthermore allowing
them to read a quick overview of the playground's features.
3. Relevant, engaging statistical home page
To ensure families are well informed on the benefits of learning
and outdoor play provided by adventure playgrounds, the
home page features important data that offers users the option
to read upon further.
Hi-Fidelity Mockups of SPARKS Smart Parks
Revised Customer Journey Maps
Based on the proposed design solution, I revisited the
storyboards and customer journey maps in the early stages
to make sure my designs addressed user needs and pain
points. It was indicated that users initially had trouble
finding information on adventure playgrounds. By using
the SPARKS Smart Parks app, users are provided with
simplified, accessible functions that support easy
browsing and searching.
Based on the proposed design solution, I revisited the
storyboards and customer journey maps in the early stages
to make sure my designs addressed user needs and pain
points. It was indicated that users initially had trouble
finding information on adventure playgrounds. By using
the SPARKS Smart Parks app, users are provided with
simplified, accessible functions that support easy
browsing and searching.
Gary's Revised Journey
Diane's Revised Journey
____________________________________________________________________________________________________________________
08.
TEST
Testing the Prototype
Unfortunately, as this was a university project and given the
time restraints and pandemic situation at the current moment,
usability testing could not be performed.
Unfortunately, as this was a university project and given the
time restraints and pandemic situation at the current moment,
usability testing could not be performed.
Project Takeaways
If given another opportunity to work on this app further, I
would perform user testing to ensure my design solutions
were feasible and minimised user pain points. I also learnt
the importance of placing the needs of users at the
forefront of my design. It enabled me to keep an open
perspective and inform my decision making with
customer empathy.
If given another opportunity to work on this app further, I
would perform user testing to ensure my design solutions
were feasible and minimised user pain points. I also learnt
the importance of placing the needs of users at the
forefront of my design. It enabled me to keep an open
perspective and inform my decision making with
customer empathy.
_____________________________________________________________________
Visualisations
