Redesigning an NFC-Raft App
Redesigning an NFC-Raft App
Redesigning an NFC-Raft App
UX / UI Design • Revamp
A mobile app that uses NFC technology to streamline raft check-ins, check-outs, and management.
Project Details
Project Details
TIMELINE
TIMELINE
June 2025 - July 2025 (8 weeks)
June 2025 - July 2025 (8 weeks)
CLIENT
CLIENT
Lazy Day Raft Rentals
Lazy Day Raft Rentals
ROLE
ROLE
UX/UI Designer
UX/UI Designer
TEAM
TEAM
UX/UI Designer (1)
UX/UI Designer (1)
Product Manager (1)
Product Manager (1)
I worked with Lazy Day Raft Rentals to redesign TagTrax, their NFC-based app for raft check-ins, check-outs, float tracking, and damage reporting. The goal was to make the experience smoother and more intuitive while keeping the efficiency staff relied on.
I worked with Lazy Day Raft Rentals to redesign TagTrax, their NFC-based app for raft check-ins, check-outs, float tracking, and damage reporting. The goal was to make the experience smoother and more intuitive while keeping the efficiency staff relied on.
I worked with Lazy Day Raft Rentals to redesign TagTrax, their NFC-based app for raft check-ins, check-outs, float tracking, and damage reporting. The goal was to make the experience smoother and more intuitive while keeping the efficiency staff relied on.
I led the entire design process, from interviews and workshops to usability testing and redesigning the key flows and visuals.
I led the entire design process, from interviews and workshops to usability testing and redesigning the key flows and visuals.
Impact
Impact
What impact did our redesign have on the user experience?
What impact did our redesign have on the user experience?
1
1
Simplified flows into an easy and intuitive experience
Simplified flows into an easy and intuitive experience
2
2
Improved visibility and confidence outdoors
Improved visibility and confidence outdoors
3
3
Eliminated redundancy and hesitation
Final Solution Highlights
Final Solution Highlights
The Problem
The Problem
The Problem
Only 27% of staff use the app
Only 27% of staff use the app
The app was difficult to navigate and created friction in daily workflows. Check-in and check-out modes looked identical, steps were repetitive, visibility in bright sunlight was poor, and the lack of information hierarchy made it hard for staff to quickly spot key booking details. These issues left most of the team avoiding the app, with only 27% using it consistently.
The app was difficult to navigate and created friction in daily workflows. Check-in and check-out modes looked identical, steps were repetitive, visibility in bright sunlight was poor, and the lack of information hierarchy made it hard for staff to quickly spot key booking details. These issues left most of the team avoiding the app, with only 27% using it consistently.
The app was difficult to navigate and created friction in daily workflows. Check-in and check-out modes looked identical, steps were repetitive, visibility in bright sunlight was poor, and the lack of information hierarchy made it hard for staff to quickly spot key booking details. These issues left most of the team avoiding the app, with only 27% using it consistently.
Design Challenge
Design Challenge
"How might we make TagTrax clearer and more accessible, encouraging staff to use it consistently and stay engaged?"
"How might we make TagTrax clearer and more accessible, encouraging staff to use it consistently and stay engaged?"
Solution
Solution
I redesigned the app with a stronger information hierarchy, reduced repetitive steps, and introduced clear visual cues to distinguish check-in and check-out. By using high-contrast colors optimized for bright daylight, the design improved accessibility and usability for staff under broad daylight.
I redesigned the app with a stronger information hierarchy, reduced repetitive steps, and introduced clear visual cues to distinguish check-in and check-out. By using high-contrast colors optimized for bright daylight, the design improved accessibility and usability for staff under broad daylight.
I redesigned the app with a stronger information hierarchy, reduced repetitive steps, and introduced clear visual cues to distinguish check-in and check-out. By using high-contrast colors optimized for bright daylight, the design improved accessibility and usability for staff under broad daylight.
Measuring Success
Measuring Success
Understanding client and user needs
Understanding client and user needs
In order to define what success looks like for our redesign, I started by learning from both the client and staff to understand their goals and day-to-day challenges. This helped uncover what wasn’t working in the app and set the direction for the redesign.
In order to define what success looks like for our redesign, I started by learning from both the client and staff to understand their goals and day-to-day challenges. This helped uncover what wasn’t working in the app and set the direction for the redesign.
In order to define what success looks like for our redesign, I started by learning from both the client and staff to understand their goals and day-to-day challenges. This helped uncover what wasn’t working in the app and set the direction for the redesign.
Establishing our design goals
Establishing our design goals
I conducted a heuristic analysis of the existing design, which revealed key areas to focus on: accessibility, information hierarchy, and reducing repetition. The team had never worked with a designer before, so even things like WCAG color guidelines were new to them. These findings shaped our design goals and set a clear direction for the redesign.
I conducted a heuristic analysis of the existing design, which revealed key areas to focus on: accessibility, information hierarchy, and reducing repetition. The team had never worked with a designer before, so even things like WCAG color guidelines were new to them. These findings shaped our design goals and set a clear direction for the redesign.
I conducted a heuristic analysis of the existing design, which revealed key areas to focus on: accessibility, information hierarchy, and reducing repetition. The team had never worked with a designer before, so even things like WCAG color guidelines were new to them. These findings shaped our design goals and set a clear direction for the redesign.
Visual Accessibility
Visual Accessibility
Visual Accessibility
Clear to use under broad daylight
Clear to use under broad daylight
Clear to use under broad daylight
Information Hierarchy
Information Hierarchy
Information Hierarchy
Key details stand out
Key details stand out
Key details stand out
Efficiency
Efficiency
Efficiency
Fewer steps, faster use
Fewer steps, faster use
Fewer steps, faster use
My Approach
My Approach
Framing the work
Framing the work
I started by mapping out a clear plan to guide the redesign. This meant grounding the process in user research, identifying pain points, and validating the problems before moving into workshops and testing.
I started by mapping out a clear plan to guide the redesign. This meant grounding the process in user research, identifying pain points, and validating the problems before moving into workshops and testing.
I started by mapping out a clear plan to guide the redesign. This meant grounding the process in user research, identifying pain points, and validating the problems before moving into workshops and testing.
Research
Research
Why were only 27% of staff using the app?
Why were only 27% of staff using the app?
I wanted to understand why so few staff were using the app, so I spoke with the ones who did. Their experiences and frustrations gave me the insight I needed to see where the design was falling short.
I wanted to understand why so few staff were using the app, so I spoke with the ones who did. Their experiences and frustrations gave me the insight I needed to see where the design was falling short.
I wanted to understand why so few staff were using the app, so I spoke with the ones who did. Their experiences and frustrations gave me the insight I needed to see where the design was falling short.
Problem #1: Lack of Information Hierarchy
Problem #1: Lack of Information Hierarchy
Users have a hard time spotting key details because all text looks the same, with no clear hierarchy.
Users have a hard time spotting key details because all text looks the same, with no clear hierarchy.
Users have a hard time spotting key details because all text looks the same, with no clear hierarchy.
User reported issues
User reported issues
1
1
Weak font weight and poor emphasis
Weak font weight and poor emphasis
Users struggled to spot key details due to weak fonts
Users struggled to spot key details due to weak fonts
2
2
Bookings list layout hides important info
Bookings list layout hides important info
Users had difficulty finding important info in the bookings list
Users had difficulty finding important info in the bookings list
3
3
Cluttered screens
Cluttered screens
Users were slowed down by clutter and lack of hierarchy
Users were slowed down by clutter and lack of hierarchy
Problem #2: Poor Usability in Sunlight
Problem #2: Poor Usability in Sunlight
Users have trouble reading the app in bright sunlight due to low-contrast colors and small fonts.
Users have trouble reading the app in bright sunlight due to low-contrast colors and small fonts.
Users have trouble reading the app in bright sunlight due to low-contrast colors and small fonts.
Accessibility issues found
Accessibility issues found
1
1
Color blindness issues
Color blindness issues
Users with red-green color blindness struggled to see green elements
Users with red-green color blindness struggled to see green elements
2
2
Low contrast text
Low contrast text
Low contrast failed WCAG checks, making text hard to read
Low contrast failed WCAG checks, making text hard to read
3
3
Small font size
Small font size
Small fonts reduced readability of key details
Small fonts reduced readability of key details
Problem #3: Repetition and Unclear Flows
Problem #3: Repetition and Unclear Flows
Users have to repeat steps and move through unclear flows, making check-ins and check-outs slower than needed.
Users have to repeat steps and move through unclear flows, making check-ins and check-outs slower than needed.
Users have to repeat steps and move through unclear flows, making check-ins and check-outs slower than needed.
The Solution
The Solution
The Solution
Check-In Flow
Check-In Flow
I designed the check-in flow to let users scan raft tags directly from the bookings list, streamlining the process without switching screens. Based on user feedback, we removed the final “Complete Check-In” step, since staff expected bookings to be finalized automatically after the last raft was scanned. This change reduced hesitation and made the process faster and more intuitive.
I designed the check-in flow to let users scan raft tags directly from the bookings list, streamlining the process without switching screens. Based on user feedback, we removed the final “Complete Check-In” step, since staff expected bookings to be finalized automatically after the last raft was scanned. This change reduced hesitation and made the process faster and more intuitive.
I designed the check-in flow to let users scan raft tags directly from the bookings list, streamlining the process without switching screens. Based on user feedback, we removed the final “Complete Check-In” step, since staff expected bookings to be finalized automatically after the last raft was scanned. This change reduced hesitation and made the process faster and more intuitive.
Check-Out Flow
Check-Out Flow
I followed the same streamlined process to maintain consistency. Users scan raft tags directly from the bookings list, and the “Rentals” section was replaced with a single list labeled Rafts Currently In Use, making it easier to identify which rafts need to be checked out.
I followed the same streamlined process to maintain consistency. Users scan raft tags directly from the bookings list, and the “Rentals” section was replaced with a single list labeled Rafts Currently In Use, making it easier to identify which rafts need to be checked out.
I followed the same streamlined process to maintain consistency. Users scan raft tags directly from the bookings list, and the “Rentals” section was replaced with a single list labeled Rafts Currently In Use, making it easier to identify which rafts need to be checked out.
Report Damaged Raft
Report Damaged Raft
I designed the damaged raft reporting flow to fit seamlessly into the booking system. From a checked-out booking, users can submit a damage report, which updates the raft’s status from Ready to Use to Damaged, ensuring staff can track and manage issues quickly.
I designed the damaged raft reporting flow to fit seamlessly into the booking system. From a checked-out booking, users can submit a damage report, which updates the raft’s status from Ready to Use to Damaged, ensuring staff can track and manage issues quickly.
I designed the damaged raft reporting flow to fit seamlessly into the booking system. From a checked-out booking, users can submit a damage report, which updates the raft’s status from Ready to Use to Damaged, ensuring staff can track and manage issues quickly.
What I've Learned
What I've Learned
Self-Reflection
Self-Reflection
This project really pushed me to grow as a designer. I sharpened my research, prototyping, and testing skills, and learned how to adapt to real-world challenges. I’m especially thankful to Isibhemen Alashi, who as product manager helped me validate choices, make sense of data, and keep the project moving. Overall, this experience gave me the confidence to lead user-centered work and deepened my commitment to creating designs that are usable and accessible.
This project really pushed me to grow as a designer. I sharpened my research, prototyping, and testing skills, and learned how to adapt to real-world challenges. I’m especially thankful to Isibhemen Alashi, who as product manager helped me validate choices, make sense of data, and keep the project moving. Overall, this experience gave me the confidence to lead user-centered work and deepened my commitment to creating designs that are usable and accessible.
This project really pushed me to grow as a designer. I sharpened my research, prototyping, and testing skills, and learned how to adapt to real-world challenges. I’m especially thankful to Isibhemen Alashi, who as product manager helped me validate choices, make sense of data, and keep the project moving. Overall, this experience gave me the confidence to lead user-centered work and deepened my commitment to creating designs that are usable and accessible.
What's Next?
What's Next?
The goal is to expand TagTrax beyond the small group of under ten staff. With redesigned check-in and check-out flows moving into beta testing, the next step is redesigning other modes for a consistent, efficient, and accessible experience.
The goal is to expand TagTrax beyond the small group of under ten staff. With redesigned check-in and check-out flows moving into beta testing, the next step is redesigning other modes for a consistent, efficient, and accessible experience.
The goal is to expand TagTrax beyond the small group of under ten staff. With redesigned check-in and check-out flows moving into beta testing, the next step is redesigning other modes for a consistent, efficient, and accessible experience.
