Popsical.com

Popsical web page e-commerce using Shopify. New website rollouts in 4 markets (Singapore, Malaysia, Indonesia and Global)

A couple month back when I first joined Popsical , I was tasked to design a website revamp from Webflow to Shopify. The website will be live in 4 markets (Singapore, Malaysia, Indonesia, and Global)

Objective of this project are:

- To support multiple languages, redirection base on IP location

- To set different currency & price in the different region

- More easy to make changes and maintain

- Sync up with the stock, can be integrated with Tradegecko

I found this a great opportunity to explain a guide to designing a website. In this article, I will break down the design phases:

Visual References 16 Sept // 1 Day

Thinking of visual design trends for smart devices, it has to be very simplistic and functional. We inspired by Mac — from Macintosh.


Wireframes 17 Sept — 19 Sept // 2 days


Wireframe for homepage

Wireframes are a skeleton view of the website this allows me to focus on key functions, elements, and actions before starting on visual design.

Install Themes & New Design Approach 20 Sept — 28 Sept // 8 days

Color Scheme

I went for a dark color scheme. Black is elegant it implies empowerment, it’s minimal. Lots of web designers choose the color black for their designs to give prominence to the content of the site. The reason for this is, manifestly, that all other colors stand out a lot more than they would against a light background, that’s why it’s usually a great choice for highlighting design and visual content

New Design Approach (Draft 01)
Mobile Version (Draft 01)

Project Management

We using Notion for creating project timelines and we shared these with our team. We detail out the intended timeline right from the start. Each team member working on the project input into the creation of the timeline and every team has access to specific project channels in Slack, an understanding of the contractual scope of their projects, and the entire timeline

Notion as our project management tools

Usability Testing 03 Oct — 05 Oct // 3 days

Test the prototype with stakeholder (Lead Designer, Product Manager and including Marketing Team). Take the findings from the usability test and iterate upon the design also improve the user flow.

Stakeholder feedback & new layout design

Website Development 08–19 Oct// 2 weeks

Product Page Website Development

Web Optimization

Desktop Speed Compare to Spotify & Apple

Conclusion

There is no space for distractions on limited timelines. Initially, the timeline of this project was 6 weeks. We planned the website is live by the end of October. I tried to keep it as simple as possible to keep not too far from our previous website.

Final Thoughts

Trust your team, working closely with them. If you have any minor issue/problem just share with the team, usually they will always come with the solutions. For this case use the software you are familiar with, you know the shortcuts and don’t have to spend much time figuring where things are.

Final Design

Visit popsical.com to see our product ✌🏻✨ #popsicalkaraoke #popsicalownit

Other projects: