Case Study: Neighbourgood Responsive Website and Mobile App 📲
Case Study: Neighbourgood Responsive Website and Mobile App 📲
Embedded Files
Project Overview
Project Overview
The Product
The Product
A responsive companion website to a dedicated mobile app of the same purpose.
The Duration
The Duration
January 2022-July 2022
The Goal
The Goal
The goal of this project was to create a product that will allow people and entire communities to find suitable locations for parks and other public spaces for various functions.
The Problem
The Problem
The challenge was to create a companion website that was consistent with the look and feel of the dedicated mobile app, as well as adapt to cross platform screen sizes.
My Role
My Role
Lead UX designer, UX researcher, Visual and Interaction designer.
My Responsibility
My Responsibility
Responsibilities include (but not limited to) user research, problem defining, wireframing, prototyping, testing, visual and motion design.
Understanding The User
Understanding The User
User Research
User Research
Summary
Summary
Create a product that allows communities to search and find new park locations and opportunities for outreach. The results will help us to determine what features would make this product more useful and the experience of finding park/outreach opportunity locations from start to finish.
User Research
User Research
Personas
Personas
Ideation
Ideation
Personas
Personas
Problem Statement
Problem Statement
Barb is a retired horticulturalist who would like to find a location that will accommodate her peer groups access to nature and away from the overcrowding and noise of local parks.
Goals
Goals
Find locations that are accessible and fit elderly needs.
Frustrations
Frustrations
Overcrowding, pollution and noise.
Barb ❣️
Barb ❣️
Age: 77
Education: High School
Occupation: Retired horticulturalist
Family: 2 feisty cats 😹
Hometown: Savannah, GA.
Barb is a retired horticulturalist who is currently head of events in her communities assisted living facility. She would like a service that would allow her to search and locate adequate and accessible park spaces for her outdoor peer group activities based on a criteria. Including gardening, fitness and social gatherings.
"The local parks are overcrowded. They do not accommodate elderly visitors. The Traffic and pollution are also dangerous for my groups age." -Barb
Journey Map
Journey Map
Goal: Find open, accessible safe locations for new parks with amenities specific to the elderly community and group.
Problem Statement
Problem Statement
Andres is a community survivalist who needs nature space to educate the community youth because current public spaces do not have the materials needed to teach his skills.
Goals
Goals
Find adequate park locations for survival training and environmental education.
Frustrations
Frustrations
Cannot find suitable locations to give youth hands on education.
Andres 🌳
Andres 🌳
Age: 37
Education: College Grad
Hometown: Salem, Oregon
Family: Girlfriend, 2 dogs
Occupation: Survivalist Trainer
Andres, his girlfriend and dog enjoy being outdoors. As a survivalist and nature educator, Andres enjoys immersing the youth in his community into as much wilderness as possible for better hands on survival training, teaching them about flora and fauna.
“I’d like to give my students in my community a well rounded education in nature, but I can’t find adequate places.” -Andres
Journey Map
Journey Map
Goal: Find locations to that help facilitate nature education and survival for the community's youth.
Ideation 🖼️
Ideation 🖼️
Competitive Audit
Competitive Audit
My process included researching any competitors in the space to find this particular service, how it was implemented and find any missed opportunities. My goals were to review competitor sites UX and find ways to scale and make accessible to the next billion users.
Crazy 8's 🎱
Crazy 8's 🎱
I used crazy 8’s sketching to progressively enhance the elements to include as much relevant information as possible for the format.
Starting the Design
Starting the Design
Digital Wireframes
Digital Wireframes
The idea here is to design a product/service that will allow the user to find adequate open space locations(or potential spaces) after a number of choices are made to get as close to an ideal location as possible(where available).
Low Fidelity(Lo-fi) Prototypes
Low Fidelity(Lo-fi) Prototypes
Mobile Tablet Desktop
Mobile Tablet Desktop
Usability Studies 📃
Usability Studies 📃
Usability Study: Findings
Usability Study: Findings
1
1
Users wanted more amenity options.
2
2
Additional environmental information about the space and location.
3
3
More resources to learn about local zoning.
Refining the Design
Refining the Design
- Mock-ups
- High-Fidelity(HiFi) Prototypes
- Accessibility
Mocks
Mocks
1st, users are introduced to the service and find out it's purpose and features.
1st, users are introduced to the service and find out it's purpose and features.
Before
Before
After
After
2nd, additional known environmental information as added gathered from local databases. This additional info is identified through labeled icons.
2nd, additional known environmental information as added gathered from local databases. This additional info is identified through labeled icons.
Before
Before
After
After
and 3rd, there are additional links to learn more about local zoning.
and 3rd, there are additional links to learn more about local zoning.
Before
Before
After
After
Landscape
Landscape
High Fidelity Prototypes
High Fidelity Prototypes
Accessibility ♿
Accessibility ♿
1
1
Page sections are labeled. As well as general and C.T.A. buttons.
2
2
Labels have been designated and the correct HTML tags for screen readers is implemented.
3
3
I included contextual iconography to improve navigation.
Responsive Design
Responsive Design
- Sitemap(Information Architecture)
- Breakpoints
Breakpoints
Breakpoints
- iPhone 14 Pro
- iPad 12.9"
- 1440 x 1024
Going Forward
Going Forward
- Takeaways
- Next Steps
Takeaways
Takeaways
Impact
Impact
What was learned
What was learned
Updates made to the design after user feedback improved overall usability of the website. Users where able to search and find results that were closer to the results they were expecting from this type of service.
With this product iteration having a larger assortment of options to choose from each category of questions made the service more inclusive for a wider range of public space scenarios. Among those choices are accessibility considerations, amenities etc. were appreciated and gave users more complete and narrow search results when looking for public space locations.
Next Steps
Next Steps
1
1
add additional redesigns based on user Feedback.
2
2
I will add more motion design and micro interactions to engage user focus and signal actions.
3
3
I will include additional accessibility features to make the site more inclusive for people with disabilities.
Thank You 👍
Thank You 👍
Page updated
Google Sites
Report abuse