Tropic of Summer

The rise of online shopping has revolutionized the way we buy, but many websites fall short, plagued by cluttered designs and confusing navigation.

This is the challenge Tropic of Summer, a renowned botanical garden and flower shop, now faces.  With a reputation for stunning floral arrangements and diverse plants, their website needs to match the elegance of their offerings.  However, the current browsing experience leaves customers frustrated, making it hard to find what they need.

To solve this, Tropic of Summer is embarking on a research project to streamline their website layout and enhance navigation, ensuring a seamless and enjoyable shopping experience that mirrors their in-store charm.

The rise of online shopping has revolutionized the way we buy, but many websites fall short, plagued by cluttered designs and confusing navigation.

This is the challenge Tropic of Summer, a renowned botanical garden and flower shop, now faces.

With a reputation for stunning floral arrangements and diverse plants, their website needs to match the elegance of their offerings.

However, the current browsing experience leaves customers frustrated, making it hard to find what they need.

Tropic of Summer Displays on Various Screens

Research

To tackle these challenges, Tropic of Summer embarked on a comprehensive website redesign initiative. The primary objectives were to streamline the website layout, enhance navigation systems, and ultimately provide a positive online shopping experience. The following steps were taken to achieve these goals:

User-Centered Design Approach

Tropic of Summer prioritized a user-centered design approach, focusing on the needs and preferences of their customers. This involved conducting user research, including surveys and usability testing, to understand pain points and gather feedback on existing website issues.

Simplified Layout

The website layout was simplified to reduce clutter and create a clean, organized interface. Key features included:

Clear categorization of products
Intuitive navigation menus
Prominent search functionality
High-quality images and concise product descriptions

Responsive Design

Recognizing the importance of mobile shopping, Tropic of Summer ensured that the redesigned website was fully responsive. This adaptation provided a consistent and user-friendly experience across all devices, from desktops to smartphones.

Continuous Improvement

Post-launch, Tropic of Summer committed to continuous improvement by monitoring website performance, analyzing user behavior, and implementing regular updates based on customer feedback.

User-Centered Design Approach

Simplified Layout

The website layout was simplified to reduce clutter and create a clean, organized interface. Key features included:

Clear categorization of products
Intuitive navigation menus
Prominent search functionality
High-quality images and concise product descriptions

Responsive Design

Continuous Improvement

Post-launch, Tropic of Summer committed to continuous improvement by monitoring website performance, analyzing user behavior, and implementing regular updates based on customer feedback.

Discovery from Research

Time Constraints and Lifestyle Factors

Many users have limited time to shop for flower arrangements and prefer quick, efficient online experiences. Understanding this, design solutions were focused on streamlining the browsing and purchasing process to save users time.

Overwhelm from Cluttered and Text-Heavy Websites

Users can easily become overwhelmed by cluttered websites with excessive text, leading to frustration and abandonment of the shopping process. This insight drove the design towards simplicity and clarity.

Importance of Information Security and Satisfaction

Users need to feel confident about the security of their personal and payment information. Ensuring a secure checkout process is critical for user trust and satisfaction.

Early Iterations

I sketched paper drafts of each app screen to ensure all elements translated into digital wireframes. Our main priority was creating a quick, easy ordering process with a contrast color scheme.

Home screen variations focused on optimizing the browsing experience and creating a relaxing environment.

This approach ensured a seamless, efficient, and visually appealing design for the Tropic of Summer website.

Tropic of Summer Paper WireFrame Sketches

Since Tropic of Summer guests and clients can access the site on a variety of different devices, I started to work on designs for additional screen sizes to make sure the site would be fully responsive.

Sitemap

Recognizing users' navigation challenges, I crafted a sitemap to streamline website flow. My aim was to strategically enhance overall navigation with a clear, user-friendly structure.

The chosen architecture simplifies the browsing experience, aligning with Tropic of Summer's goal of easy accessibility and seamless interaction.

Sitemap

Wireframes

Transitioning from paper to digital wireframes streamlined the redesign process, clarifying user pain points and enhancing the experience.

Prioritizing navigation ease, a key user need, resulted in the product meeting users' expectations. This iterative approach, combining wireframing and research-driven design, ensured the Tropic of Summer website aligned with user preferences for a seamless browsing experience.

Wireframe of the homepage for Tropic of summer. Shows placement of the navigation and where the background image will be placed on the final mockup.

Prototype

The digital wireframes formed a low-fidelity prototype focused on ordering a flower arrangement to effectively gather user feedback during the usability studies.

Usability Study

