top of page
LIFE9+
UI, Wireframing, Prototyping & Motion
macOS
Briefing:
Life9+ is a study case Lading Page that presents the brand new Smart Band and it's features. Life9+ is for a life worth living.
⚠️ Disclaimer: band images used belong to the official Xiaomi MiBand and are used for educational purposes only, with no intention of brand damage or false advertising.
Tools
Figma, Figjam
Timeline
1 week
Type
Study case
macOS
PROMPT: LANDING PAGE
"What's the main focus? Is it for a book, an album, a mobile app, a SaaS product? Consider important landing page elements (Headlines, call-to-action buttons, typography, clarity, etc.)" - Daily UI Challenge #003
PROJECT STRUCTURE
This is a Figma file, please give it a couple seconds for the project to load.
UI KIT
DESIGNING ANIMATIONS FLOWS
Header, CTA Button & Features Animation Description
Header - Slow fade in with up motion: Menu bar + titles and CTA button appear at the same time; Down motion for circle + bullet with slow fade in / reveal; Band mockup appears after previous animation above with up motion in slow fade in;
Features: Title first with slow fade in; Band appears first and then all icons separately or together - needs testing - fade in + up; After icon animation, light effect slowly appears under the band.
CTA Button Light Effect - Light moves from left to right and from top to bottom following the outline of the button from top left to bottom right. Animation plays on hover state.
Features: Title first with slow fade in; Band appears first and then all icons separately or together - needs testing - fade in + up; After icon animation, light effect slowly appears under the band.
CTA Button Light Effect - Light moves from left to right and from top to bottom following the outline of the button from top left to bottom right. Animation plays on hover state.
Wearables / Battery Charge / Last CTA section
Wearables - First text shows up with fade in + up; Line movement fast revealing indicating flowy movement (follows line vector path) from left rto right. Afterwards, each wearable moves up with a slow fade in positioning in the line.
Battery Charge Animation - Tittle fades in + up; Then "NEVER" shows up with fade in + up. Battery starts animation at the same time from zero to full - each battery "bar" fades in (left to right). After fully charged text on sunlight + water resistent shows up.
Last CTA - Big mockup fades in + up; Text fades in; CTA Button with light animation displays - animation plays on hover state.
Battery Charge Animation - Tittle fades in + up; Then "NEVER" shows up with fade in + up. Battery starts animation at the same time from zero to full - each battery "bar" fades in (left to right). After fully charged text on sunlight + water resistent shows up.
Last CTA - Big mockup fades in + up; Text fades in; CTA Button with light animation displays - animation plays on hover state.
Available Plans
Tittle first fades in + up; Smaller circle appears, then second, then third - indicating expansion movement similar to sound wave or breathing - about 400ms between each circle to fade into the next one. Previous circle stays active after animation, overlapping the previous one. Information cards show up with a fade up + in. Card buttons change UI on hover state + click.
Header, CTA Button & Features Animation Description
Header - Slow fade in with up motion: Menu bar + titles and CTA button appear at the same time; Down motion for circle + bullet with slow fade in / reveal; Band mockup appears after previous animation above with up motion in slow fade in;
Features: Title first with slow fade in; Band appears first and then all icons separately or together - needs testing - fade in + up; After icon animation, light effect slowly appears under the band.
CTA Button Light Effect - Light moves from left to right and from top to bottom following the outline of the button from top left to bottom right. Animation plays on hover state.
Features: Title first with slow fade in; Band appears first and then all icons separately or together - needs testing - fade in + up; After icon animation, light effect slowly appears under the band.
CTA Button Light Effect - Light moves from left to right and from top to bottom following the outline of the button from top left to bottom right. Animation plays on hover state.
Wearables / Battery Charge / Last CTA section
Wearables - First text shows up with fade in + up; Line movement fast revealing indicating flowy movement (follows line vector path) from left rto right. Afterwards, each wearable moves up with a slow fade in positioning in the line.
Battery Charge Animation - Tittle fades in + up; Then "NEVER" shows up with fade in + up. Battery starts animation at the same time from zero to full - each battery "bar" fades in (left to right). After fully charged text on sunlight + water resistent shows up.
Last CTA - Big mockup fades in + up; Text fades in; CTA Button with light animation displays - animation plays on hover state.
Battery Charge Animation - Tittle fades in + up; Then "NEVER" shows up with fade in + up. Battery starts animation at the same time from zero to full - each battery "bar" fades in (left to right). After fully charged text on sunlight + water resistent shows up.
Last CTA - Big mockup fades in + up; Text fades in; CTA Button with light animation displays - animation plays on hover state.
Available Plans
Tittle first fades in + up; Smaller circle appears, then second, then third - indicating expansion movement similar to sound wave or breathing - about 400ms between each circle to fade into the next one. Previous circle stays active after animation, overlapping the previous one. Information cards show up with a fade up + in. Card buttons change UI on hover state + click.
Header, CTA Button & Features Animation Description
Header - Slow fade in with up motion: Menu bar + titles and CTA button appear at the same time; Down motion for circle + bullet with slow fade in / reveal; Band mockup appears after previous animation above with up motion in slow fade in;
Features: Title first with slow fade in; Band appears first and then all icons separately or together - needs testing - fade in + up; After icon animation, light effect slowly appears under the band.
CTA Button Light Effect - Light moves from left to right and from top to bottom following the outline of the button from top left to bottom right. Animation plays on hover state.
Features: Title first with slow fade in; Band appears first and then all icons separately or together - needs testing - fade in + up; After icon animation, light effect slowly appears under the band.
CTA Button Light Effect - Light moves from left to right and from top to bottom following the outline of the button from top left to bottom right. Animation plays on hover state.
Wearables / Battery Charge / Last CTA section
Wearables - First text shows up with fade in + up; Line movement fast revealing indicating flowy movement (follows line vector path) from left rto right. Afterwards, each wearable moves up with a slow fade in positioning in the line.
Battery Charge Animation - Tittle fades in + up; Then "NEVER" shows up with fade in + up. Battery starts animation at the same time from zero to full - each battery "bar" fades in (left to right). After fully charged text on sunlight + water resistent shows up.
Last CTA - Big mockup fades in + up; Text fades in; CTA Button with light animation displays - animation plays on hover state.
Battery Charge Animation - Tittle fades in + up; Then "NEVER" shows up with fade in + up. Battery starts animation at the same time from zero to full - each battery "bar" fades in (left to right). After fully charged text on sunlight + water resistent shows up.
Last CTA - Big mockup fades in + up; Text fades in; CTA Button with light animation displays - animation plays on hover state.
Available Plans
Tittle first fades in + up; Smaller circle appears, then second, then third - indicating expansion movement similar to sound wave or breathing - about 400ms between each circle to fade into the next one. Previous circle stays active after animation, overlapping the previous one. Information cards show up with a fade up + in. Card buttons change UI on hover state + click.
Header, CTA Button & Features Animation Description
Header - Slow fade in with up motion: Menu bar + titles and CTA button appear at the same time; Down motion for circle + bullet with slow fade in / reveal; Band mockup appears after previous animation above with up motion in slow fade in;
Features: Title first with slow fade in; Band appears first and then all icons separately or together - needs testing - fade in + up; After icon animation, light effect slowly appears under the band.
CTA Button Light Effect - Light moves from left to right and from top to bottom following the outline of the button from top left to bottom right. Animation plays on hover state.
Features: Title first with slow fade in; Band appears first and then all icons separately or together - needs testing - fade in + up; After icon animation, light effect slowly appears under the band.
CTA Button Light Effect - Light moves from left to right and from top to bottom following the outline of the button from top left to bottom right. Animation plays on hover state.
Wearables / Battery Charge / Last CTA section
Wearables - First text shows up with fade in + up; Line movement fast revealing indicating flowy movement (follows line vector path) from left rto right. Afterwards, each wearable moves up with a slow fade in positioning in the line.
Battery Charge Animation - Tittle fades in + up; Then "NEVER" shows up with fade in + up. Battery starts animation at the same time from zero to full - each battery "bar" fades in (left to right). After fully charged text on sunlight + water resistent shows up.
Last CTA - Big mockup fades in + up; Text fades in; CTA Button with light animation displays - animation plays on hover state.
Battery Charge Animation - Tittle fades in + up; Then "NEVER" shows up with fade in + up. Battery starts animation at the same time from zero to full - each battery "bar" fades in (left to right). After fully charged text on sunlight + water resistent shows up.
Last CTA - Big mockup fades in + up; Text fades in; CTA Button with light animation displays - animation plays on hover state.
Available Plans
Tittle first fades in + up; Smaller circle appears, then second, then third - indicating expansion movement similar to sound wave or breathing - about 400ms between each circle to fade into the next one. Previous circle stays active after animation, overlapping the previous one. Information cards show up with a fade up + in. Card buttons change UI on hover state + click.
Header, CTA Button & Features Animation Description
Header - Slow fade in with up motion: Menu bar + titles and CTA button appear at the same time; Down motion for circle + bullet with slow fade in / reveal; Band mockup appears after previous animation above with up motion in slow fade in;
Features: Title first with slow fade in; Band appears first and then all icons separately or together - needs testing - fade in + up; After icon animation, light effect slowly appears under the band.
CTA Button Light Effect - Light moves from left to right and from top to bottom following the outline of the button from top left to bottom right. Animation plays on hover state.
Features: Title first with slow fade in; Band appears first and then all icons separately or together - needs testing - fade in + up; After icon animation, light effect slowly appears under the band.
CTA Button Light Effect - Light moves from left to right and from top to bottom following the outline of the button from top left to bottom right. Animation plays on hover state.
Wearables / Battery Charge / Last CTA section
Wearables - First text shows up with fade in + up; Line movement fast revealing indicating flowy movement (follows line vector path) from left rto right. Afterwards, each wearable moves up with a slow fade in positioning in the line.
Battery Charge Animation - Tittle fades in + up; Then "NEVER" shows up with fade in + up. Battery starts animation at the same time from zero to full - each battery "bar" fades in (left to right). After fully charged text on sunlight + water resistent shows up.
Last CTA - Big mockup fades in + up; Text fades in; CTA Button with light animation displays - animation plays on hover state.
Battery Charge Animation - Tittle fades in + up; Then "NEVER" shows up with fade in + up. Battery starts animation at the same time from zero to full - each battery "bar" fades in (left to right). After fully charged text on sunlight + water resistent shows up.
Last CTA - Big mockup fades in + up; Text fades in; CTA Button with light animation displays - animation plays on hover state.
Available Plans
Tittle first fades in + up; Smaller circle appears, then second, then third - indicating expansion movement similar to sound wave or breathing - about 400ms between each circle to fade into the next one. Previous circle stays active after animation, overlapping the previous one. Information cards show up with a fade up + in. Card buttons change UI on hover state + click.
Header, CTA Button & Features Animation Description
Header - Slow fade in with up motion: Menu bar + titles and CTA button appear at the same time; Down motion for circle + bullet with slow fade in / reveal; Band mockup appears after previous animation above with up motion in slow fade in;
Features: Title first with slow fade in; Band appears first and then all icons separately or together - needs testing - fade in + up; After icon animation, light effect slowly appears under the band.
CTA Button Light Effect - Light moves from left to right and from top to bottom following the outline of the button from top left to bottom right. Animation plays on hover state.
Features: Title first with slow fade in; Band appears first and then all icons separately or together - needs testing - fade in + up; After icon animation, light effect slowly appears under the band.
CTA Button Light Effect - Light moves from left to right and from top to bottom following the outline of the button from top left to bottom right. Animation plays on hover state.
Wearables / Battery Charge / Last CTA section
Wearables - First text shows up with fade in + up; Line movement fast revealing indicating flowy movement (follows line vector path) from left rto right. Afterwards, each wearable moves up with a slow fade in positioning in the line.
Battery Charge Animation - Tittle fades in + up; Then "NEVER" shows up with fade in + up. Battery starts animation at the same time from zero to full - each battery "bar" fades in (left to right). After fully charged text on sunlight + water resistent shows up.
Last CTA - Big mockup fades in + up; Text fades in; CTA Button with light animation displays - animation plays on hover state.
Battery Charge Animation - Tittle fades in + up; Then "NEVER" shows up with fade in + up. Battery starts animation at the same time from zero to full - each battery "bar" fades in (left to right). After fully charged text on sunlight + water resistent shows up.
Last CTA - Big mockup fades in + up; Text fades in; CTA Button with light animation displays - animation plays on hover state.
Available Plans
Tittle first fades in + up; Smaller circle appears, then second, then third - indicating expansion movement similar to sound wave or breathing - about 400ms between each circle to fade into the next one. Previous circle stays active after animation, overlapping the previous one. Information cards show up with a fade up + in. Card buttons change UI on hover state + click.
Header, CTA Button & Features Animation Description
Header - Slow fade in with up motion: Menu bar + titles and CTA button appear at the same time; Down motion for circle + bullet with slow fade in / reveal; Band mockup appears after previous animation above with up motion in slow fade in;
Features: Title first with slow fade in; Band appears first and then all icons separately or together - needs testing - fade in + up; After icon animation, light effect slowly appears under the band.
CTA Button Light Effect - Light moves from left to right and from top to bottom following the outline of the button from top left to bottom right. Animation plays on hover state.
Features: Title first with slow fade in; Band appears first and then all icons separately or together - needs testing - fade in + up; After icon animation, light effect slowly appears under the band.
CTA Button Light Effect - Light moves from left to right and from top to bottom following the outline of the button from top left to bottom right. Animation plays on hover state.
Wearables / Battery Charge / Last CTA section
Wearables - First text shows up with fade in + up; Line movement fast revealing indicating flowy movement (follows line vector path) from left rto right. Afterwards, each wearable moves up with a slow fade in positioning in the line.
Battery Charge Animation - Tittle fades in + up; Then "NEVER" shows up with fade in + up. Battery starts animation at the same time from zero to full - each battery "bar" fades in (left to right). After fully charged text on sunlight + water resistent shows up.
Last CTA - Big mockup fades in + up; Text fades in; CTA Button with light animation displays - animation plays on hover state.
Battery Charge Animation - Tittle fades in + up; Then "NEVER" shows up with fade in + up. Battery starts animation at the same time from zero to full - each battery "bar" fades in (left to right). After fully charged text on sunlight + water resistent shows up.
Last CTA - Big mockup fades in + up; Text fades in; CTA Button with light animation displays - animation plays on hover state.
Available Plans
Tittle first fades in + up; Smaller circle appears, then second, then third - indicating expansion movement similar to sound wave or breathing - about 400ms between each circle to fade into the next one. Previous circle stays active after animation, overlapping the previous one. Information cards show up with a fade up + in. Card buttons change UI on hover state + click.
Header, CTA Button & Features Animation Description
Header - Slow fade in with up motion: Menu bar + titles and CTA button appear at the same time; Down motion for circle + bullet with slow fade in / reveal; Band mockup appears after previous animation above with up motion in slow fade in;
Features: Title first with slow fade in; Band appears first and then all icons separately or together - needs testing - fade in + up; After icon animation, light effect slowly appears under the band.
CTA Button Light Effect - Light moves from left to right and from top to bottom following the outline of the button from top left to bottom right. Animation plays on hover state.
Features: Title first with slow fade in; Band appears first and then all icons separately or together - needs testing - fade in + up; After icon animation, light effect slowly appears under the band.
CTA Button Light Effect - Light moves from left to right and from top to bottom following the outline of the button from top left to bottom right. Animation plays on hover state.
Wearables / Battery Charge / Last CTA section
Wearables - First text shows up with fade in + up; Line movement fast revealing indicating flowy movement (follows line vector path) from left rto right. Afterwards, each wearable moves up with a slow fade in positioning in the line.
Battery Charge Animation - Tittle fades in + up; Then "NEVER" shows up with fade in + up. Battery starts animation at the same time from zero to full - each battery "bar" fades in (left to right). After fully charged text on sunlight + water resistent shows up.
Last CTA - Big mockup fades in + up; Text fades in; CTA Button with light animation displays - animation plays on hover state.
Battery Charge Animation - Tittle fades in + up; Then "NEVER" shows up with fade in + up. Battery starts animation at the same time from zero to full - each battery "bar" fades in (left to right). After fully charged text on sunlight + water resistent shows up.
Last CTA - Big mockup fades in + up; Text fades in; CTA Button with light animation displays - animation plays on hover state.
Available Plans
Tittle first fades in + up; Smaller circle appears, then second, then third - indicating expansion movement similar to sound wave or breathing - about 400ms between each circle to fade into the next one. Previous circle stays active after animation, overlapping the previous one. Information cards show up with a fade up + in. Card buttons change UI on hover state + click.
Header, CTA Button & Features Animation Description
Header - Slow fade in with up motion: Menu bar + titles and CTA button appear at the same time; Down motion for circle + bullet with slow fade in / reveal; Band mockup appears after previous animation above with up motion in slow fade in;
Features: Title first with slow fade in; Band appears first and then all icons separately or together - needs testing - fade in + up; After icon animation, light effect slowly appears under the band.
CTA Button Light Effect - Light moves from left to right and from top to bottom following the outline of the button from top left to bottom right. Animation plays on hover state.
Features: Title first with slow fade in; Band appears first and then all icons separately or together - needs testing - fade in + up; After icon animation, light effect slowly appears under the band.
CTA Button Light Effect - Light moves from left to right and from top to bottom following the outline of the button from top left to bottom right. Animation plays on hover state.
Wearables / Battery Charge / Last CTA section
Wearables - First text shows up with fade in + up; Line movement fast revealing indicating flowy movement (follows line vector path) from left rto right. Afterwards, each wearable moves up with a slow fade in positioning in the line.
Battery Charge Animation - Tittle fades in + up; Then "NEVER" shows up with fade in + up. Battery starts animation at the same time from zero to full - each battery "bar" fades in (left to right). After fully charged text on sunlight + water resistent shows up.
Last CTA - Big mockup fades in + up; Text fades in; CTA Button with light animation displays - animation plays on hover state.
Battery Charge Animation - Tittle fades in + up; Then "NEVER" shows up with fade in + up. Battery starts animation at the same time from zero to full - each battery "bar" fades in (left to right). After fully charged text on sunlight + water resistent shows up.
Last CTA - Big mockup fades in + up; Text fades in; CTA Button with light animation displays - animation plays on hover state.
Available Plans
Tittle first fades in + up; Smaller circle appears, then second, then third - indicating expansion movement similar to sound wave or breathing - about 400ms between each circle to fade into the next one. Previous circle stays active after animation, overlapping the previous one. Information cards show up with a fade up + in. Card buttons change UI on hover state + click.
Header, CTA Button & Features Animation Description
Header - Slow fade in with up motion: Menu bar + titles and CTA button appear at the same time; Down motion for circle + bullet with slow fade in / reveal; Band mockup appears after previous animation above with up motion in slow fade in;
Features: Title first with slow fade in; Band appears first and then all icons separately or together - needs testing - fade in + up; After icon animation, light effect slowly appears under the band.
CTA Button Light Effect - Light moves from left to right and from top to bottom following the outline of the button from top left to bottom right. Animation plays on hover state.
Features: Title first with slow fade in; Band appears first and then all icons separately or together - needs testing - fade in + up; After icon animation, light effect slowly appears under the band.
CTA Button Light Effect - Light moves from left to right and from top to bottom following the outline of the button from top left to bottom right. Animation plays on hover state.
Wearables / Battery Charge / Last CTA section
Wearables - First text shows up with fade in + up; Line movement fast revealing indicating flowy movement (follows line vector path) from left rto right. Afterwards, each wearable moves up with a slow fade in positioning in the line.
Battery Charge Animation - Tittle fades in + up; Then "NEVER" shows up with fade in + up. Battery starts animation at the same time from zero to full - each battery "bar" fades in (left to right). After fully charged text on sunlight + water resistent shows up.
Last CTA - Big mockup fades in + up; Text fades in; CTA Button with light animation displays - animation plays on hover state.
Battery Charge Animation - Tittle fades in + up; Then "NEVER" shows up with fade in + up. Battery starts animation at the same time from zero to full - each battery "bar" fades in (left to right). After fully charged text on sunlight + water resistent shows up.
Last CTA - Big mockup fades in + up; Text fades in; CTA Button with light animation displays - animation plays on hover state.
Available Plans
Tittle first fades in + up; Smaller circle appears, then second, then third - indicating expansion movement similar to sound wave or breathing - about 400ms between each circle to fade into the next one. Previous circle stays active after animation, overlapping the previous one. Information cards show up with a fade up + in. Card buttons change UI on hover state + click.
HI-FI PROTOTYPE
Just scroll down! :)
This is a Figma file, please give it a couple seconds for the project to load.
LASTEST CHANGES
These changes were made after 2 real feedbacks after testing the prototype.
Header & Features
Menu shows up first for better readability; Features Icons show up all together, once at a time would take too much time for the consumer; Hover state on CTA Button does not have light animation, it was too confusing;
Wearables
Each Wearable shows up one at a time, no fade up, just fade in.
Both fade up + fade in would take too long or animations would have to be too quick and it was not visually pleasing.
Available Plans
Background circles animation changes to opposite direction from outside to inside, because a matter of logic since the darkest element is in the middle and there are cards above that animation after it plays.
CAN'T GET ENOUGH?
bottom of page