The Problem

Florida’s mangroves are at risk of endangerment and education resources on how to protect them are not always accessible.

My Solution

Design a multi-platform site that will raise awareness for Florida’s protected plant species while also creating a unique learning experience.

Research

Before developing the interview questions I predicted some participants would feel a personal connection towards learning about the mangroves. Most interview participants had general knowledge about the mangroves but were unaware of the threats to the plant’s survival. They were however concerned for the future of Florida’s natural wildlife. The feedback I received from the research showed that many cared about protecting these plants and were curious and open to learning more about them and how to protect them given there is an accessible tool provided to guide them.

Personas

Digital Wireframes

Following the ideation process I drafted various paper wireframes which I then converted into digital wireframes. This design focuses on engaging the user in curiosity and leads towards more hands-on learning.

Low-fidelity Prototype

I created a low-fidelity prototype that connected the user flow of exploring the information provided within the app.

Usability Study

Mockups

From the insights provided by the usability study, I incorporated design changes such as stating the purpose of the app on the welcome screen.

In addition, design changes were made to the colors of the buttons to guide the user flow and distinguish similar options from different ones.

High-fidelity Prototype

The high-fidelity prototype follows a similar flow as the low-fidelity prototype, as well as design updates made following the usability study.

Accessibility Considerations

Sitemap

After completing designs for the app I began to plan out the layout for a responsive website. I used the mangrove life sitemap to guide me in assembling the structure of each screen design and to maintain consistency across devices.

Responsive Design

The screen size variations include mobile and desktop. I reformed the designs to ensure the user’s needs would be upheld for each screen size and device.

Next Steps

Impact

Users expressed how the site made them feel motivated to spend more time outdoors and learn about native plant life. Others shared how they enjoyed the convenience of an app or website as a learning tool.

What I Learned

I learned the problem I was trying to solve took on many forms and was overwhelming at times because of how broad it could be. Going through each step of the design process I found myself having to redefine my goals and get more specific so I could be more in alignment with users’ needs. Also reframing my focus back to the user really helped me come up with solutions that were attainable and useful.