CarFolio
CarFolio
A sleek data platform for EV enthusiasts, offering model comparisons, recognition, and race records with minimalist design and smooth micro-interactions.
UI/UX
UI/UX
UI/UX
Mobile App
Mobile App
Mobile App
Motion Design
Motion Design
Motion Design
TIMELINE
TIMELINE
Nov 2024 - Dec 2024
Nov 2024 - Dec 2024
5 Weeks
5 Weeks
MY SCOPE
MY SCOPE
UI Design
UI Design
Motion Design
Motion Design
Micro Interaction
Micro Interaction
TOOLS
TOOLS
Figma
Figma
Photoshop
Photoshop
After effects
After effects
BACKGROUND
BACKGROUND
More automakers, especially EV brands, are prioritizing performance to attract consumers. This trend fuels demand for comprehensive, professional data among EV enthusiasts.
More automakers, especially EV brands, are prioritizing performance to attract consumers. This trend fuels demand for comprehensive, professional data among EV enthusiasts.
WHAT IS IT ?
WHAT IS IT ?
CARFOLIO is a data platform for EV enthusiasts, offering model comparisons, identification, and track record tracking. With a sleek design and smooth interactions, it delivers a unique user experience.
CARFOLIO is a data platform for EV enthusiasts, offering model comparisons, identification, and track record tracking. With a sleek design and smooth interactions, it delivers a unique user experience.
Key Features
Feature 1
Visual Search
Visual Search
Face the camera to the car, then the system will automatically search the car in our data base and provide information about this car.
Feature 2
Car Details
Car Details
The car details sections includes all the information about the car, which is displayed in a more visual appealing way.
Feature 3
Track Records
Track Records
We have also developed a track record page, enabling users to customize video templates to display dynamic car information while watching the recording.
Feature 4
Compare
Compare
In the compare page, users can easily compare the data between two cars. Instead of just putting all the data together, I tried to create a layout that is more clear and satisfied.
Full Case Study Available on Desktop
PART 1
RESEARCH
Journey Map
I interviewed five car enthusiasts, mapped their journey, analyzed behaviors, defined two user types, and finalized the platform’s core functions.
Competitor Analysis
I researched the mainstream car-related software on the market and found that current automotive software, such as Autohome, simply presents data in a textual list format.
PROBLEM
Existing data platforms present complex metrics in plain text, making it difficult for beginners to quickly comprehend.
HMW
How might we design a new data platform that transforms complex EV data into a more user-friendly and visually engaging experience?
PART 2
DESIGN PROCESS
Section 1
Keywords
I have carefully chosen the following three keywords that I believe most accurately convey the overall feeling and essence of electric vehicles, highlighting their unique characteristics and appeal.
Futuristic
Futuristic
Tech-Oriented
Elegant
Elegant
Section 2
Visual Iterations
The visual design language has evolved through three major transformations to arrive at current stage.
In the first round of design, I attempted to incorporate three-dimensional effects into my design, including transformations from different angles, shadows, and more.
In this round, I shifted the design focus from a three-dimensional minimalist style to a more futuristic cyberpunk style, incorporating bolder typography and higher contrast.
I finally choose this direction as my final visual design style. This direction combines the feeling of the futuristic feeling with the simplicity of minimalism design, creating a great balance.
Section 3
Motion Evolution
The core of this project lies in the micro-interactions that shape its seamless experience, while the motion design has undergone continuous refinement and evolution.
Avoid Overlapping
Avoid Overlapping
In the first motion design round, text and images overlapped, creating a chaotic interface. I optimized it for smoother transitions and clarity.
Before
Before
After
After
Before
Before
After
After
Consistent Motion Direction
Consistent Motion Direction
A key consideration in motion design is that elements should move in the same direction during animations.
In later optimizations, I ensured consistent movement to create smoother, more cohesive transitions.
Intuitive Animation
In the initial track tab animation, the option moved upward, misaligning with the “click to expand” mental model.
I revised it so clicking a tab expands it to full screen, making the interaction more intuitive.
Before
Before
After
After
Before
Before
After
After
Bouncy or Smooth?
Bouncy or Smooth?
A key motion design consideration is avoiding excessive bounce.
In my first version, added elasticity made movements feel disruptive.
I later refined the animation curve to a smoother ease-in-out effect for better fluidity.
One Step, or Two?
One Step, or Two?
Initially, I moved all elements simultaneously for smoothness, but this caused overlaps and diagonal movement.
To fix this, I split the animation into two phases, ensuring clarity.
Before
Before
After
After
Section 4
Design Decisions
The interface structure has also undergone a series of improvements.
Before
Before
After
After
Compare
Compare
In the compare interface, the original design used left-right switching for two car models but lacked visual hierarchy and efficiency.
Therefore, I introduced a redesigned bottom sheet to enhance hierarchy and interaction.
Before
Before
After
After
Tab Bar Design
Tab Bar Design
In the old design, using two top tabs on mobile created a top-heavy layout and logical confusion.
In the revision, I integrated the secondary tab into swipe interactions for a more streamlined experience.
Before
Before
After
After
Track Records
Track Records
Initially, I placed the track thumbnail as a silhouette on the right side, but user feedback highlighted its importance.
I then refined the visual hierarchy to emphasize track details.
PART 3
FINAL DESIGN
