Natura Connecting with Nature Platform
Natura is a cross-platform-designed tool (native app and responsive website) that helps urban residents more easily connect with nature.
Overview
The Problem
Urban residents have limited options to enjoy uncrowded, outdoor spaces. They live busy lives with most activities are centered around events in the city.
The Goal
Design a tool that can help urban residents learn about the benefits of connecting with nature, ways to do it, and how it contributes to community and social good.
My Role
UX designer designing the app and website from conception to delivery.
Responsibilities
Planning, scheduling, conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
Understanding the User
Summary
5 users were interviewed through a series of questions aimed at understanding when, where, and how they would seek information about connecting with nature. Also of interest was how they feel about using technology tools as a part of that experience. I had assumed most users would prefer to leave devices aside while being in nature, though learned that users preferences varied.
In general, users would be very open to using a an app or website to learn how to connect with nature, the benefits, and ways to do it. They prefer to have a simple and efficient learning process so they can sped their limited time actually being in nature.
Pain Points
1
Don't Know Where to Go
City life is often centered on things in and around the city. It takes time and extra effort to learn where to go to really enjoy nature.
2
Unaware of Benefits
Not really sure that the time spent would be worth it vs. other activities that are more familiar and routine.
3
Don't Know What to Do
Without many resources available, confused as to where to start, then what to do once out there.
4
Have Limited Time
Life is really busy and fast-paced, so beyond having limited time to learn, also have limited time to actually spend out in nature.
Who is our core user?
Amerie
Henry
Problem Statements
Amerie is a teacher who needs an efficient way to learn about connecting with nature while on the go
because she should like to spend some of her free time there enjoying its benefits.
Henry is a busy father and full-time electrician who needs concise and helpful information about the benefits of connecting with nature because he wants to spend some of his limited family time there.
User Journey Maps
A journey map was made for each representative persona; one for a user who prefers a native app, and one for a user who prefers a desktop website experience.
Sitemap
The information architecture helped to develop the content structure of the app, and inform some initial ideas as to how different areas of content can be organized within the interface.
Starting the Design - App
Crazy 8's - App
The Crazy 8’s ideation technique made it fast and fun to explore some options for laying out the Home screen. From here, more thoughtful paper wireframes could be sketched.
What is essential to their journey?
Paper Wireframes - App
These paper wireframes were drawn to explore different ways the Home screen could be laid out. Favorite elements were starred, and informed design of the digital wireframes to come next.
Digital Wireframes - App
Creating the digital wireframes in Figma allowed for expressing an initial set of screen layouts that could be built into a prototype and then tested with users for further input on their usability.
Each of the main screens that are part of the user flow “happy path” were laid out, to support efficient and realistic user testing of the core functionality of the app.
Low-Fidelity Prototype - App
Users wanted a quick and easy way to learn about ways to connect in nature. This prototype allows them to simulate the flow of learning, then selecting activities they would like to experience based on what they learned.
What did users really want?
Findings - App
1
Add a Get-Started Section
Provide a place to learn about the background of the tool and first-step for use.
2
Increase Text Size
Increase font sizes for easier readability.
3
Increase Nav Menu Size
Make the icons easier to see.
Refining the Design - App
Mockups - App
The mockups introduced the visual identity, elaborating on the structure defined in the wireframes and low fidelity prototype. Users were generally able to more quickly and happily navigate key flows in the iteration after the usability study.
Before Usability Study
After Usability Study
Before Usability Study
After Usability Study
Mockup Layouts
High-Fidelity Prototype - App
Users wanted larger icons and text which were reflected in an iteration based on the usability study that was used as the basis for the mockups and hi-fi prototype.
Accessibility Considerations - App
1
Images
Large images are used to help those with limited vision to more easily see the content.
2
Color
An accessible color palette is used to help ensure that those with related vision disabilities are able to see the content.
3
Buttons
Call-to-action buttons have iconography along with written copy, to help those unfamiliar with the language to still have some understanding of the button function.
Starting the Design - Web
Crazy 8's - Web
Similar to the approach when designing the native mobile app, the Crazy 8’s ideation technique made it fast and fun to explore some options for laying out the responsive website screens.
Paper Wireframes - Web
Based on insights from user research, a goal was to present information in a clean and easy-to-navigate interface. Desktop wireframes helped explore options for page layout and structure.
Digital Wireframes - Web
Creating the digital wireframes in Figma allowed for expressing an initial set of mobile website screen layouts that could be built into a prototype and then tested with users for further input on their usability.
Digital Wireframes - Web Variations
Creating the same website in a desktop scale allowed for the progressive enhancement of key elements of the user flow from the mobile design.
Low-Fidelity Prototype - Web
Desktop users prefer to do research and learn about activities while home, then go out and do them. With the larger screen area, the prototype demonstrates the larger visual elements and flow between key screens.
Refining the Design - Web
Mockups - Web
Originals from Mobile
Desktop Size Variations
High-Fidelity Prototype - Web
The desktop prototype provides a view into how the larger screen size affords for additional visual and textual cues that can benefit the users who prefer and use larger device sizes.
Accessibility Considerations - Web
1
Images
Large images are used to help those with limited vision to more easily see the content.
2
Color
An accessible color palette is used to help ensure that those with related vision disabilities are able to see the content.
3
Buttons
Call-to-action buttons have iconography along with written copy, to help those unfamiliar with the language to still have some understanding of the button function.
Summary and Next Steps
Impact
The Natura tool introduces a quick and easy way for urban residents to learn about ways they can connect with nature for social good. Activities provide them choices for what might work best for and near them, and the ability to save activity choices to a list makes it easy to quickly refer to it and then go and use their limited time to connect with nature and enjoy its benefits.
What I Learned
While designing the Natura tool for connecting with nature, I learned that a wide variety of users, each with differing sets of needs, can benefit from using the same tool. Thus, it’s important for designers to account for as many of those users as possible by including a diverse user representation for all interviews and usability studies.
Next Step 1
Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.
Next Step 2
Conduct more user research to determine what additional website features might be useful for online art buying customers.