CRAFTED. NOT GENERATED. CRAFTED. NOT GENERATED. CRAFTED. NOT GENERATED. CRAFTED. NOT GENERATED. CRAFTED. NOT GENERATED. CRAFTED. NOT GENERATED. CRAFTED. NOT GENERATED. CRAFTED. NOT GENERATED.
CRAFTED. NOT GENERATED. CRAFTED. NOT GENERATED. CRAFTED. NOT GENERATED. CRAFTED. NOT GENERATED. CRAFTED. NOT GENERATED. CRAFTED. NOT GENERATED. CRAFTED. NOT GENERATED. CRAFTED. NOT GENERATED.
Award-Winning

Product
Designer

Microsoft Samsung MSN Copilot Microsoft Samsung MSN Copilot
View My Work
Laurel wreath
An award-winning
product designer,
crafted through a
lifetime of building
& shaping experiences
at a global scale.
Work Spotlight

Selected work

A focused look at four products. Each built for scale, shipped under pressure and used by real people.

0 Years
0 Users Impacted
0 Awards
0 Days to Ship
VoltSafe Marine Ecosystem Dashboard and App
End-to-End Design IoT

Three platforms. One ecosystem. Designed end-to-end.

Hardware, enterprise dashboard, and mobile app — built for marina operators and boat owners, and recognised with the IBEX Innovation Award.

15 min read
Improving MSN's Reading Experience
UX Research Ad Experience

How one redesign reached 100M+ readers a month.

Improving the balance between editorial content and advertising on one of the world's most-visited news platforms.

12 min read
Unifying Samsung's Design System
Design Systems Enterprise UX

I audited and rebuilt 65% of Samsung Knox's design system.

Unifying foundations, rebuilding components, and bringing order to the enterprise platform behind Samsung's device fleet management.

10 min read
VoltSafe Home Mobile App
Product Design IoT

This design won two awards at CES.

A consumer IoT companion that made smart home energy control feel effortless for everyday homeowners.

My Journey

Shipped, scaled,
and shown on live TV.

A scroll through real moments from Dragon's Den, Consumer Electronics Show, and personal milestones.

So Eun Ahn
So Eun Ahn Product Designer, Microsoft

“He strikes a strong balance between creativity and practicality, ensuring his designs are not only visually compelling but also user-centered and technically sound.

★★★★★
Alice Lee
Alice Lee Product Designer, Amazon Prime

“From the very first moment he joined our team, he brought a warm, vibrant energy that was both inspiring and uplifting. His collaborative spirit and genuine kindness made an immediate impact.”

★★★★★
Ashaya Sharma
Ashaya Sharma CTO, Honeycomb AI

“Few know product. Few know people. Few have engineering mindsets. Tash is the rare person who knows all of the above and is an absolute joy to work with.”

★★★★★
Maz Haque
Maz Haque Project Management Professional

“From video production to website design and asset creation, Tashfiq consistently delivered high-quality work that exceeded expectations. What set Tashfiq apart is his innovative approach and dedication to his craft.

★★★★★
Sanad Arida CTO, VoltSafe Inc.

“Tashfiq has an extraordinary ability to bridge engineering and design, delivering solutions that are both technically robust and beautifully crafted. He elevates every project he touches.”

★★★★★
View Case Studies
Claro Intelecto — When The Time Is Right
READY
Case Studies

PropKeep gives independent landlords a single place to run their properties.

Product DesignUX ResearchProof of Concept
PropKeep hero

Most independent landlords are running their operations inside their heads

My dad manages several rental properties and Airbnb listings. His tenants messaged him on WhatsApp at all hours — trivial questions mixed in with urgent repair requests, no system separating them. He’d keep a mental log, try to diagnose problems over text, then scramble to find someone to fix them. He was constantly flustered, constantly reactive, constantly tied to his phone.

That was the starting point for PropKeep.

Before state — landlord juggling messages

Landlords aren’t disorganised — they’re using the wrong tools for an operational problem