I conducted two rounds of unmoderated usability studies, each 20-30 minutes with 5 remote participants.

Initial Study

The insights gained from this study informed the progression from wireframes to high-fidelity mockups.

60%

Wanted a verbal cue, such as "Item added to cart," along with the cart number indicator.

This additional confirmation will boost the user's confidence that the item has been successfully added. Relying solely on the cart number may not suffice for some users and adding a verbal cue reassures them and prevents confusion or mistakes.

Furthermore, for users with visual impairments or difficulty seeing the screen, a verbal cue ensures they are aware of the addition to their cart, enhancing the overall shopping experience.

Examples of the add to cart feature from the shop pages. Final mockup is placed on the left in the front. The wireframe is on the right slightly behind the final mockup.

Second Study

In this round of testing, I employed a high-fidelity prototype to gather insights for design refinement based on participant feedback.

83%

Wanted the option to sign up for emails at any point during their shopping experience.

Initially, users may not be interested in receiving emails when they first visit the site.

However, as they browse and make purchases, they might change their minds and wish to receive promotional updates. Allowing email sign-up throughout the shopping process eliminates the need to navigate back to the homepage, saving time and effort.

This convenience increases the likelihood of users subscribing to emails, enhancing user engagement and boosting potential sales for the company.

Responsive Design

I included considerations for additional screen sizes in my mock ups based on earlier sketches of wireframes. Optimizing the browsing experience with a cohesive look for a range of device sizes ensures that users can access and use the website regardless of the device.

Inspiration

The theme for Tropic of Summer was inspired by the Forest Temple in The Legend of Zelda: Ocarina of Time, aiming to create a mysterious, whimsical design with a forest-like feel. Influenced by the greens and browns of the Forest Temple, the homepage embraces nature with a touch of adventure.

The Forest Temple’s eerie atmosphere and puzzle-solving gameplay mirror the shopping experience, where users navigate various options, make decisions based on preferences and needs, and ultimately find the best solutions. Shopping, like a puzzle, involves multiple steps and requires critical, strategic thinking, which this design seeks to emulate and enhance.

Images of The Legend of Zelda: Ocarina of Time in The Forest Temple.

The Design System

Design systems provide software designers and developers a library of proven, reusable design patterns and knowledge. They enhance team collaboration and bring consistency to the user experience. That is why I like to create a UI Design System for every project.

To create a visually cohesive look, I chose a monochromatic theme with the main color being violet. To have a more eye catching notification color, I used the neon pink as as a way to draw attention for when items were either added tot the basket or as an indication throughout the check out process.

I used tropical forest imagery and plant visuals to create the feeling of a secret oasis, ensuring these elements fit within the overall color scheme to complete the look.

This cohesive design aims to immerse users in the theme, enhancing their shopping experience on Tropic of Summer.

End Results

The implementation of the streamlined website layout and enhanced navigation systems yielded significant positive outcomes for Tropic of Summer:

Improved User Experience

Customers reported a more enjoyable and efficient shopping experience. The clean design and intuitive navigation made it easier to find and purchase products.

Increased Sales

The enhanced user experience translated into higher conversion rates and increased sales. Customers were more likely to complete purchases, leading to a notable boost in revenue.

Higher Customer Satisfaction

Positive feedback from customers highlighted the effectiveness of the redesign. Many appreciated the ease of use and the ability to quickly locate desired items.

Enhanced Brand Loyalty

By prioritizing user experience, Tropic of Summer obtained stronger customer loyalty. Satisfied customers were more likely to return for future purchases, contributing to repeat business and long-term brand loyalty..

Strengthened Brand Reputation

The successful website redesign positioned Tropic of Summer as a leader in the online botanical and floral market. The brand's commitment to providing a superior online shopping experience enhanced its reputation and attracted new customers.

Improved User Experience

Customers reported a more enjoyable and efficient shopping experience. The clean design and intuitive navigation made it easier to find and purchase products.

Increased Sales

The enhanced user experience translated into higher conversion rates and increased sales. Customers were more likely to complete purchases, leading to a notable boost in revenue.

Higher Customer Satisfaction

Positive feedback from customers highlighted the effectiveness of the redesign. Many appreciated the ease of use and the ability to quickly locate desired items.

Enhanced Brand Loyalty

Strengthened Brand Reputation

Final Mockups of the Tropic of Summer website

T

r

o

p

i

c

o

f

S

u

m

m

e

r

Botanical Garden and Flower Shop

Responsive Web Design

T

r

o

p

i

c

o

f

S

u

m

m

e

r

Botanical Garden and Flower Shop

Responsive Web Design