Role
UI Designer, UX Designer, UX researcher
Project Type
Website Redesign
Timeline
6 weeks
Tools & Skills
Procreate, Figma, Website Design, Design to Development Hand Off
Project Overview
Mangrove Monitoring is a long term project under the research group Engineers for Exploration that focuses on the conservation of Mangrove trees using “drone and satellite imagery to quantify mangrove species and extent in Baja California” (E4E).
I joined the team as a UI/UX Designer in order to redesign their website.
The World of Mangroves
The Mangrove Monitoring group collaborates with Scripps Institution of Oceanography to study and conserve mangroves in Baja California. Using drones, satellite imagery, and machine learning, they map mangrove distribution, quantify biomass, and monitor environmental changes that may impact the mangrove trees. Their innovations support local conservation efforts and equip park rangers with tools for effective ecosystem management.
I was recruited to be the UI UX designer by the Mangrove Monitoring team as they prepared the launch of their website, which was going to act as a research aid for mangrove conservation researchers.
I chose to take on the project because of…
My unfamiliarity with the subject matter: I had little knowledge of conservation practices, nor was I a computer scientist or engineer. But this was what I wanted: a challenge. One of my biggest career goals is to become a designer that can design for anyone. The critical empathy required to think in the perspective of drastically contrasting users was a skill I knew I needed to acquire in my road to becoming a senior designer.
Opportunity for design to development handoff: Joining the Mangrove Monitoring team meant that I'd get to work with front and back-end developers to transform my prototype into a functioning website, which is exactly what I needed more experience in.
Solid Data, Shaky Design
The website was intended to be used by researchers to upload satellite and drone imagery to surveillance, record, and share the conservation process of the mangroves.
However, their current website design wasn’t up to the mark—it was hard to navigate, visually unappealing, and just not practical for researchers.
The team emphasized the need for a redesign that looked better and, more importantly, was user-friendly and functional for researchers to access and use the site’s resources.
Becoming Mangrove Monitoring's Design Team.
As the sole designer for this project, I was responsible for all aspects of communication and decision-making related to the design process. This meant I was conducting research, getting user feedback, and crafting and implementing the final design solutions.
My goal was to enhance the website’s usability by making design decisions specifically tailored to the needs of mangrove researchers and engineers.
This project focused on delivering solutions for a niche crowd of core users rather than a diverse audience, which warranted a shift in my usual thought process as a designer.
Understanding Researchers
Identifying Researcher Needs: I had the opportunity to speak with the Mangrove Monitoring team members, who shared valuable insights into the researchers' needs throughout their research process.
After back and forth discussion about the researchers' relation to the website, we created a requirements document, listing out the pages and features that needed to be designed to successfully aid researchers. I added post it notes as we communicated on any design/development restrictions and clarified any confusion.
Findings included:
Priority: The most important page = visualization page: as Mangrove Monitoring had researchers scanning conservation sites to monitor mangrove trees, they needed a way to browse and search for locations on a map easily
Access: some pages could only be accessed after logging in (visualization & profile page) >> enforcing varying accessibility through design was crucial
Main Purpose: This website is a professional resource to aid research >> it has to serve that purpose through design (going back to my goal as the designer)
My thought process was focused on what this would mean in design form
User Persona: After the lengthy discussions with the team, I was able to establish a user persona for the website. It's noticeably more specific than a typical user persona, which goes back to my goal of delivering solutions for the niche crowd that is mangrove conservation researchers.
Task Flows: With a clear vision of the target users, I crafted task flows for each page on the website. I made sure to account for limited accessibility (i.e. Visualization and Profile pages only allowed logged in users to enter) along with all the features discussed with the team.
The Visualization page task flow is noticeably bigger than the other flows, which makes sense as it is the most important page for researchers.
Early Ideation
Low Fidelity Wireframe: I did some quick wireframing to visualize the basic layout and structure of the website. This helped me organize the website's key elements before moving on to more detailed iterations.
At this point, my vision was:
Home: to have a big mangrove tree in the background
About Us (meet the team): carousel of team profiles along with filter tags for the different positions (eg: team lead, back end developer, etc.)
Visualization: sidebar menu with 4 main options (upload, classify, view history, basemap) along with a color picker for different places on the map
Profile: simple editable profile information (profile picture and name) & list of saved classifications from the visualizations page
User Testing:
As I developed the lo-fi wireframe, I conducted user testing with the Mangrove Monitoring team, as they were the most knowledgeable individuals when it came to this project aside from the researchers themselves.
The user testing was slightly unconventional, as I would moreso showcase my progress and iterations to the entire team, who would then give me feedback based on their expertise and knowledge of the project.
I decided this would be more productive than conducting user tests on non-affiliated users, as most of the website's features required context and understanding of project-specific key words/tools.
Iterations, Feedback and Improvements:
Visualization Page:
Home Page:
Final Solution (Prototype)
After I got the okay from my team, I began developing the high fidelity prototype.
Moodboard:
I made an initial moodboard with interface design examples that matched the theme of nature, conservation, and professionalism. Then, I got feedback from my team on which designs they liked best.
Based on the feedback, I landed on two design styles: realistic design and flat design. I then created moodboards for both to reach the final consensus of implementing a minimalistic, flat design.
Component Library:
I gathered all components into a library, including the variants of different components (eg: unopened ver and expanded ver of profile card)
Prototype:
The team was very satisfied with the final prototype, especially for it being completed in 6 weeks. They pointed out the minimalism and clarity, which is what they wanted for the website. Seeing my team/clients satisfied with my work was an incredibly rewarding and relieving experience.
About Us:
Visualization:
Next Steps & Learnings
This project having been my first solo project, I learned a lot during the 6 weeks. Here are some key takeaways:
Design to development handoff: For the visualization page, I rounded the corners of the map to match the visual elements of the website. However, the team told me that this design choice may be difficult to code. The constructive feedback made me realize my gap of knowledge in development, as I didn’t realize that something like the curvature of objects impacted the difficulty of development. This encounter inspired me to learn more about computer science in order to become a designer that can understand the developers’ point of view better.
Exclusivity isn’t always a bad thing: As a designer, I’ve always felt some pressure to make everything as accessible and inclusive as possible, worrying about leaving anyone out. But this project taught me something important—sometimes, you have to focus on a specific audience to create the best possible product for them. By designing specifically for the researchers, I was able to deliver something that truly met their needs, even if it meant intentionally narrowing the focus.
