The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
ELE Store — EV Parts & Batteries Mobile App
Designed and developed ELE Store, a client Android application for an electric-vehicle batteries and vehicle-parts marketplace. The goal was a clean, modern shopping experience that feels premium and easy to use—similar to high-end retail apps—while staying focused on EV-specific products like lithium battery packs, chargers, motors, brake kits, and charging cables.
The product UI/UX was first prototyped in Figma with a full screen flow: onboarding, home discovery, category browsing, search & filters, product details with variants (voltage/capacity), cart, checkout, favorites, profile, and notifications. The visual system uses a deep forest-green brand palette, electric accent highlights, rounded product cards, and a floating bottom navigation bar for a polished native feel.
Built in Android Studio with Kotlin, following Material Design patterns and a modular screen architecture. Implementation included Jetpack Navigation for multi-screen flows, ViewModel + StateFlow for cart and favorites state, RecyclerView/Compose-friendly product grids, and local mock data (no live backend) so the client could review a fully interactive UI build. Additional Android stack elements: XML/Compose layouts, Glide/Coil-ready image placeholders, and responsive mobile layouts optimized for modern handsets.
Deliverables: production-ready UI screens, clickable navigation, add-to-cart / wishlist interactions, promo-code checkout flow, and a client-ready Android prototype suitable for investor demos and further API integration.
Mock data now, real API later is the right call for an investor-ready prototype, speed matters more than correctness at that stage. The part worth locking early is the StateFlow contract shape, if the mock repository returns the same fields and error states the real endpoint...
Thanks, I completely agree. For the investor-ready prototype, keeping the data layer mocked will help us move faster while maintaining a production-ready architecture. I’ll make sure the mock repository follows the same response models, StateFlow contracts, loading states, and...
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Trending
retrofuturism
Share your favorite designs from the past exploring the distant future. Or your own take on the aesthetic 🚀
halftone
Dots. Texture. Grain. Let's see your designs using the halftone technique.
Midjourney
Creatives are showing off what they're making with Midjourney.
colorgrade
Video editors sound off: How do you enhance the mood of your video in color grading?
Related posts
Recent design work 🙂↕️
I design the best bento sections, even monochrome 😌
Happy Sunday 🥂
Looks amazing
Animated UI Components: Figma + Figma Motion
I designed and animated a set of UI components in Figma using Figma Motion.
The goal was simple: make everyday interface interactions feel more natural, responsive, and enjoyable.
What I worked on
I started by designing the components with a focus on:
Clear visual hierarchy
Consistent spacing
Reusable components
Clean typography
Proper interaction states
A consistent visual language
After creating the components, I used Figma Motion to bring them to life.
Why motion?
Good UI shouldn’t only look good when it’s static.
The way an element appears, changes, responds, or moves can make an interface feel much easier to understand.
For the animations, I focused on keeping the movement:
Smooth
Simple
Purposeful
Fast enough to feel responsive
Subtle enough not to distract
The goal wasn’t to add animation just for decoration.
Each transition was designed to give the user feedback and make the interaction feel more connected.
My process
1. Design the component
I first created the UI component and made sure the structure, spacing, typography, and visual states were consistent.
2. Define the interaction
I considered what should happen when the user interacts with the component—how it should appear, change, or respond.
3. Add motion
I then used Figma Motion to create the transitions and refine the timing and movement.
4. Refine
I adjusted the animation until it felt natural and balanced with the rest of the interface.
The result
The final components combine UI design and motion design to create interactions that feel more polished and intentional.
This project was also a good reminder that small interactions can have a big impact on how a product feels.
Designed in Figma.
Animated with Figma Motion.
Clean work🔥
What if the footer was designed to be remembered, not just reached?
#UIDesign #WebDesign #LandingPage #Figma #UXDesign #UIUX #Footer #FooterDesign
