Redesigning WildTrack's mobile application

OVERVIEW

WildTrack’s mobile application is crucial for researchers and conservationists, enabling the collection of animal footprint images for environmental challenge data.
Originally designed in 2022 at a basic engineering level, WildTrack's mobile application faced usability challenges due to outdated architecture and performance issues.
As the sole designer, I led efforts to enhance the app, focusing on addressing user pain points related to UI, such as capturing animal footprints, managing observation files, and ensuring consistency with WildTrack’s platform interface.

TIMELINE

6 weeks(Feb - Mar 2024)

MY ROLE

· Solely led end-to-end design of the mobile interface, starting from scratch by constructing a design system,
· Initiated design iteration and usability testing with engineers.

TEAM

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

ACHEIVEMENT

The new design I crafted was integrated into the current mobile application.

INTRODUCTION 

WildTrack's mobile app

Researchers and scientists rely on WildTrack's mobile application to collect images of wildlife footprints. Each observation uploaded includes either single or multiple footprint images, along with detailed information and comments for each image.

SITUATION 
Major usability issues and feature flaws resulted in complaints and a decrease in App's engagement.

The mobile application of WildTrack was not user-friendly, causing inefficiencies to users in taking pictures of wildlife's footprints. Additionally, the app's design is not consistent with the platform interface.

PROBLEM STATEMENT

How can we improve the usability of the mobile app while seamlessly integrating new features and maintaining consistency with the platform interface?

Solution

Home

🔺 Before

Critical features are buried with rarely used features in hamburger menu. The bottom nav bar is over used.

✅ After

Reprioritized features in hamburger menu onto the bottom nav bar.
Added a prominent Call-to-action button - New(add new observation).
Integrate less important features into user profile area.

Capture footprint pictures

🔺 Before

It was hard to identify the functions of UIs(GPS signal detection).
There are no indicators to show users their current step.

✅ After

Provided users with information on the strength of their GPS signal with latitude and longitude.
Specify the steps based on user's behavior, which vary between devices.

Edit footprint pictures and enter image details

🔺 Before

There's no clear button to view taken images; users must use the back button on the top navigation bar.
UI elements disturb users to focus solely on taking pictures.

✅ After

Provided immediate image previews after capture.
Made a two-step process to maximize the image display area.
Utilized black color to differentiate images from UI elements and bury floating buttons in a black area.

Enter observation details

🔺 Before

Not consistent design components with the platform interface.

✅ After

Maintain consistent design component styles across the platform interface.
Prioritize mobile-friendly buttons for finger reachability.

View observations & Observation details

🔺 Before

Displaying all images taken in one observation overloads the system and triggers technical issues.
Users are unable to view the details of each image they input.

✅ After

Provided one image preview with the number of images taken for one observation
Distinguish between the information contained in observations and individual images.
FRAMING PROBLEM
Four main UX issues
Unintuitive UI‍
Confusing User Flow
Disordered Hierarchy
Mobile Optimization
PROBLEM DETAILS

1. Home

Requirement

•Prioritize User Input for New Observation

2. Capture Footprint Pictures

Requirement

•Provide users with information on the strength of their GPS signal with latitude and longitude.
•Design an interface that allows users to focus solely on taking pictures.

3. Enter Observation Details

Requirement

•Ensure consistency with the platform interface - Split and specify each step on the mobile application

4. My Observation and Observation Detail

Requirement

•Enhance and optimize UI specifically tailored for mobile application usage.
•Integrate a map view in the observation detail to illustrate image locations.
ITERATION

Capturing footprint images

Enter Observation Details

Saved Observation & Observation Details

FINAL DESIGN
Original Design
Redesign
IMPACT

Current Platform Implementation & Positive Feedback from CEO and Engineers

Notably, the positive feedback received from both the CEO and engineers marked the project's success. The current platform seamlessly embraced the new design I crafted, improving my ability to transform an inefficient system into a user-friendly and visually compelling solution.

TAKEAWAY

Effective Collaboration with Engineers

WildTrack's lack of designers and its primary focus on functionality posed challenges for the user experience. As the sole designer, I learned the art of collaboration with engineers, bridging the divide between design and development. Multiple iterations, driven by open communication with engineers, were instrumental in aligning design with technical feasibility.

Iterative Refinement is The Key

Active and continuous iteration, fueled by valuable feedback, played a pivotal role in the project's success. This ongoing process ensured the alignment of design with user requirements and technological constraints, resulting in a user-friendly and visually appealing system.

View other works

Managing Observation Table

Crafting WildTrack's Design System and Observation Table UXUI

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