Simple Energy — Mobility Experience & Launch
Mobile app product UI, gamified achievement system, vehicle launch teaser, and handcrafted vector campaign assets for an electric mobility revolution.
Simple Energy — Mobility Experience
Product UI / Gamification / Achievement System
As part of my work at Simple Energy, I designed mobile app experiences that bring product functionality and rider engagement together. This work explores the profile experience, achievement badges, and milestone celebrations that recognise a rider’s journey.
The designs feature a dark interface, electric-blue achievement badges, high-contrast lime accents, and a distinctive visual language aligned with the electric mobility experience.
Achievement Unlocked
The 5,000 km celebration screen
Created milestone screens for achievements such as crossing 5,000 km. The experience highlights the achievement through an oversized badge, bold typography, and a focused call to action, with options to skip or share the milestone.
Rider Profile
Profile screen showing rating, reviews, and achievement badges
A personalised profile experience that brings rider identity, ratings, reviews, and achievement progress together in a structured mobile interface. The design uses a minimal dark UI to keep the experience focused while giving key information a clear visual hierarchy.
Milestone Celebration
The alternate 5,000 km achievement composition
Designed a badge-based progression system to celebrate rider milestones and encourage continued engagement. Achievement levels use distinct visual treatments, with colour and iconography communicating progression and status.
Rider Milestone Progression & Level System
5 Progression Tiers · Unlocked vs Locked Duality · 1,000 km to 50,000 km
To drive continuous rider retention and celebrate every leg of the electric journey, I designed a multi-tier milestone badge ecosystem for Simple Energy. Built on dark hexagonal chassis geometry with high-contrast electric accents, riders unlock tangible digital badges upon crossing cumulative distance thresholds. Each level features both an active Unlocked State (vibrant illumination and bespoke graphic identity) and a stealth Locked State (minimal silhouette overlaid with a security padlock), tapping into anticipation and progression psychology.
The Genesis Pulse · Urban Pioneer
Crossing the initial 1,000 km milestone marks the rider’s graduation into everyday electric mobility. The badge features concentric electric-blue orbital ellipses encircling a central charge spark, evoking clean kinetic energy radiating outward. This first milestone welcomes riders to the Simple Energy ecosystem and establishes early achievement momentum.
Velocity Ascent · Aero Cruiser
At 5,000 km, the scooter has become an indispensable daily companion through varying weather and city routes. Designed with a high-contrast electric lime upward arrow rising through an aerodynamic pod on vibrant cobalt blue, this badge triggers the full milestone celebration screen in the mobile app, rewarding riders with personalized ride stats, carbon offset numbers, and social sharing.
Horizon Explorer · Ridge Master
Breaking into the five-figure milestone at 10,000 km marks serious long-distance endurance. Represented by geometric emerald peaks beneath an energized yellow solar orb against deep obsidian, this badge honors riders who take the Simple One beyond city confines onto highways, mountain passes, and weekend expeditions, proving real-world battery endurance.
Electric Surge · Hyperdrive Veteran
Dedicated to riders who master dynamic throttle control, high-efficiency regenerative braking, and peak battery management. The electric-blue jagged lightning bolt cuts dynamically across the hexagonal frame, evoking instant EV motor response and hyper-speed agility. It stands as a badge of honor for power-conscious riders who push performance boundaries.
Apex Champion · The Century Horizon
The ultimate crowning milestone in the Simple Energy ecosystem. Crossing 50,000 km on an electric two-wheeler represents extraordinary vehicle longevity, unwavering brand loyalty, and thousands of kilograms of carbon emissions avoided. The brushed platinum tri-wave aerodynamic flag draws inspiration from motorsport checkered flags, cementing the rider's place among the elite Simple Energy pioneers.
Every milestone pairs an intriguing locked silhouette featuring an engraved padlock with a high-contrast illuminated unlocked graphic to trigger curiosity, habit formation, and goal-directed riding.
Replaced generic star counters with physical narrative symbols—from orbital sonic rings and aerodynamic velocity arrows to alpine summits and racing banners that reflect actual riding conditions.
All badges follow a standardized hexagonal grid with unified optical weights and angle bevels, ensuring pristine clarity across 24px micro-badges, dashboard displays, and full celebration takeovers.
The Chiaroscuro Launch Teaser ("Beyond the Dot")
Teasing an eagerly anticipated electric vehicle before public delivery requires balancing mystery with technical credibility, highlighting aerodynamic purity without revealing full body panels prematurely.
Utilized dramatic architectural lighting pillars slicing through deep negative space. A thin, precision grazing light skims the front cowl, handlebars, and aggressive headlamp geometry, embodying the Simple Energy motto "Beyond the Dot."
Brand Merchandise & Apparel Collection
Beyond the Dot · High-GSM Streetwear Capsule · T-Shirts & Architectural Hoodies
Extending Simple Energy’s electric ethos from vehicles into wearable culture, I designed a limited-edition apparel and streetwear merchandise collection. Grounded in the brand philosophy of being "Beyond the Dot — Unapologetically Eccentric" and the environmental promise to "Just Breathe", this capsule blends technical automotive schematics, kinetic physics, and organic botany into contemporary high-density screen-printed streetwear.
T-Shirt · 280 GSM
Aerodynamic Wing · Unapologetically Eccentric
- Precision isometric wireframe blueprint of the Simple One aerodynamic cowl
- High-vis infrared/vermilion (#FF3B30) aerodynamic intake blade accent
- Technical vector coordinate annotations (#01, #02, SIMPLE) with Swiss grotesque typography
- Circular Simple Energy rubberized badge print at the upper nape
- Custom woven damask label patch on left sleeve with "Beyond The Dot."
"Translates the wind-tunnel sculpted lines and aggressive aerodynamic front fairing of the Simple One into a razor-sharp graphic statement, finished with bold 'UNAPOLOGETICALLY ECCENTRIC' typography."
T-Shirt · 280 GSM
Kinetic Orbit · Unapologetically Eccentric
- Twin intersecting elliptical orbital rings capturing electric motor flux
- Ultra-fine laser-hatch parallel wireframe shading (#01 technical tag)
- High-contrast matte white screen print with subtle 3M reflective accents
- Minimalist "Beyond The Dot." subtext with weighted grotesque headline
- Woven silicone-treated sleeve patch and branded back neck collar crest
"Celebrates the perpetual kinetic motion and electromagnetic force fields driving the permanent magnet motor, blending quantum physics iconography with urban streetwear aesthetics."
Hoodie · 450 GSM
Just Breathe · Powertrain & Flora (Obsidian Edition)
- Exploded-view CAD vector schematic of the PMSM electric motor & internal planetary gearbox
- Organic botanical fusion: blooming four-leaf shamrocks & golden daffodils emerging from motor stator
- Bold optic white "Just Breathe" typographic lockup with stems weaving through letterforms
- Double-layered structured hood without drawstrings for clean architectural drape
- Lower back signature: "Beyond the Dot. SimpleEnergy"
"An eco-mechanical thesis on zero-emission mobility: replacing combustion exhaust with silent electric power enables urban nature and riders to thrive and 'Just Breathe'."
Hoodie · 450 GSM
Just Breathe · Powertrain & Flora (Optic White Edition)
- Delicate olive-sage blueprint lineart of internal motor stator and rotor components
- High-density screen print featuring lush forest emerald clovers (#2D6A28) & golden blooms
- Deep rich forest green "Just Breathe" headline with botanical stem ligatures
- Plastisol & water-based hybrid ink application ensuring breathable graphic surface
- Seamless kangaroo pocket, ribbed side gussets, and heavy twin-needle stitching
"A serene, high-contrast daytime interpretation of the Just Breathe philosophy, capturing the purity of electric propulsion against crisp, unbleached white heavyweight fleece."
Streetwear Art Direction & Manufacturing Philosophy
Wearable Brand IdentityAutomotive Haute Streetwear
Moving far beyond conventional promotional corporate merch into authentic streetwear culture. Designed with drop-shoulder boxy proportions, custom ribbed collars, and heavyweight pre-shrunk cotton fleece.
Technical Schematics & CAD Lineart
Graphics directly derived from actual vehicle aerodynamic surface geometry and electric powertrain exploded diagrams, celebrating EV industrial engineering in every vector path.
Eco-Mechanical Flora Duality
Juxtaposing cold, mechanical PMSM motor blueprints with organic, blooming botanical flora (shamrocks and daffodils) to visualize the core environmental promise of zero-emission mobility: "Just Breathe".
Tactile Finish & Premium Trims
Accented with custom damask sleeve patches, rubberized nape crests, and night-reflective 3M heat-transfer elements that catch headlights in dark urban riding environments.
Vehicle HMI & Mobile App Infographics System
Figma-Crafted Automotive Telemetry · Cockpit HUD Widgets · Mobile Health & TPMS
As Senior Visual Designer at Simple Energy, I engineered a unified automotive infographics and data visualization system spanning the vehicle’s high-resolution digital instrument cluster (HMI) and the companion mobile application. Built entirely within Figma using scalable vector networks, boolean path geometry, and high-contrast dark-mode color tokens, this system transforms complex powertrain telemetry—ranging from multi-cell thermal dissipation to dynamic regenerative braking flux—into intuitive, glanceable visual graphics optimized for rider safety at speed.
An orthographic top-down wireframe blueprint of the Simple One chassis featuring an illuminated cutaway of the under-floorboard battery pack. Seven individual cell modules glow in high-visibility electric green (#00E575), providing the rider with instant glanceable confirmation of cell balance, thermal dissipation, and remaining range.
Vehicle HMI Digital Cluster & HUD Telemetry Widgets
Real-Time Glanceable Widgets Designed for High-Speed Cockpit Ergonomics
Companion Mobile App Telemetry & Diagnostics
Deep-Dive Ride Habits, TPMS Tire Safety & Calendar Analytics
TPMS — Tire Pressure Monitoring System
Real-time pneumatic tire pressure monitor (Front 34 PSI with -2 PSI yellow warning alert). Features an intricate 2D vector wireframe rendering of the multi-spoke alloy wheel rim with active pressure arc halo and dynamic Laden (F28/R30) vs Unladen (F28/R28) target guidance.
Ride Activity & Order Matrix Calendar
Interactive monthly activity matrix (September) displaying cumulative riding history (342 total rides across 6 active riding days). Designed with high-contrast circular day tokens in electric green (01, 02, 03, 06, 09, 12) for effortless thumb-zone navigation.
Optical Hardware Specifications & Feature Gauges
Figma Vector Gauges for Display Optics, Mobility & Smart Connectivity
4K True Ultra HD
Geometric 10-sided decagon wireframe gauge representing the instrument cluster high-DPI display.
87% Polarising Filter
8-spoke radial scatter indicator illustrating 87% anti-reflective glare reduction under harsh sunlight.
120° Horizontal Rotation
Smooth circular arc indicating 120° screen swivel adjustment to match diverse rider heights.
Contact Analysis
Neon green lightning bolt with 4-directional acoustic wave rings for magnetic dock contact analysis.
Automatic Enrichment
6×6 matrix array representing background vehicle-to-cloud telemetry sync and ride profile data enrichment.
Automotive Infographics & Design System Principles
Figma CraftAutomotive Glanceability & Safety
Designed strictly around automotive human-factor guidelines. High-contrast typography and oversized telemetry values allow riders to absorb key metrics within 0.5 seconds at 60 km/h without diverting attention from the road.
100% Native Figma Vector Networks
Every chart, S-curve, exploded battery module, alloy wheel spoke, and decagon gauge was handcrafted natively in Figma using vector networks and boolean operations—ensuring zero distortion across any screen resolution.
High-Contrast Dark-Mode Ergonomics
Deep obsidian canvases (#080A0F, #050608) accented with high-voltage phosphor green (#00E575), electric cyan (#00D1FF), and alert yellow (#FFD600) to ensure zero ocular glare in night riding and maximum legibility under noon sunlight.
Cross-Platform System Cohesion
A unified visual language connecting the physical vehicle touchscreen display with the companion mobile app. Shared tokens, iconography, and typographic scales create a seamless handoff between riding and remote device inspection.
Concept Scooter HMI Design — Simple ARRIVE EV Concept
Digital Instrument Cluster · Real-Time Cockpit Ergonomics · Contextual Safety Flash Screens
Automotive Human-Machine Interface (HMI) designed for Simple Energy's visionary ARRIVE concept EV scooter. Engineered for instantaneous glanceability and rider safety at speed, the system pairs a high-contrast widescreen digital instrument cluster with contextual flash screens. Flash screens dynamically surface during critical rider transitions—including starting interlocks, charging sequencing, and CAN-bus triggered thermal safety emergencies—to ensure the rider receives clear, unambiguous guidance without distracting cognitive load.
Contextual Flash Screens & CAN-Bus Safety Alerts
Context-Aware Priority Overlays for Startup, Charging Conflict & Thermal Emergencies
Flash Screen · Start Vehicle Interlock
Flash Screen · Turn-Off Key to Start Charging
Flash Screen · Disconnect Charger to Ride
Flash Screen · Critical Safety Warning: Thermal Runaway
Automotive Interlocks & Telemetry Systems
CAN-Bus ProtocolHardware-Software Signal Interlocks
Dual-hand actuation requirement (Brake lever + Start button) prevents accidental acceleration when mounting or dismounting the vehicle.
CAN-Bus Priority Broadcast
Critical safety warnings bypass standard UI event queues, rendering instantly from hardware CAN signals sent by the battery management system.
Glanceable Cockpit Ergonomics
Oversized typography, high-saturation color tokens, and simplified iconography engineered for readability through helmet visors in direct sunlight.
Docking Conflict Resolution
Explicit charging state machine prevents concurrent vehicle key-on and charging states, shielding sensitive powertrain electronics.
Simple One Illustrated Owner's Manual & Technical Catalogue
The Official Owner's Manual for the Simple Energy EV Scooter · Drawn Entirely in Figma
The official owner's manual for the Simple Energy EV scooter. Designed as a comprehensive 25-page technical publication, this catalogue establishes a new benchmark for automotive documentation. Rather than relying on generic photographs or raw CAD exports, every mechanical assembly, exploded view, electrical schematic, and digital cluster interface was drawn entirely inside Figma with extreme patience and meticulous craft. Every page adheres to an uncompromising typographic and modular grid system, ensuring technical precision without losing design integrity or brand elegance. Some pages have been included below for reference, showcasing the desired look and feel of the catalogue illustrations.
Visual Dichotomy: Hardware vs Software Documentation
Dual Tone Aesthetic Adapted for Mechanical Precision and Digital Screen Ergonomics
Hardware, Frame Geometry & Powertrain Architecture
Dedicated to the physical vehicle anatomy. Rendered against deep obsidian backgrounds (#0A0D14) with high-contrast lime (#38EF7D) and silver-white line weights. Features 3-quarter orthographic angles, chassis subframe cutaways, dual battery port locks, stamped vehicle VIN/MIN identifiers, and disc-brake caliper assemblies.
7-Inch Touchscreen HMI, UI Cluster & Mobile Companion App
Dedicated to the digital user experience and smart software features. Rendered on clean architectural white backgrounds with dark charcoal typography and cyan accents. Documents the 14-point touchscreen anatomy, turn-by-turn map navigation, four ride modes (Eco, Ride, Dash, Sonic), Bluetooth pairing, and OTA telemetry.
Illustrated Manual Chapters & Technical Systems
Comprehensive EV Scooter Documentation Crafted in Native Figma Vectors
Vehicle Overview & Stamped Identifiers
Comprehensive scooter introduction covering safety protocol, warranty registration, and critical vehicle identifier locations.
- ›17-Digit Vehicle Identification Number (VIN)
- ›Motor Identification Number (MIN) Stamped on PMSM
- ›Battery Identification Number (BIN) QR Code & Serial
- ›Front, Profile & Rear Aerodynamic Line Projections
Steering, Handlebar & Mechanical Controls
Tactile switchgear schematics, handlebar ergonomic layout, braking hardware, and regenerative deceleration controls.
- ›Left Switchgear: Turn Indicators, High/Low Beam, Horn
- ›Right Switchgear: Mode Switch, Hazard, Engine Kill
- ›Hydraulic CBS Combined Braking System Caliper
- ›Keyless FOB Remote & Ignition Transceiver
Dual Battery System & Fast Charging Protocol
Detailed operation of the removable portable pack, fixed floorboard battery, Simple Loop fast charging, and thermal safety.
- ›Under-Seat Portable Battery Lock & Ejection Handle
- ›Simple Loop 0–80% Fast-Charging Sequence
- ›LED Battery State-of-Charge (SOC) Optical Indicators
- ›Home Wall-Box Charging & Thermal Management
7-Inch Digital Dashboard & HMI Architecture
Complete walkthrough of the capacitive IP67 touchscreen dashboard, instrument cluster anatomy, and navigation display.
- ›14-Point Cluster Anatomy (Speed, Battery %, Trip A/B)
- ›Real-Time Range Estimator & Dynamic Regenerative Bar
- ›Integrated Turn-by-Turn GPS Map Navigation View
- ›Quick-Settings Dropdown & Document Storage Vault
Ride Modes, Mobile Companion & Maintenance
In-depth guide to performance throttle maps, Simple Mobile App syncing, Bluetooth keyless lock, and periodic service intervals.
- ›Eco, Ride, Dash & Sonic Mode Throttle Curves
- ›Simple Mobile App BLE Pairing & Remote Horn/Flash
- ›OTA (Over-The-Air) Firmware Update Routine
- ›Tyre Pressure (TPMS) & Periodic Maintenance Schedule
Craftsmanship, Patience & Technical Illustration Architecture
Figma Discipline100% Native Figma Vector Drafting
Every mechanical view, exploded bolt, motor coil, suspension fork, and dashboard gauge was drawn natively in Figma using pen tools, vector networks, and boolean operations—ensuring infinite scalability and ultra-crisp print output.
Uncompromising Design Patience
Creating 25 publication-grade pages in Figma demands painstaking patience. Every line weight (0.5px hairline, 1px structure, 2px outer contour), stroke termination, and leader callout was balanced by hand without taking shortcuts or losing design integrity.
Dual-Theme Editorial Rhythm
Splitting the catalogue into an obsidian chiaroscuro theme for hardware and an optic white theme for touchscreen software mirrors the physical-to-digital reality of riding an EV scooter, enhancing reader engagement and comprehension.
Production-Ready Print & Digital Grid
Constructed on an 8-column layout grid with strict vertical baselines, standardized running headers, folio page counters, callout key indexes, and safety warning badges ready for both physical glovebox print and in-app interactive PDF viewing.
First Launch Landing Page Illustrations
High-Converting Hero Visuals & Feature Graphics · Entirely Hand-Made in Figma
Designed for the historic first public launch of the Simple One electric scooter, these vector hero and feature illustrations served as the visual centerpieces of Simple Energy's official direct-to-consumer landing page. Every illustration was drawn entirely by hand inside Figma using pure vector networks, boolean path operations, and multi-stop gradient illumination—completely free of 3D modeling software or AI generation. These artworks bridge mechanical performance telemetry (such as 26% faster charging speed and public kiosk infrastructure) with aspirational lifestyle storytelling, inspiring confidence and driving pre-orders from day one.
SEPL LOOP 26% Faster Charging Benchmark
Axonometric 3D Data Visualization · Industry Comparison
Comparative axonometric bar chart contrasting conventional EV charging durations against Simple Energy's proprietary SEPL LOOP fast-charging system. Receding dark-slate competitor pillars establish visual perspective along an isometric ground plane, culminating in the monumental glowing mint-green SEPL LOOP column emblazoned with the brand spark insignia and atmospheric floor fog.
Simple Loop Fast-Charging Kiosk Pods
Public Fast-Charging Infrastructure & Hardware Pods
Isometric product rendering of twin Simple Loop public fast-charging pedestals resting on an architectural concrete plinth. Rendered in brushed titanium and graphite with luminous perimeter neon light-strips, an angled 80% charge level touchscreen, and heavy-duty dual charging handles with naturally looping catenary cables to build pre-order trust in public network availability.
Super Owners · Prepare To Dominate Every Mile
Low-Angle Rear-Wheel Power Launch & Community Identity
High-octane graphic vector illustration from a dynamic rear low-angle perspective. Captures the high-torque PMSM electric motor kicking up a comic-book style white tire smoke plume as the rear wheel breaks traction across tricolor racing stripes (race red, pure white, electric blue). Created to galvanize early reservation holders ("Super Owners") and communicate blistering track-bred acceleration.
The Electric Performance Fastback · Panoramic Journey
Cinematic Split-Screen Hero Diptych · Highway Switchbacks & Observation Lounge
Cinematic dual-panel landscape narrative juxtaposing extreme riding dynamics with serene lifestyle touring. The left panel showcases the Simple One carving through canyon switchbacks under neon purple skies with faceted body panels reflecting warm terra cotta and sandstone sunlight; the right panel looks through a futuristic observation lounge window with a warm coffee cup in the intimate foreground while a second Simple One scooter speeds along the distant mountain desert ridge.
Web Art Direction & Vector Craftsmanship
Launch Impact100% Native Figma Vector Art
Every component—from the isometric charging pedestals and hanging cables to the faceted body panels and tire smoke plumes—was crafted node-by-node using Figma's pen tool and boolean operations.
Axonometric & Isometric Math
Strict adherence to true 30° isometric planes provided dimensional depth and architectural weight without the heavy rendering overhead or raster limitations of 3D software.
Atmospheric Multi-Stop Gradients
Simulated brushed aluminum, neon light emission, and sunset atmospheres using multi-stop linear and radial gradient fills with ambient occlusion falloffs.
Conversion-Driven First Launch
Tailored specifically for the high-stakes first public launch to demystify EV charging times, prove public network viability, and evoke emotional lifestyle aspiration for pre-orders.