Back

Campaign landing page

Design and build a landing page for the new e-commerce launching campaign.

Layout context

  • Information architecture
  • Contents grouping
  • Context flow
Project
Fig.1: Wireframe scrolling
Project
Fig.2: Wireframe - header & hero
Project
Fig.3: Wireframe - contents 1
Project
Fig.4: Wireframe - content 2
Project
Fig.5: Wireframe - content 3

Visual layout

Consistency
Utilize existing visual element e.g., logo, images, color pallet
Concretize
Research similar use-case of the visual concept and build the consensus over the art direction
Project
Fig.6: Layout - header & hero
Project
Fig.7: Layout - content 1
Project
Fig.8: Layout - content 2
Project
Fig.9: Layout - content 3
Project
Fig.10: Layout - content 4
Project
Fig.11: Layout - store front

Interactive narrative

Sequential visual cue
Scroll and reveal i.g., as users scroll page, contents slide-in
Context flow
Whole context flows with interaction to build active communication.
Project
Fig.12: Demonstrating interaction

Implementation workflow

  • Try to solve the workflow problem between Shopify server and GitHub version control
  • Document details to help team developers to understand workflow obstacles
  • Visual presentation of suggested flow
Project
Fig.13: Workflow diagram
Project
Fig.14: Workflow document

Contribution

Product strategy
  • Benchmarking research to see industry opportunity
  • Setting product design strategy
  • Refine workflow to reconcile Shopify live uploading and GitHub version control
UI design
  • Creating a high-fidelity UI mock-up
  • Creating an interactive prototype using Figma
Front-end
  • Utilize Theme Kit to build custom Shopify theme
  • Liquid, HTML, SCSS to modify new Shopify template
  • SCSS, JS to build interactive animation