The real issue isn’t that landlords are careless. It’s that they’re running an operational system using communication tools. WhatsApp and texts are designed for conversations, not for tracking work states or scheduling repairs. Every task lives in their head or in a thread they’ll never find again. PropKeep’s job was to turn that incoming chaos into structured, trackable workflows.

Problem framing diagram

The risk was building something that added to the problem instead of solving it

Landlords already had enough to manage. The danger with any new tool was creating yet another thing to monitor and maintain. If PropKeep required significant setup, data entry, or daily habit changes, it would fail the people it was designed for. The product had to reduce friction from the first interaction — not introduce new kinds of it.

“Automate capture and dispatch, but preserve agency.”

I scoped the product tightly around the maintenance workflow

Early on I mapped out everything PropKeep could be — rent tracking, cash flow reporting, tenant management, financial dashboards. I ruled all of it out. Adding financial tracking would have split the product’s identity and diluted the core promise. The app needed to do one thing well: make sure no repair ever slipped through the cracks.

What I left out deliberately

  • Rent income and net cash flow tracking
  • ROI and investment reporting
  • Excel-style property management views
  • Tenant profiles and lease management
Scope map — what was included and excluded

The “Book-a-Pro” feature was the most complex design problem in the product

Connecting landlords to vetted service providers sounds simple but involves location matching, availability windows, trust signals, pricing transparency, and liability questions. I designed a booking flow that surfaced relevant pros quickly and gave landlords enough information to make a confident decision without needing to leave the app or make a phone call.

Book-a-Pro flow — step 1
Book-a-Pro flow — step 2

The dashboard needed to communicate urgency without creating anxiety

A landlord opening PropKeep first thing in the morning should immediately see what needs attention today — not a wall of equal-weight information. I designed the hierarchy around time-sensitivity, surfacing overdue tasks and pending tenant requests above general maintenance logs and completed work.

Dashboard hierarchy — primary view
Dashboard hierarchy — secondary view

The strongest signal of success would be landlords stopping their mental notes

PropKeep is a proof of concept, so there are no live usage metrics yet. But I defined a clear behavioural signal for success — landlords stop relying on memory and external notes. If a user says “I don’t have to remember this stuff anymore,” the product has done its job.

Key metric and success signal

Final product

What I learned and what comes next

Building PropKeep sharpened how I think about tools designed for people who don’t think of themselves as “software users.”

  • Cognitive load reduction is a design goal, not a side effect
  • Scoping ruthlessly early is harder than it sounds when the problem space is genuinely broad
  • The most complex UX challenge wasn’t the main workflow — it was the marketplace layer sitting inside a task tool
  • Proof-of-concept work still needs defined success signals or there’s nothing to design toward

The next version would start with user testing the tenant-facing request flow — that’s the entry point for every task in the system, and getting it right is what makes everything downstream work.

VoltSafe Winter keeps your engine alive when temperatures drop below freezing.

Product DesignIoTReact Native
VoltSafe Winter hero — app on phone beside magnetic smart plug

I joined VoltSafe as founding designer when the company was headed to Dragon’s Den

VoltSafe makes a magnetic smart plug for cold-weather drivers — the kind of people who wake up at 5am in a Canadian January and need to know their engine block heater actually ran overnight. I was the first and only designer at the startup, brought on as the company prepared for its national television debut. My early prototype was used live on air, and that season’s episode became the highest-value deal in Dragon’s Den history — all five Dragons entered a bidding war over VoltSafe.

The original app worked over Bluetooth — which meant it only worked if you were standing next to your car

The first version of the app was Bluetooth-only. That kept everything local and simple to build, but it came with a hard physical constraint: you had to be in range to interact with your device. For a product designed around remote engine management, that was a fundamental mismatch. Schedules weren’t backed up to the cloud, which meant the device needed to be reflashed whenever something went wrong.

Bluetooth tethering limitation diagram

Users were asking for remote access, cloud schedules, and status alerts — none of which Bluetooth could deliver

VoltSafe ran a feature upvote program where users logged and ranked what they wanted most. Remote on/off, cloud-backed schedules, and status notifications were the top three. Every request pointed to the same gap: the architecture couldn’t support the product users needed it to be.

