Klíček plus E commerce Web design
Project Background
Klíček plus is a microgreens city farm in Úvaly, Czech Republic. The project responds to increasing demand for microgreens, providing consumers with a convenient option for purchasing fresh and nutrient-rich greens directly from a farm. By offering a variety of microgreens grown with care and expertise, the project aims to support healthy living while fostering a closer connection between consumers and their food sources.
Project Details
The main goal was to create a visually appealing website with a smooth, enjoyable experience for users, to establish an online brand and to increase brand awareness.
My Roles & Responsibilities
As a solo web designer, I was entrusted with the complete design and aesthetics of the website, from the initial brief to the final version of UI design.
Competitive analysis
Website design
Adaptive design
Competitive Analysis
Our competitive analysis revealed several key takeaways:
Tone of Voice: Most competitor websites adopted a serious tone. While this approach may have instilled confidence in some customers, it also risked appearing overly formal and detached, considering that the primary audience may prefer a more approachable and friendly brand voice.
Essential Information: Many competitors lack clear information on how to purchase, receive products, contact the company, find pricing details, determine purchase quantities, or understand growing methods. This creates a barrier for informed decision-making.
Lack of Differentiation: Competitors often fail to articulate a compelling reason for customers to choose their brand.
These findings present a unique opportunity to:
Adopt a customer-centric voice: Emphasize the freshness, health benefits, and ease of use associated with our microgreens.
Prioritize Transparency: Provide clear details about purchasing processes, delivery, pricing, quantities, and our commitment to sustainable growing practices.
Define Our Value Proposition: Highlight what makes our farm and microgreens special, giving customers a clear reason to choose us.
Visual/UI Design
Following the initial brief with the farm owner, we got clear on our main audience and decided to set ourselves apart from competitors. We went with a design that's fresh, vibrant, and playful to bring some personality. Making sure to cover all the bases that competitors missed, we aimed to earn trust and resonate with our audience.
Building upon the farm's established Instagram branding, we worked with the owner to create a color scheme and typography for their upcoming website.
We chose free fonts for the website, with Quicksand as the main font. We replaced the previous logo font with Quicksand to ensure free commercial use, addressing the owner's prior unfamiliarity with font licensing. We incorporated the owner's wish for a plant-like decorative font by selecting Adbalumo for headers.
Following the initial brief I aimed to optimize the site map for easy exploration and efficient access to key information to ensure a clear and concise navigation experience for users. The site map minimizes clicks, allowing users to reach their desired information quickly.
For our UI design, we've chosen to take a unique and fresh direction. That’s why I proposed to use blocks in different shades of green with unique transitions. Adding to the natural ambiance, I've included vector grass with upward motion animation, bringing a touch of the outdoors to the user experience.
The next natural step was to develop an adaptive UI design for the mobile version of the website.
I've made sure the ordering process and delivery areas are clear and straightforward, adding the corresponding section to each page across the user journey.
Our primary aim was to create a unique catalog layout. To achieve this, I introduced four card types: a basic small card and three larger ones, sized at two, three, and four times the basic card. Additionally, to support the farm owner's need for expansion, I devised simple guidelines for adding two, three, or five new products. This approach ensures a visually appealing catalog while offering flexibility for future growth.
When it comes to product cards, we've prioritized clarity, ensuring that pricing and weight details are easy to find and understand.
Because the primary objective of the website is e-commerce for the farm's microgreens, we designed a simple and clear user experience for the purchasing process. The farm's e-shop stands out because it doesn't store inventory. All plants are best for consumption on a specific day after planting, so they are grown to order, and harvested twice weekly, with same-day distribution for optimal freshness.
Takeaways
The essential tasks of the project, which included conducting an initial briefing, performing competitive analysis, and crafting the UI design are completed. The development of an interactive prototype and design layouts for all screens are now primed and ready for the next phase of development.
For me, this project was a valuable learning experience. I took on the challenge of creating the web design for a new website from start to finish, starting with the initial briefing and ending with the final version of the UI design.