Course Project 3
Sea the Future App and Responsive Website
UX designer leading the app and responsive website design from conception to delivery
Responsibilities Included:
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs, determining information architecture, and responsive design.
The Problem
There is a lack of knowledge about coral reef deterioration and ocean conservation. I identified the need for an app and website that would provide information and an efficient sign up process for volunteer events.
The Goal
Design a tool that will improve education on the topic of ocean and coral reef conservation and help people easily sign up for local volunteer opportunities.
Creating Personas
User who needs or prefers a dedicated mobile app
Problem Statement
Ryan is a SCUBA instructor and lover of the ocean who needs an easy way to find and sign up for ocean conservation volunteer opportunities because they want to help the community while making friends with like minded individuals.
User who will be accessing the platform from a web browser on a computer, tablet, or similar device
Problem Statement
Ryan is a SCUBA instructor and lover of the ocean who needs an easy way to find and sign up for ocean conservation volunteer opportunities because they want to help the community while making friends with like minded individuals.
Competitive Audit
An audit of a few competitor’s products provided direction on gaps and opportunities to address with the Sea the Future app.
Click here to view the full competitive audit and audit report.
Ideation
I conducted the How Might We ideation exercise to come up with ideas for how to address gaps identified in the competitive audit. My focus was specifically on simple navigation and accessibility features.
How might we optimize Sea the Future website to have strong information architecture so that navigation is easy for users?
How might we decrease clutter while building our website and only include pertinent information for users?
How might we increase inclusivity by including necessary accessibility considerations?
Design
Starting the Design
Digital Wireframes
After ideating and drafting some paper wireframes, I created the initial designs for the Sea the Future app. These designs focused ease of navigation and event visualization.
Low Fidelity Prototype
To prepare for usability testing, I created a low-fidelity prototype that connected the user flow of booking a volunteer event.
Usability Study Findings
These were the main findings after conducting my usability study:
1
Navigation
People found it difficult to see the back button.
2
Location
People wanted an option for viewing location based on their current location.
3
Event Details
People want to see more details about each volunteer event.
Refining the Design
Mockups
Based on the insights from the usability studies, I applied design changes like providing an option to select current location and making the “back” button easier to locate.
Additional design changes included adding an event details and event address to the “Booking Details” summary.
Mockups of main user flow.
High Fidelity Prototype
The high-fidelity prototype followed the same user flow as the low-fidelity prototype, including design changes made after the usability study.
Accessibility Considerations
1
Clear labels for all user flow elements that can be read by screen readers.
2
Used WebAIM for color accessibility considerations with color contrast.
3
Focus on homescreen layout to emphasize user flow starting point.
Refining the Design
Sitemap
With the app designs completed, I started work on designing the responsive website. I used the Sea the Future sitemap to guide the organizational structure of each screen’s design to ensure a cohesive and consistent experience across devices.
Responsive Designs
The designs for screen size variation included mobile, tablet, and desktop. I optimized the designs to fit specific user needs of each device and screen size.
Mobile Website
Tablet Website
Desktop Website
Conclusion
Impact
Our target users shared that the app design offered clear features for signing up for desired volunteer events and an easy way to explore ocean conservation news. One quote from the usability study was that “the function for saving your favorite locations makes it really easy to sign up for events in the future.”
Learnings
I learned that even though the problem I was trying to solve was available through competitor platforms, going through usability studies and the steps of the design process opened my eyes to important features that were not addressed by other similar organizations.
Next Steps
1
Conduct research on how successful the app is in reaching the goal to sign up for local ocean conservation volunteer events.
2
Identify areas of improvements and come up with features based on feedback.
3
Conduct an additional usability study with each of the responsive designs.