Feature upvote data showing top-ranked requests

A frozen engine at 6am isn’t a UX problem — it’s a safety problem

If a plug was knocked loose overnight, users had no way of knowing until they turned the key. No alert, no status check, no fallback. For drivers in Edmonton or Winnipeg where overnight lows hit −30°C, an unheated engine can mean a missed shift, a missed flight, or a car that won’t start for hours. The Bluetooth architecture couldn’t support the safety layer this product needed to be.

Cold-weather use case scenario

I introduced an IoT framework to move the product beyond its physical limits

Rather than patching Bluetooth with workarounds, I brought IoT architecture into the product scope. This was a strategic shift, not a feature addition — it changed what the product fundamentally was. With IoT, the app could reach the device from anywhere, sync schedules to the cloud, and push real-time status alerts. I worked with the CTO and two back-end developers to scope and implement this within our React Native build.

What I scoped out

  • Advanced energy monitoring dashboards — useful, but not the core safety need
  • Social or community features — no evidence users wanted shared schedules
  • Geofencing auto-triggers — deferred until IoT stability was confirmed in production
Architecture shift — Bluetooth-only vs IoT-enabled

Scheduling was the most-requested feature and the hardest to get right

Automated schedules were the top-rated request. The design challenge was making schedule creation feel simple for non-technical users while handling cloud sync, timezone logic, and device state underneath. I worked through multiple iterations of the scheduling interface — testing time-block selection, conflict handling, and confirmation states — before landing on a pattern that felt reliable and easy to trust.

Schedule UI iterations
Final schedule screen with time-block UI

Remote on/off needed to feel instant even when it wasn’t

Latency is unavoidable in any IoT system. The design question wasn’t how to eliminate it but how to keep users feeling in control despite it. I designed optimistic UI states that gave immediate visual feedback on toggle actions, with clear loading and confirmation indicators that set accurate expectations without making the interaction feel slow. Getting this right required close back-and-forth with the front-end developer to sync state transitions between the UI and the hardware response.

Remote toggle states — default, loading, confirmed, error

The IoT-enabled app launched in Canada alongside the physical product in major retail chains

VoltSafe Winter shipped as the companion app for a product already on shelves at Canadian Tire, Home Depot, Rona, and Federated Co-op locations across Canada. The IoT-enabled version replaced the Bluetooth-only app and delivered exactly what users had been asking for since launch.

“First mobile product shipped by VoltSafe — moving from Bluetooth-only to full IoT capability across 11 months of design and development.”
Retail presence — VoltSafe Winter at Canadian Tire

What I learned and what comes next

This was my first time designing a connected hardware product from the ground up — solving for the full loop from physical device and firmware through cloud sync and app layer.

  • Introducing IoT required building the case with engineering stakeholders before any UI work started — alignment came first, design came second
  • Optimistic UI patterns are essential for hardware-connected apps; designing for latency and uncertainty is as important as designing for the happy path
  • A feature upvote program is a legitimate prioritisation tool — the data it surfaced directly shaped the product roadmap and the IoT decision
  • I would involve QA earlier in the hardware-software integration cycle; several edge cases surfaced late that could have been caught sooner
  • The IoT foundation now makes the next layer possible: geofencing triggers, energy usage history, and push notification controls
Product evolution — Bluetooth v1 to IoT v2

VoltSafe Home Demo App — designed for CES 2023.

Product DesignIoTFigma
VoltSafe Home app — cover image

VoltSafe invented the electrical plug for the first time in 140 years

VoltSafe is a Canadian tech startup that has innovated on the electrical plug, with the first-ever prongless magnetic plug for high power. Using groundbreaking, patented technology, VoltSafe has created the world’s safest, simplest, and smartest plug design since electricity came into homes more than 140 years ago.

The VoltSafe Home product was first revealed to the public in a successful appearance in the hit Canadian TV show, Dragon’s Den, in 2018. This case study examines the creation and success of the VoltSafe Home Demo App, which I designed to showcase the VoltSafe Home product at CES 2023 and to potential investors, early adopters, and the general public.

