August 22, 2024
August 22, 2024
Turning Slack confusion into a simple device tracker.
Turning Slack confusion into a simple device tracker.
Turning Slack confusion into a simple device tracker.
A fast, 7-day design project focused on creating a clean, dark-themed app to make borrowing office hardware easy, replacing messy manual communication.
A fast, 7-day design project focused on creating a clean, dark-themed app to make borrowing office hardware easy, replacing messy manual communication.
A fast, 7-day design project focused on creating a clean, dark-themed app to make borrowing office hardware easy, replacing messy manual communication.
Time frame
7 days
My ROLE
UI/UX App Design
UI/UX App Design
UI/UX App Design
Client
nextap (internal project)
nextap (internal project)
Year
2024
PROJECT OVERVIEW / CONTEXT
PROJECT OVERVIEW / CONTEXT
PROJECT OVERVIEW / CONTEXT
In our office, we have access to a wide range of testing devices – iPhones, Android phones, laptops, and more. Until recently, we managed these devices informally through a Slack group chat. While it worked for a while, it quickly became chaotic: nobody ever knew which device was free, who had what, or when something was available again.
During Nextap’s annual hackathon, our team decided to solve this problem. Over one week, we built a complete internal app that tracks all test devices, their status, and availability – with built-in QR code check-ins and check-outs.
I took on the role of UX and UI designer, responsible for the full design process: mapping needs, structuring flows, wireframing, and designing the final interface – all while working closely with developers to ensure fast iteration and technical feasibility.
In our office, we have access to a wide range of testing devices – iPhones, Android phones, laptops, and more. Until recently, we managed these devices informally through a Slack group chat. While it worked for a while, it quickly became chaotic: nobody ever knew which device was free, who had what, or when something was available again.
During Nextap’s annual hackathon, our team decided to solve this problem. Over one week, we built a complete internal app that tracks all test devices, their status, and availability – with built-in QR code check-ins and check-outs.
I took on the role of UX and UI designer, responsible for the full design process: mapping needs, structuring flows, wireframing, and designing the final interface – all while working closely with developers to ensure fast iteration and technical feasibility.
In our office, we have access to a wide range of testing devices – iPhones, Android phones, laptops, and more. Until recently, we managed these devices informally through a Slack group chat. While it worked for a while, it quickly became chaotic: nobody ever knew which device was free, who had what, or when something was available again.
During Nextap’s annual hackathon, our team decided to solve this problem. Over one week, we built a complete internal app that tracks all test devices, their status, and availability – with built-in QR code check-ins and check-outs.
I took on the role of UX and UI designer, responsible for the full design process: mapping needs, structuring flows, wireframing, and designing the final interface – all while working closely with developers to ensure fast iteration and technical feasibility.
PROBLEM / DISCOVERY
PROBLEM / DISCOVERY
PROBLEM / DISCOVERY
The old Slack-based system was slow, inconsistent, and unreliable. Messages about device availability quickly got lost in the chat history, and updates often never happened at all. When someone needed a specific phone or laptop, they had to scroll through messages or ask the group directly – wasting time and frustrating everyone.
To understand what needed to change, I did a short internal audit and spoke with a few colleagues who borrowed and managed devices most frequently. It became clear that the system lacked a single, central overview, any kind of status history, and consistent naming or labeling. Users wanted a quick and simple way to see what was free, check it out, and return it later – without typing or searching through Slack threads.
GOALS & CONSTRAINTS
GOALS & CONSTRAINTS
GOALS & CONSTRAINTS
The project goal was to build a single app that could show all devices, track their status, and make borrowing effortless through QR scanning. It needed to be simple enough for anyone in the office to use without any onboarding.
The main constraint was time — the entire app had to be designed and built within one week. This meant cutting all nonessential features and focusing only on what solved the real problem: visibility, speed, and clarity.
The project goal was to build a single app that could show all devices, track their status, and make borrowing effortless through QR scanning. It needed to be simple enough for anyone in the office to use without any onboarding.
The main constraint was time — the entire app had to be designed and built within one week. This meant cutting all nonessential features and focusing only on what solved the real problem: visibility, speed, and clarity.
The project goal was to build a single app that could show all devices, track their status, and make borrowing effortless through QR scanning. It needed to be simple enough for anyone in the office to use without any onboarding.
The main constraint was time — the entire app had to be designed and built within one week. This meant cutting all nonessential features and focusing only on what solved the real problem: visibility, speed, and clarity.
Approach / Process & Decisions
Understanding the flow
Phase 1
I started by mapping how people currently borrowed and returned devices. This revealed a clear four-step pattern – browsing, checking out, using, and checking in. It was clear that two key screens would define the experience: an overview of all devices and a detail page showing who had which one.
Understanding the flow
Phase 1
I started by mapping how people currently borrowed and returned devices. This revealed a clear four-step pattern – browsing, checking out, using, and checking in. It was clear that two key screens would define the experience: an overview of all devices and a detail page showing who had which one.
Understanding the flow
Phase 1
I started by mapping how people currently borrowed and returned devices. This revealed a clear four-step pattern – browsing, checking out, using, and checking in. It was clear that two key screens would define the experience: an overview of all devices and a detail page showing who had which one.
Wireframing and quick testing
Phase 2
I created low-fidelity wireframes in Figma to validate navigation and content structure. The main idea was to make the two primary actions – “View Devices” and “Scan QR” – always visible. During the hackathon, I iterated quickly, testing flows directly with colleagues several times a day.
Wireframing and quick testing
Phase 2
I created low-fidelity wireframes in Figma to validate navigation and content structure. The main idea was to make the two primary actions – “View Devices” and “Scan QR” – always visible. During the hackathon, I iterated quickly, testing flows directly with colleagues several times a day.
Wireframing and quick testing
Phase 2
I created low-fidelity wireframes in Figma to validate navigation and content structure. The main idea was to make the two primary actions – “View Devices” and “Scan QR” – always visible. During the hackathon, I iterated quickly, testing flows directly with colleagues several times a day.
Interface and collaboration
Phase 3
I designed the final UI with an experimental color palette and focused on clear, tactile interaction. Each device card included subtle haptic feedback and six status icons – borrowable, borrowed by, item added, blocked by, assigned to, and gone – making device states instantly clear. The QR scanner and generator screens formed the core of the borrowing flow.
Interface and collaboration
Phase 3
I designed the final UI with an experimental color palette and focused on clear, tactile interaction. Each device card included subtle haptic feedback and six status icons – borrowable, borrowed by, item added, blocked by, assigned to, and gone – making device states instantly clear. The QR scanner and generator screens formed the core of the borrowing flow.
Interface and collaboration
Phase 3
I designed the final UI with an experimental color palette and focused on clear, tactile interaction. Each device card included subtle haptic feedback and six status icons – borrowable, borrowed by, item added, blocked by, assigned to, and gone – making device states instantly clear. The QR scanner and generator screens formed the core of the borrowing flow.
Adding supporting features
Phase 4
With iOS, Android and web developers, we added lightweight but useful features like device history, photos, and user assignment. These small touches gave the app more depth and made it genuinely useful in daily work.
Adding supporting features
Phase 4
With iOS, Android and web developers, we added lightweight but useful features like device history, photos, and user assignment. These small touches gave the app more depth and made it genuinely useful in daily work.
Adding supporting features
Phase 4
With iOS, Android and web developers, we added lightweight but useful features like device history, photos, and user assignment. These small touches gave the app more depth and made it genuinely useful in daily work.
FINAL DESIGN / SOLUTION
FINAL DESIGN / SOLUTION
FINAL DESIGN / SOLUTION
The finished app opens with a clear grid of all available devices, visually categorized by platform and color-coded by status. From there, users can tap to view details, scan a QR code to check a device out, or return it with a single action.
Each device detail page shows who currently has the device, a short history of past use, and related notes or labels. Searching and filtering make it easy to find specific hardware even in a large list.
The design keeps the company’s visual identity but introduces cleaner spacing, simpler typography, and a more systematic hierarchy. It feels lightweight and reliable, which fits its purpose – a quick, internal productivity tool.
The finished app opens with a clear grid of all available devices, visually categorized by platform and color-coded by status. From there, users can tap to view details, scan a QR code to check a device out, or return it with a single action.
Each device detail page shows who currently has the device, a short history of past use, and related notes or labels. Searching and filtering make it easy to find specific hardware even in a large list.
The design keeps the company’s visual identity but introduces cleaner spacing, simpler typography, and a more systematic hierarchy. It feels lightweight and reliable, which fits its purpose – a quick, internal productivity tool.
The finished app opens with a clear grid of all available devices, visually categorized by platform and color-coded by status. From there, users can tap to view details, scan a QR code to check a device out, or return it with a single action.
Each device detail page shows who currently has the device, a short history of past use, and related notes or labels. Searching and filtering make it easy to find specific hardware even in a large list.
The design keeps the company’s visual identity but introduces cleaner spacing, simpler typography, and a more systematic hierarchy. It feels lightweight and reliable, which fits its purpose – a quick, internal productivity tool.
Outcome / Impact
Outcome / Impact
Outcome / Impact
Within one week, the team turned an unorganized Slack workflow into a working product. The app instantly made the process of borrowing devices more transparent and cut down unnecessary messaging. QR check-ins and clear labeling removed confusion, while the history and image features added accountability.
Although the project started as a hackathon experiment, it quickly became part of the company’s internal workflow and is now being expanded with admin controls.
Within one week, the team turned an unorganized Slack workflow into a working product. The app instantly made the process of borrowing devices more transparent and cut down unnecessary messaging. QR check-ins and clear labeling removed confusion, while the history and image features added accountability.
Although the project started as a hackathon experiment, it quickly became part of the company’s internal workflow and is now being expanded with admin controls.
Within one week, the team turned an unorganized Slack workflow into a working product. The app instantly made the process of borrowing devices more transparent and cut down unnecessary messaging. QR check-ins and clear labeling removed confusion, while the history and image features added accountability.
Although the project started as a hackathon experiment, it quickly became part of the company’s internal workflow and is now being expanded with admin controls.
Learnings / Reflection
Learnings / Reflection
Learnings / Reflection
This project showed me how much clarity and value can come from solving one real, everyday problem. Even under tight time pressure, a focused design process can produce something genuinely useful.
Working side by side with developers also reinforced how essential quick iteration is in small teams. Every decision, from labeling to layout, had to serve the goal of making the system faster to use.
If the project continued, I would explore deeper analytics and administrative tools – like tracking device usage patterns or flagging underused equipment – to make the app even more efficient for long-term use.
This project showed me how much clarity and value can come from solving one real, everyday problem. Even under tight time pressure, a focused design process can produce something genuinely useful.
Working side by side with developers also reinforced how essential quick iteration is in small teams. Every decision, from labeling to layout, had to serve the goal of making the system faster to use.
If the project continued, I would explore deeper analytics and administrative tools – like tracking device usage patterns or flagging underused equipment – to make the app even more efficient for long-term use.
This project showed me how much clarity and value can come from solving one real, everyday problem. Even under tight time pressure, a focused design process can produce something genuinely useful.
Working side by side with developers also reinforced how essential quick iteration is in small teams. Every decision, from labeling to layout, had to serve the goal of making the system faster to use.
If the project continued, I would explore deeper analytics and administrative tools – like tracking device usage patterns or flagging underused equipment – to make the app even more efficient for long-term use.
More Works More Works
Redesigning the Research & Innovation Portal
UX research, prototyping
Redesigning the Research & Innovation Portal
UX research, prototyping
Redesigning the Research & Innovation Portal
UX research, prototyping
Smart Darts – Proof of Concept App
App UI/UX, Prototyping
Smart Darts – Proof of Concept App
App UI/UX, Prototyping
Smart Darts – Proof of Concept App
App UI/UX, Prototyping