Research competitor brand references to identify strengths and weaknesses for planning the design of the MOKO website.
by creating user flows and wireframes to define the content of each section and feature of the website. The wireframes focus on designing the website layout and arranging various components.
Develop a design system by establishing typography and color guidelines tailored to the website.
Create both low- and high-fidelity prototypes, beginning with component-based design using Auto Layout.
Conduct prototype testing with clients and stakeholders for review and revisions, then deliver the finalized prototype to the development team along with a clear briefing to ensure implementation aligns with the designed prototype.
A key challenge was creating an engaging product presentation while lacking a defined UX direction and emotional goal for users. Additionally, the project relied solely on a basic PDF file, requiring manual extraction and redesign of content in Adobe Photoshop before it could be adapted for web use.
The website adopts a single-page, storytelling-driven approach, combining animations and parallax scrolling to create an immersive landing page experience that brings the product narrative to life.
The visually engaging design of the Moko web page—supported by parallax scrolling, animations, and contrasting color schemes—successfully improved the overall user experience and increased interest in the product.
#04CF9B
#FF8598
#A488FF
bold/SEmibold/medium
64/40/36/28/24