Designing for a device 99% of users have never seen creates a unique UX problem

The problem that VoltSafe is trying to solve is to create an IoT interface for their new technology that provides real-time energy monitoring at the outlet level, coupled with smart plug capabilities. To design for different user groups, I created several personas, based off user surveying, research and findings from previous discovery phases of our other similar VoltSafe projects such as VoltSafe Marine and VoltSafe Winter. Each persona has different needs and desires when it comes to the VoltSafe Home product, and the app was designed with these needs in mind. Empathy maps were created for each persona to better understand their thoughts, feelings, and behaviors.

Persona — Investor Ivan

Persona 1: Investor Ivan

Interested in disruptive home automation technologies, he seeks to make informed investment decisions and improve safety and energy efficiency in homes. He reviews financial and performance data, attends presentations, and feels excitement balanced with pressure to make informed investment decisions.

Persona — Early Adopter Emily

Persona 2: Early Adopter Emily

Curious about the VoltSafe Home product and its features, she is interested in being one of the first to try out new technology. She asks detailed questions about the product’s features and shares her experiences on social media, driven by curiosity and excitement about the product’s potential.

The hardware was already novel enough — the app had to feel like home

The experience of the product was created to showcase the key features of the VoltSafe Home product, including its safety, simplicity, and energy monitoring capabilities.

“VoltSafe Home: The world’s first magnetic AC power connector with IoT capabilities”

The app was designed to be visually appealing and engaging, with high-quality images and graphics that showcased the product’s unique design and functionality. It was also important for the app to be easy to navigate and use, with clear and concise instructions provided for each feature.

VoltSafe Home IoT plug — inline product shot

Every feature was built to make the unfamiliar feel completely natural

The VoltSafe Home App was designed to not only be visually appealing and engaging, but also highly usable and accessible. The UI style was inspired by the Jony Ive generation iOS 7 — we felt it suited the design of the physical product. The app combined some aspects of the clean minimal aesthetic while using realistic 3D renders to depict the corresponding real-life product.

VoltSafe Home app — 3 screens light mode

The design system was built using the Atomic Design model for UI design by Brad Frost, ensuring consistency and scalability across all screens.

VoltSafe Home design system — Atomic Design model

Onboarding

The VoltSafe Home app offers a seamless hardware onboarding process. Users can easily add one or multiple devices at once and provision them with their Wi-Fi credentials. To personalize the devices, users have the option to choose an aesthetic face plate that matches their real life device. Additionally, they can name the top and bottom receptacles of the added devices and add an icon for easy identification. The app also features a convenient “create group” feature, allowing users to group several devices together and perform group actions with ease.

Device Status & Monitoring

Users have the ability to control and view the status of each device. Each device card corresponds to a top or bottom receptacle. In the minimized view, the cards display necessary glanceable information, including a toggle switch to turn the device on and off. In the expanded view, users can view live power readings and the activity log. The realistic 3D graphics digitally mirror the live on/off and plugged status of each receptacle.

Scheduling & Circle Slider

With the ability to schedule devices, users can set multiple schedules for each receptacle individually or assign them as a group action. To facilitate this feature, the app incorporates the VoltSafe Circle Slider interface, which was previously used in the VoltSafe Winter product. This interface allows users to easily set on and off times for their devices, providing convenience and control over their electrical usage.

VoltSafe Circle Slider 2.0 — schedule interface

Customisability & Cross Compatibility

The VoltSafe Home Demo App also allows users to edit each device card at any time to update the name, icon, faceplate, control mode, and more. Furthermore, the app is designed to be cross-compatible with other VoltSafe prototypes showcased at CES 2023, such as the industrial unit MP-15 and the power distribution bar VoltSafe PDU. This compatibility enables users to seamlessly integrate and control multiple VoltSafe products within a single app interface.

Dark Mode

Of course, we can’t forget about our dark mode interface. Dark mode provides users with a sleek and modern interface that reduces eye strain and enhances readability. With improved battery efficiency on certain devices, dark mode offers a comfortable and customisable user experience in various lighting conditions. All three tabs are showcased in the dark mode UI theme.

