With over a decade of existence, Grasscity, an Amsterdam based company and considered to be the world's Best Online Headshop, was founded with the purpose to bring like-minded communities interested in alternative lifestyles.
Having collaborated with Pixelmatters for about 6 years, when it came the time to venture into the rapidly growing CBD (cannabidiol) market, they reached out again to design the best online experience personalized to CBD's users, under their new sister brand, CBDcity.
CBD, or cannabidiol, once an untapped market, has been growing exponentially and is expected to be a $10 billion industry by 2025. A market on the verge of becoming overcrowded highlighted the need for CBDcity to quickly create the a top-notch online experience, one that would exceed online customer's expectations.
Using Shopify platform as a base, combined with Pixelmatters' custom design, made this challenging project not only possible, but also a success.
Having in mind the degree of the challenge, and considering that even Grasscity itself was still figuring out what would be the best way to position their new sister brand, they decided to visit us in Porto, from Amsterdam, for an insightful kick-off session.
It was another opportunity to connect face-to-face, but it mainly allowed us to go deeper into understanding where CBDcity could stand in the competitive CBD market. We started out by identifying the Grasscity's current competitors, customer user journeys, and pain points. The design journey would follow.
CBDcity was Grasscity's first brand since launching back in 2000. Besides starting a new brand from scratch, they were also venturing into a market with possible different consumer demographics.
So before getting our hands into the design it was vital to do the research first, including market research and user research. After finding out everything we could about the end consumer, we had the opportunity to perform a survey to Grasscity's real users.
With answers from Grasscity's real users we were able to pinpoint how or if both brand's users, Grasscity and CBDcity, could be somehow similar. As we realized some of the assumptions made during research didn't completely match our real user base. We also identified the reasons why they would consider purchasing CBD products, which would, later on, have an impact on how the brand would communicate on their website. By visiting other online stores we were able to gather some of eCommerce's top best practices.
From extensive research, we were able to adapt the CBDcity's overall brand tone and website experience, while keeping consistency with its sister brand, Grasscity, but also lay down the path for a personalized communication specifically targeting their user's needs, preferences, expectations, and behaviors.
User Experience strongly impacts conversion rates. When customers can't easily navigate an online store to find what they need, they will get frustrated and won't hesitate to leave to find another seller. This is especially true with new brands like CBDcity when the brand's own connection with the user doesn't yet play a role in keeping them engaged.
The key is to make the experience as seamless as possible for the user to find the product they need, and as simple as possible to purchase it. With the information gathered from user and market research, and by understanding what motivated a user to stay, we had enough to create wireframes that would solely focus on the website's structure, completely tailored to the user's motivations.
The brand's visual identity and tone have a strong influence on the overall user experience. Being CBDcity's new in the CBD market, it was important the brand visually communicated what users were expecting to find when they first landed on the website's homepage.
Understanding the users and their needs paved the path to determine how the brand needed to visually communicate. CBDcity focused on wellness and the pursuit of alternative lifestyles, so we created a moodboard that transmitted those values. Colors, shapes, and the brand's tone of voice would all be directly impacted by it.
Defining a cohesive visual language from the get-go, with a clear set of rules regarding color, shapes, typography, and tone, allowed us to establish a sense of consistency throughout every aspect of the brand's communication.
With our initial research in mind, we aimed to create a brand with earthy tones in the color palette, organic shapes, and an all-around natural feel. The brand's tone of voice should describe CBDcity's has an expertise in the matter of CBD, but equally a promoter of a balanced lifestyle.
eCommerce websites need to be able to change and grow in order to meet demand. Anticipating the need for scalability throughout the design process, and when designing components, allowed us to prepare the design for this need of constant radical change. Every component was thought out to be included in more than one context.
The styleguide on the other hand, which included every component and its respective different states and context variations, guaranteed that both the website and the brand would remain cohesive even after needed iterations. The document would be a vital alignment tool for handing off the design to the development team, especially considering we would be collaborating with an external development team, specialized in Shopify.
Besides working closely with Grasscity, we also collaborated with an external development team of Shopify experts, code.NL. To guarantee a smooth implementation and preventing the project to derail, certain features and behaviors had to be designed taking into account Shopify's technical constraints.
To ensure the handoff success we aimed to have open communication channels with the team, in a way that they could provide feedback on the designs at any stage of the development process. Balancing communication with the development team through Slack and Zeplin made this possible.
Our previous experience with Pixelmatters made us believe they would nail the project and that is what they achieved! Fast project completion with minimal delays, excellent communication, and one of the best UX/UI experience you can achieve on the market.
Mert Gokceimam
IT/Project Manager at Grasscity
CBDcity's new website is not only built with the client in mind, ready for scalability, and easy management, but its online experience and visual communication are completely personalized to CBD user's preferences, behaviors, and needs. It shows the great potential for eCommerce businesses when combining theme-based solutions like Shopify with the power of top-notch custom design and insightful research.
