Discover Nature’s Beauty Delivered—Transforming Your Indoor and Outdoor Spaces!
UI Design
Project Overview
Dubai is an expensive Emirate in the United Arab Emirates, where additional income is essential for residents to improve their standard of living. Clients have gradually started online businesses through social media and the Amazon channel. As their ventures rapidly grow, they have decided to expand their brand to a wider audience.
Expanding the online brand across the country was an exciting opportunity, though there were concerns about the sales ratio, as the brand had previously generated significant sales through social media and Amazon channels. The primary requirement was to thoroughly understand the competition and execute a stunning web store that would stand out from the rest.
Research: SWOT & Competitive Analysis
Plantshop.me is a leading online store for indoor and outdoor plants, pots, and more. Established 25 years ago, it delivers products across different GCC countries without compromising on quality. The product detail page layout and eye-catching sections are designed to generate more conversions.
Strength
User-friendly design from the landing page to the order summary.
Use of white space and neutral Colors to draw attention to each element on the screens.
Multiple sections for specified product displays.
Widgets designed for call-to-action functions.
Weakness
Inconsistent application of brand color across sections and pages.
The header to footer sections take more time and stack too many elements, potentially leading to a poor user experience.
The middle of the landing page uses too many banners, causing confusion due to the excessive number of choices.
Too many slides and carousels can affect website speed optimization.
Opportunities
Implementing a modern web store with a pop-up checkout widget.
Using a consistent color palette and minimal design to build rapid relationships with customers.
Reducing unnecessary slides and animations to enhance website optimization.
Utilizing different backgrounds for product thumbnails.
Threat
Ensuring a dedicated section for capturing the quality of product images.
Delivering products daily based on customer requests.
Building more trust by delivering products across different GCC countries.
User Persona
Research showed that placing dozens of plants in every corridor improves the environment. Weekly visits to relatives' flats provided valuable insights into their purchase history and experiences. This information was organized to create a semi-fictional character representing customer perspectives, which helped in making user-centered design decisions.
Exploration & Ideation
As a designer, transferring concepts into innovative ideas is a challenging task. Sketches, maps, and flow guides help in creating useful design solutions for customers.
Information Architecture
Using real websites, I discovered that well-organized information significantly impacts engagement. Plant stores placed information neatly, driving engagement on each page and section. I created a structure for information, analyzing and removing unnecessary content to avoid complexity.
Wireframes
Creating visual representations of each page and section can be challenging. I used sketched wireframes to break down ideas and deliver concepts early. This method also facilitates discussion with teammates and feedback collection, making it a cost-effective and time-saving process for developing meaningful ideas.
USER FLOW
Understanding user navigation is crucial for helping customers purchase products. To gain insights, I explored various web stores and made purchases to fully comprehend the user journey. Based on these insights, I created a user-flow diagram that organized the wireframes, ensuring a seamless and realistic prototype. Additionally, I introduced a Floating Checkout Widget to enhance sales conversions, a feature not commonly utilized by competitors.
User Interface
Transforming sketched wireframes into polished mock-ups was exciting. I collected visual inspiration from Behance, Dribble, and competitor websites to create a mood board. Experiments with typography, colour styles, and other elements were conducted. The mood board helped understand design trends, incorporating minimal and modern images, shapes, and surfaces for user-engaging designs.
Components
Optimizing low-fidelity sketches before starting mock-ups is essential. I prefer creating components to ensure a consistent design output across the board. Changing elements on each screen can be time-consuming; hence, components are effective and helpful for future modifications.
Conclusion
A floating checkout widget was introduced to enhance the user experience, setting the site apart from competitors who had not implemented this feature. Additionally, eliminating negative space from the Mega Menu contributed to faster load times, improving user experience and driving more sales.
Like this project
0
Posted Sep 25, 2024
Designed an intuitive online store in Figma, enhancing the user experience and driving higher conversion rates.