VoltSafe Home — dark mode UI across all three tabs

Two CES Innovation Awards, NRC funding, and a partnership with La Grande

The VoltSafe Home app played a crucial role in testing and refining the VoltSafe Home technology. It effectively demonstrated the capabilities of the VoltSafe Home product, showcasing its safety, simplicity, and energy monitoring features in a clear and concise manner. As a result, VoltSafe Home was able to establish partnerships with homeowners and residential communities, and played a key role in securing funding from the National Research Council of Canada.

The VoltSafe Home was recognised as a CES 2023 Innovation Awards Honoree in the Smart Homes category for its innovation in home automation technology. This recognition significantly raised the profile of VoltSafe Home, attracting investors and generating further interest in the product.

CES 2023 Innovation Awards — VoltSafe Marine and Home

This project taught me that the demo product is a design discipline of its own

The VoltSafe Home Demo App effectively showcases the innovative features of the VoltSafe plug design and has received positive feedback. By understanding the target audience’s requirements, the app effectively communicates the benefits and potential use cases of the VoltSafe Home product. The official release of the VoltSafe Home product is expected in Q3 of 2025, demonstrating VoltSafe’s commitment to delivering a cutting-edge solution for home automation and electrical safety.

Unifying and scaling Samsung Knox.

Design SystemsEnterprise UXFigma
Samsung Knox design system — cover

At Samsung, I worked on internal operational tools within the Knox Enterprise Suite — a platform used by IT and security teams to manage and monitor large fleets of devices across organisations. My work spanned two parallel tracks: shipping a new operational dashboard and leading a significant unification effort across the Knox Design System.

Enterprise IT teams managing thousands of devices need to act fast — and the interface has to make that possible

The Knox platform serves operational teams making real-time decisions about device fleets — security alerts, system health, policy enforcement. When information is buried, ambiguous, or inconsistently presented across tools, teams slow down. The cost of that friction isn’t a usability score — it’s missed incidents and longer response times. My work on both the dashboard and the design system was oriented around the same goal: reduce the effort required to find, understand, and act on critical information.

I designed shipped dashboard cards that surface system status and security signals at a glance

The operational dashboard needed to give teams an immediate read on fleet health without requiring them to dig into individual device records. I designed asset security dashboard cards, data visualisations, and information hierarchy that prioritised actionable signals over raw data density. The key design challenge was deciding what belongs at the glance level versus what lives one click deeper — every card had to earn its position by answering a question an operator would actually ask in the first 10 seconds.

Knox dashboard — card-based layout and information hierarchy
Knox operational dashboard — contextual shot

Operational platforms like Intune, Salesforce, and VMware informed how we structured navigation and data density

Before committing to a dashboard architecture, I defined a structured competitive research approach to evaluate how large-scale operational platforms handle data organisation, navigation, and complex system concepts. I reviewed seven platforms in depth: Microsoft Intune, VMware, Ivanti, Salesforce, MaaS360, Hexnode, and SOTI. The research helped clarify which structural models best support operational tasks at scale, reduce cognitive load, and allow teams to locate and act on critical information efficiently — without being distracted by data that doesn’t require immediate attention.

Competitive research findings — platform comparison
Security-focused view — how competing platforms handle security status

I audited and unified 65% of the Knox Design System — every component I touched cascaded into the ones below it

Design systems at enterprise scale accumulate technical debt quietly. Components diverge. Tokens drift. Documentation falls behind. When I joined, Knox was expanding across multiple teams and use cases, and inconsistency was beginning to create friction at the engineering handoff level. I audited the system and took ownership of 65% of the component library — not an arbitrary number, but the full set of components I touched, plus every trickle-down dependency they affected. The remaining 35% were newer, siloed components or already-completed work that had no shared sub-component dependencies with my scope.

For each component I touched, I aligned foundations — typography, colour, tokens, documentation — rebuilt them into flexible variant-based patterns, and updated best practices to ensure the changes propagated smoothly without disrupting work already in progress across teams.

