Crafting WildTrack's Design System and Observation Table UXUI

OVERVIEW

As the sole product designer at WildTrack, an AI-based platform for animal conservation, I undertook the challenge of designing the entire platform from scratch. This included establishing a comprehensive design system and the user experience for sign-up, observation tables, and uploading wildlife footprints. Through iterative collaboration with our engineering team, our team implemented the newly crafted web and mobile application design into the existing platform.

TIMELINE

Jul - Oct 2023

MY ROLE

· Solely led end-to-end design of the platform interface, starting from scratch by constructing a design system,
· Crafted responsive design for web-based and mobile devices.

TEAM

1 Front-end engineer
1 Project manager
1 Back-end engineer
1 UX UI Designer(Me)

ACHEIVEMENT

The new design I created was integrated into the current platform.

PROBLEM 
WildTrack's platform lacked a consistent design system, operating at a basic engineering level, causing inefficiencies arose in the process of uploading and reviewing footprint data.

Goal

Design system

✓ Present information on the platform through establishing intuitive and efficient UI components.

Responsiveness

✓ Ensure responsiveness for both web-based and mobile versions.

Incorporating New Features

✓ Incorporate new features to attract and retain a growing user base.

How might we establish a consistent design system, incorporating new features and enhance UX of uploading and reviewing data across devices?

DESIGN DIRECTION

Observation Page

Developing an appropriate and consistent filter system to efficiently sort a substantial amount of information and ensuring table consistency when adding more table items.
DESIGN SCOPE 1

Filter

I differentiated items with fixed and substantial quantities, enabling users to efficiently search for specific keywords. I also explored methods for users to apply multiple filters simultaneously, enhancing the ease of locating specific items
Filter Item

✓ Fixed number of items
✓ A massive number of items.

Selection Type

✓ Single or Multi-selection
✓ Range selection

Multiple Filtering

✓ Filter Modal
✓ Dropdown on each column

Fixed number of items
Massive number of items
Range selection
Filtering method
DESIGN SCOPE 2

Table

I optimized table layout for efficient use of horizontal space among a large number of items, created a categorized UI, and enabled users to sort the columns they wish to review.
Space Optimization

✓ Display icons only
✓ Utilize badges for categories
✓ Combine two categories
✓ Show default column display with the most frequently reviewed items

Icons only
Badges for categories
Two categories combination
Default column display with the most frequently reviewed items
Final Design

Before

After

DESIGN SYSTEM

WildTrack Design System

I constructed design system for the platform starting from scratch. I grouped frequently used components into variants within Figma, redesigned all the component UI, and assigned the font and grid systems for each Breakpoint.
IMPACT

Integration of Current Platform and New Features: Adoption by 20 Wildlife Conservationists

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.

TAKEAWAY

Significance of Design Guidelines in Collaboration

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.

The Essence of Rationale in Design Decisions

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.

View other works

Uploading Footprint Images

Designing WildTrack's footprint image upload experience

This image will link you to Maternity Care Companion project.

Maternity care companion

Maternity planning product for black women

This image will link you to BeWell project.

BeWell

Chronic back pain management application

Thanks for visiting! If you have any questions, feel free to contact me.
© 2022 Suri(Yeseul) Namkoung
EmailLinkedinInstagram