The Ally Co
Ally is a lockable storage box that is food-safe, multipurpose and designed to keep the goods away reach from children, pets and loved ones.
Web Design
Jason Chong
Chris Lu
Sketch
Photoshop
Illustrator
LIQUID/CSS
klaviyo
Shopify
5 weeks
Problem
Need a web page to promote Ally on Shopify platform with their existing branding.
Product
Custom design shopify webpage that allows user to learn more about the Ally.
User base
Mothers, individuals who care about aesthetic products.
The process starts with a
Kick off meeting with Client
The client and I start off with a kick off meeting to understand more about the goal of this website, and design. The goal is not to have extensive discussion to a perfect solution but to make quick decision in a limited time and budget.
By brainstorming and prioritizing the brand’s style and elements we created a list of what we want in this website. This took about 20 minutes.
Platform: Shopify
Function: Blog, Ability to use Klaviyo
Wants: Brand Blue colour, creativity buttons, animation of the box opening
Feeling: Belonging, that they need this
Voice: Like your Ally, a Pal
Definition of Target Group
In order to quickly understand the customers, we developed a quick porto-personas on Zoom whiteboard. Which are based purely on experience and assumptions of our audience. These serve as a starting point for us to reflect on the needs and challenges of the user and possible ideas we can include later in the product or the website itself.
Results
This is definitely not what the client was looking for at the beginning of designing a website but I aimed towards thinking about the whole process (including the product) instead of just the commerce website itself
Also this is a great way for me and the client to discuss what they are looking for in their business, and goals.
Brainstorming the design
Because the client wanted to use shopliy, and its a standard e-commerce platform, they mainly want to change the design and have a custom template tailor for the product. There weren’t much testing needed for the user experience.
We went ahead and explore with different visual styles for the website.
Building the site structure
This project is a one page product page, so we only had to designed the home page and the product page.
We start with creating low-fidelity wireframes. The advantage was a approximate structure of what we need in content. Such as images, and copywriting.
Development
The next process is development. The website is built on Shopify. It was my first time building a site on shopify, so there were a-lot of technical research on the different shortcodes that was used. There are also a lot of animations that we end up not using because some of the bugs that occurred with Shopify’s framework.
We had to jump back to re-iterate some of the designs.
Conclusion
Because of the various workshops, there’s constant collaboration with the clients, helping everything aligned. However it was first time building on shopify, so there are a lot of mistakes made, which took a lot of time. As a learning: I should test out the whole platform a few time before starting it, which would definitely safe time.
There’s also some designs couldn’t get execute when we went to development, the images on shopify loads quick, however there was some technical issue with the animation loader, and we had to get rid of the scrolling image sequence. If there’s another time I would definitely create a design system before starting building it on the platform which would save tons of time fixing everything on CSS. (P.S. setting a universal selectors is definitely helpful)