Knox Design System — component structure, tokens, and variant architecture
Component-level detail — variant-based pattern approach

The nested table pattern solved a problem no existing component could handle: representing hierarchy with dependencies

One of the new system solutions I introduced was a nested table pattern designed specifically for representing hierarchical data with dependency relationships. In Knox, this surfaces in privilege structures — an admin account with cascading permissions to sub-accounts, where deleting a parent node has defined consequences for the branches below it. No existing table component handled this cleanly. I designed the pattern from scratch to communicate hierarchy, show dependency relationships clearly, and behave predictably when nodes are modified or removed.

Nested table pattern — hierarchical structure and dependency relationships

Design system work at this scale is change management as much as it is design

Rebuilding 65% of a live design system used by multiple teams is not a design exercise — it’s a coordination exercise. Every change had to be scoped, communicated, and landed without breaking what was already in production or in active design work. I updated documentation, version notes, and best practices in parallel with every component change, ensuring teams could adopt updates without guesswork. Reducing one-off designs and improving engineering handoff quality were the direct outputs of that discipline.

What I’d carry forward

  • The hardest part of design system work isn’t the components — it’s managing the blast radius of changes across teams who are building in parallel
  • Competitive research at the start of a dashboard project is high-leverage: the right structural model saves weeks of IA iteration later
  • The nested table pattern revealed a class of data relationship problems that flat table components can’t solve — hierarchical data with dependency logic needs its own pattern language
  • Variant-based components are only as useful as their documentation — rebuilding components without updating guidance just moves the inconsistency problem from Figma to handoff

Improving MSN’s reading experience without sacrificing advertiser value.

Ad ExperienceUX ResearchFigma
MSN reading experience — cover

I worked directly on Edge, MSN, and Bing monetization surfaces, designing ad experiences embedded within content feeds and article pages used by millions of users. The challenge was to improve readability on MSN article pages by optimising banner ad placement — doing so while maintaining advertiser value without disrupting content consumption.

The tension

MSN article pages reach millions of readers daily. Banner ads fund the content they’re reading — but place them wrong and you erode the experience that makes the platform worth advertising on. The brief was to find where the line sits.

I evaluated 8 banner placement patterns and tested them against three user sentiment signals: readability, distraction, and perceived quality

MSN article pages serve millions of readers daily, and banner ad placement was creating friction between users and content. I mapped 8 viable placement patterns across the article layout, then designed a structured evaluation using UX Labs to measure how each one affected the reading experience. Users were surveyed on their ability to recall article content versus ad details, and directly questioned on which placements felt less disruptive.

UX Labs survey instrument — readability, distraction, and perceived quality questions

Interactive prototypes simulated real reading flow — static mockups wouldn’t capture how banners actually behave during scrolling

I built mid-fidelity interactive prototypes that replicated the full article reading experience, including scroll behaviour and banner rendering timing. This was a deliberate choice — testing static screens would have masked the exact friction points we were trying to measure. Feedback from participants reflected real consumption patterns, not reactions to design presentations.

8 mid-fidelity prototype variants — banner placement patterns evaluated across the article layout

Above-the-title placement shipped: users noticed the ad, but it stayed out of their reading path — a tradeoff that satisfied both readers and advertisers

Of the 8 patterns tested, above-the-title banner placement emerged as the recommendation. Users were still aware of the ad — banner blindness was an acknowledged risk we tracked — but placing it before the content began meant readers could engage with the article without interruption. It also landed first on the page, making it commercially viable for advertisers. I synthesised findings into a clear recommendation aligned across design, product, and engineering, and the pattern moved forward to development.

Outcomes — findings across 8 patterns with the winning above-the-title placement highlighted

Page load and ad fetch almost never happen at the same time — a pulsing loading state was designed to brace users for the incoming banner

Because the page and the ad server operate on different timelines, a banner appearing mid-read without warning created a jarring layout shift. I designed a pulsating loading state to occupy the banner space during the fetch delay — signalling to users that something is coming, so when it arrives it feels like resolution rather than disruption. I evaluated multiple motion concepts across varying durations and bézier curves before landing on the pulsing approach as the least intrusive.

Motion concepts evaluated — varying durations and bézier curves
Final pulsing loading animation — banner space in loading state before ad resolves

The same evaluation framework extended to intra-article native ads, where layout stability mid-read is even harder to get right

With the banner placement framework validated, I applied the same evaluation methodology to native ads embedded within article bodies. The constraints here were tighter — any layout instability mid-article directly breaks reading flow. The resulting design integrates within the content structure, preserves image hierarchy, and surfaces sponsorship labelling clearly, reducing disruption while maintaining the visibility and trust signals advertisers require.

Intra-article native ad — sponsorship labelling, image hierarchy, and content flow

Good ad design isn’t about making ads invisible — it’s about making them earn their place

This project sat at one of the hardest intersections in product design: user experience and advertiser value pulling in opposite directions. The answer wasn’t to hide the ad or minimise it into irrelevance — it was to find the placement where both sides of that equation could coexist. Above the title won because it respected the reading path while still delivering first-position visibility. The pulsing load state solved a technical seam that most users would never consciously notice — which was exactly the point. Working within Microsoft’s scale meant every decision had to be defensible across design, product, and engineering simultaneously. That constraint made the process more rigorous and the outcome more durable.

What I’d carry forward

  • Banner blindness is a long-term variable, not a solved problem — the above-the-title placement warrants ongoing measurement as user patterns shift
  • Testing with interactive prototypes versus static screens changed the quality of feedback significantly — the medium of the test matters as much as the questions asked
  • Motion design at this scale has to justify its existence functionally, not aesthetically — the pulsing state works because it solves a real timing problem, not because it looks good
  • The same evaluation framework transferred cleanly to a second ad format — building reusable methodology is as valuable as the individual finding

End-to-end design for VoltSafe’s marine IoT ecosystem.

End-to-End DesignIoTFigma
VoltSafe Marine — cover

In my role as the end-to-end designer for the VoltSafe Marine ecosystem, I was entrusted with the responsibility of creating a cohesive, intuitive, and engaging experience across both digital platforms and physical hardware. My design journey was shaped by the real-world functionality and accessibility needs within the marina industry environment.

VoltSafe's smart IoT shore power connector

The VoltSafe Marine ecosystem spans hardware, a web app, and a mobile app — I designed all three

The VoltSafe Marine ecosystem — comprising the power pedestal hardware, the enterprise web app, and the client mobile app — represents a harmonious blend of design and technology. My contribution as the end-to-end product designer spanned across this entire ecosystem, ensuring consistency, usability, and satisfaction at every touchpoint. Each element is a piece of a larger puzzle, designed to work together to create an efficient, user-friendly marina management system.

VoltSafe Marine ecosystem — pedestal, web app, and mobile app

We sketched on paper, then physically laid out printed UI cards to find the right information architecture

During the ideation phase, I collaborated closely with the engineering team to define our MVP and MVE, ensuring alignment between technical capabilities and the envisioned user experience. This was followed by hands-on sketching, where initial concepts and features were drafted, setting the foundational blueprint for the project.

Sketching initial concepts for the web app layout

Transitioning these ideas from paper to digital form, we conducted collaborative sessions employing a tactile approach with printed dashboard elements. This allowed us to physically rearrange and fine-tune features, fostering a creative synergy between design and engineering expertise.

Physically laying out card printouts to combine features

Atomic Design gave us consistency across three platforms — Agile kept us responsive to real user feedback

I applied the Atomic Design framework within an iterative Agile workflow to establish a robust yet adaptable design system. This dual approach enabled me to efficiently manage design tasks while staying attuned to users’ needs, resulting in a user experience that was both cohesive and responsive to the dynamic marina environment.

Accessibility was a central theme throughout. Following Nielsen’s usability heuristics, I implemented intuitive language and pictography, accommodated maximum font sizes, integrated large touch targets, and maintained high contrast ratios for optimal readability across a broad demographic.

Design methodology — agile workflow
App accessibility — tutorial and font size compatibility

