As the sole UX UI designer at WildTrack, an AI-based platform for animal conservation, I led the design of the entire platform, with a focus on enhancing the user experience for uploading wildlife footprints. The 'Uploading New Observation' process was a critical but previously lacking in efficient and user-friendly UI/UX components. Through iterative collaboration with engineers and active users, the new design I crafted was integrated into the current platform.
3 weeks(Oct 2023)
· Solely led end-to-end design of the platform interface, starting from scratch by constructing a design system,
· Initiated design iteration and usability testing with engineers.
1 Front-end engineer
1 Project manager
1 Back-end engineer
1 UX UI Designer(Me)
The new design I crafted was integrated into the current platform.
WildTrack, a non-profit, safeguards endangered species using AI with a global network of participants from 12 countries, including scientists, conservationists, eco-tourists. They specialize in Footprint Identification Technology (FIT) to decode footprints, accurately identifying species, individuals, sex, and age.
Traditionally, gathering data on species relied on implanting sensors into animal bodies, posing harm to wildlife. However, with the AI, animal data can now be analyzed while minimizing disturbance and reducing costs. This collected data empowers scientists to identify species decline effectively.
✓ Display all uploaded images all at once using efficient layout
✓ Ensure a consistent uploading images page layout for both Basic and Expert users.
✓ Enable users to add individual comments to each footprint image.
✓ Allow users to leave comments on an entire batch of footprint images.
✓ Inform users of automatic image detection upon upload.
✓ Clearly differentiate the state of location added or edited by users while maintaining consistency.
Images are easy to browse at a glance, enhancing image identification, especially for numerous images.
This layout is currently in use on the platform, making it familiar to users who have adopted this mental model and practice.
Vertical cards may vary in height based on the quantity of comments, potentially causing inconsistency.
Limited vertical space may result in shorter comment sections.
Familiar and commonly used, ensuring ease of user understanding.
Maintains consistent card component design, simplifying development.
Presents difficulties in adapting this shape for mobile views, potentially requiring a distinct mobile version.
Maximizes space utilization, allowing more images on a single page and enabling consistent single-item components.
The table design component can be efficiently reused.
Small image dimensions can make it challenging to discern individual images.
The significant distance between images and comments may hinder image-comment association.
Image skimmability is paramount, especially considering users typically upload 5 to 10 images.
The prior layout has already established a strong user mental model, even if it's not the most efficient option.
Ensuring users provide location information is vital for WildTrack's accurate species identification.
Active users tend to provide batch comments rather than commenting on each image separately.
New users often encounter confusion regarding image location, particularly in discerning whether it signifies where they took the images or where they uploaded them
Create an efficient and uncluttered vertical layout that aligns with the existing mental model.
Establish a hierarchy that accounts for both user preferences and the essential needs of WildTrack.
Users favor batch comments over individual ones. Thus, transforming individual comment placeholders into buttons ensures reflecting users' preference.
For the Type 1 vertical card component, maintaining compact height is critical. Transforming comment input into a button with a modal optimizes space.
Ensuring users provide location information is vital for WildTrack's accurate species identification. By distinguishing the "Add Location" and "Add Comment" buttons, we streamline this process.
To avoid confusion, I aim to ensure that location information is clearer by specifying 'Image location detected'. This way, users can easily understand that it indicates where they took the images, not where they uploaded them.
Expert User
Basic User
The current platform, alongside the newly added features, has been successfully deployed and is now being embraced by 20 wildlife conservationists. We have received commendable feedback regarding the usability of our current platform.
Design guidelines play a pivotal role in streamlining collaboration. They serve as a time-saving tool for developers and enhance the overall efficiency of designers. Most importantly, they foster the development of consistent product designs, aligning the objectives of all stakeholders. This project has instilled in me the habit of creating design guidelines as a fundamental step when embarking on a new project.
Every design detail should have a logical basis. Questions like "How many items will be displayed in the list?" and "We should go for modal for filtering?" warrant thoughtful consideration. Collaboration with developers frequently led to questions like, "What happens when I interact with this UI?" This experience has honed my ability to create intuitive and user-friendly UI designs, moving beyond mere aesthetics.
Crafting WildTrack's Design System and Observation Table UXUI
Maternity planning product for black women
Chronic back pain management application