Back

E-commerce branding

Define brand identity and build a landing page for grand launching include illustration for opening campaign.

Brand sprint

Long-term road map
  1. Brand movement leader for new brands/existing brands to showcase/promote new product.
  2. All big marketing opportunities go through us now, brands and companies see us as a mandatory source of their marketing efforts.
  3. Leading millennial trend with product/service development away from core business
Core values
  1. Trusted
  2. Creative
  3. Fun
  4. Futuristic
Target audiences
  1. Trend influencers
  2. Brand loyalists
  3. Trendy Millenials / GenZ
Project
Fig.1: Sprint exercise "brand personality"

Visual narrative

Conceptualize
  • Collect and expand keywords tree to deep dive into the core definition
  • Urban > metro city / futuristic > perspective > vanguard > leader > rider / cyberpunk > hacker > cipher
Commonize
  • Collecting visual concept based on keywords tree and build a mood board
  • Utilize image search tools to validate the common acceptance of visual concepts
Project
Fig.2: Mood board
Project
Fig.3: Word tree "urban"
Project
Fig.4: Word tree "futuristic"
Project
Fig.5: Word tree "cyberpunk"
Visualization
  1. Hand-drew concept sketch for early validation
  2. Illustrate breakdown components
  3. Build a whole scene with visual components
  4. Sketch and validate, repeat til team's happy
  5. Vectorize and colorize illustration
Project
Fig.6: Final scene "mystery city rider"
Project
Fig.7: Wired composition
Project
Fig.8: Component "mystery rider"
Project
Fig.9: Component "building"
Project
Fig.10: Final scene "HYPD bike"
Project
Fig.11: Wired composition
Project
Fig.12: Component "wheel"
Project
Fig.13: Component "frame"

Visual guideline

  • Brand identity guideline
  • Item presentation guideline
  • Page layout / color pallet guideline
Project
Fig.14: Item example 1
Project
Fig.15: Item example 2
Project
Fig.16: Item banner example

Landing page implementation

  • CSS / JS animation - text glitch
  • Illustration - main hero image
Project
Fig.17: Text glitch animation
Project
Fig.18: Hero section
Project
Fig.19: Prize detail section
Project
Fig.20: How it work section

Contribution

Product / design strategy
  • Conduct brand sprint to define brand identity
  • Benchmarking research to see industry opportunity
UI / visual design
  • Creating a high-fidelity UI mock-up
  • Creating an interactive prototype using Figma
  • Illustrate hero image and visual elements
Front-end
  • Utilize Theme Kit to build custom Shopify theme
  • Liquid, HTML, SCSS to modify new Shopify template
  • SCSS, JS to build interactive animation