The web dashboard lets marina staff see and control every slip in real time — no more walking the docks with printouts

At the heart of the marina’s operations is the enterprise dashboard, a web application designed to be both visually appealing and functionally robust. It’s a real-time visual representation of the marina, where each slip is colour-coded to reflect its current status, power state, and safety alerts. The dashboard empowers marina staff to remotely manage the power pedestals — an essential feature for both routine and emergency scenarios.

Each slip is colour-coded by occupancy, power state, and safety alerts at a glance

A visual representation of slip occupancy and status, crucial for managing marina operations efficiently. The spotlight card provides quick information and a live video feed for selected slips, with a toggle for a detailed list view. The slip map offers a comprehensive visual overview with three distinct lenses: occupancy, power state, and leakage status.

Slip map — leakage status view

Customer data, invoices, and slip assignments live in one place for marina staff

A central hub for managing customer information, payments, and invoicing, ensuring efficient and streamlined operations. I integrated a comprehensive CRM interface enabling marina employees to efficiently manage customer data, track invoices and payments, and log slip assignments for each customer.

CRM management interface

Progressive disclosure guides attendants step-by-step through booking — and auto-generates the invoice

I designed the client check-in flow to employ progressive disclosure, guiding marina attendants step-by-step through booking available slips. This process automatically prepares invoices and payment details based on the information entered during check-in, enhancing efficiency and accuracy.

Client check-in flow

Boat owners can monitor power, watch a live feed of their slip, and get safety alerts from anywhere

The mobile app, tailored for boaters, provides personalised control and insights. Users can manage their slip’s power, monitor energy consumption, and stay informed through notifications designed to alert them to critical conditions affecting their vessel.

Marine mobile app — all screens overview

Camera-equipped pedestals let owners check on their vessel remotely

The app includes a live video feed option for camera-equipped pedestals, enabling boat owners to view their slip remotely for added convenience and monitoring.

Mobile live video feed for boat slip monitoring

All components were designed to work in dark mode — essential for low-light marina conditions

I integrated a Dark Mode feature providing a visually comfortable alternative for users in low-light conditions, enhancing usability and reducing eye strain. All components were designed to be compatible with a Dark Mode colour palette to improve low-light visibility.

Mobile app — dark mode

Sterling, the Harbour Master at Royal Vancouver Yacht Club, used to do daily walks with printed marina maps. Now it’s one screen.

The effectiveness of the VoltSafe Marine ecosystem is most evident in its seamless integration. When changes occur in the marina’s physical environment — whether a slip becomes occupied or a power pedestal is switched off — these updates are instantly reflected in the user’s app. This immediate feedback loop is crucial, adhering to Jacob Nielsen’s principle of matching the system with the real world, particularly critical in IoT product design.

Harbour Master — physical vs digital marina view

IBEX Innovation Award, $180K BC Fast Pilot grant, and a growing number of marinas across North America signing on

The deployment of the VoltSafe Marine ecosystem across a growing number of marinas has yielded tangible success, evidenced by robust adoption rates and positive feedback from end-users. The project was recognised with the IBEX Innovation Award from the National Marine Manufacturers Association. The ecosystem’s development was also bolstered by a $180,000 grant from BC Fast Pilot. The product is currently undergoing its pilot program, receiving positive reviews from marinas across British Columbia, with an increasing number of marinas across North America signing up to implement the ecosystem.

IBEX 2023 Innovation Award — VoltSafe Marine

This project showed me what it takes to design a full IoT ecosystem — from the dock to the dashboard

Reflecting on the VoltSafe Marine project, my journey as the end-to-end designer has been comprehensive and rewarding. This endeavour has affirmed my commitment to design excellence and showcased my ability to translate complex requirements into user-friendly solutions. The VoltSafe Marine ecosystem is constantly evolving to meet and exceed safety, efficiency, and connectivity standards in the marina industry — representing the future of marina management technology.

Claro Intelecto — When The Time Is Right
00:00 / 00:00
Control audio here
Keep scrolling, you're almost there
Scroll to view my journey
Scroll to explore