Crane Stationary

Company
Crane

Project
Redesign and rebrand Crane Stationary's e-commerce website.

Background
Crane is a luxury stationary company.

Responsibilities
UX Research
Visual UI Design

Kick-off: Previous Homepage Design and Audit

AREAS FOR IMPROVEMENT

1. Find Retailer was highlighted at the top but only provided a directory for pre-made products.

2. The navigation site architecture needed to be more precise and transparent to the target audience.

3. Hero images were not responsive.

4. H1 and body copy was not live text but were part of the image, which resulted in poor SEO, ADA compliance, and search-ability issues.

5. CTA was the Hero image, which resulted in a non-responsive design.

6. Highlighted sections were image files, resulting in poor SEO and responsive design.

7. Highlight items provide little insight about the products or why they are being highlighted. The homepage was also restricted to 4 products.

8. Video would auto-play without providing customers the information about the current video.

9. Blog was not connected, resulting in a static blog section and would require manual updating each time a post was created. Additionally, outside of visiting the linked article, there was no link to the blog.

10. Instagram was highlighted but needed to be managed or maintained.

Previous Products Design

AREAS FOR IMPROVEMENT

1. Filter options are not responsive.

2. Sort by function does not function as intended.

3. Products do not offer what options each offers at a glance. Customers would have to go into each product to understand what paper types, colors, or customizations are provided for each product.

Previous Product Details Design

AREAS FOR IMPROVEMENT

1. Product Details feel unassociated with the product and are below the fold.

2. Paragraph width is too wide for on-screen reading.

3. More Information is too far down on the PDP. Hierarchy of information needed to be revisited.

Rebrand & Redesigns

Before redesigning the e-commerce website, I worked closely with an outside agency to rebrand and redesign the Cranes logo, colors, and typography. The concept was to appeal to a younger audience and modernize the brand image.

Research & Design

Interview Questions

Due to budget and time constraints, I sent a survey to 200 recently active users to conduct quantitative and qualitative research. Out of 200 surveys, we received 108 responses to the below questions:

How easy was it to find the product you were looking for on the website?
(Scale: 1–5, with one being very difficult and 5 being very easy)
How quickly were you able to find what you were looking for on the homepage?
(Scale: 1–5, with 1 being very slow and 5 being very fast)
Were the website’s categories and filters helpful in narrowing down your search for specific products?
(Scale: 1–5, with 1 being not helpful and 5 being very helpful)
Did you find the website responsive and mobile-friendly if you accessed it on a mobile device?
(Scale: 1–5, with 1 being not mobile-friendly and 5 being very mobile-friendly)
How would you rate the overall design and layout of the website?
(Scale: 1–5, with 1 being poor and 5 being excellent)
Did you encounter any issues while navigating the website? If yes, please describe them.
Were the product descriptions clear and informative enough to help you make a purchase decision?
(Scale: 1–5, with 1 being unclear and 5 being very clear)
Do you feel the product images on the website accurately represent the items?
(Scale: 1–5, with 1 being not accurate and 5 being very accurate)
Was there a product you were looking for but couldn't find? If yes, what was it?
How diverse did you find the range of products offered on the website?
(Scale: 1–5, with being very limited and 5 being very diverse)
When purchasing cards or stationery, how important is it to you that they offer personalization options?
What types of personalization (e.g., names, messages, colors) are most important to you?
What do you typically look for in a personalized card or stationery design?
(e.g., fonts, color schemes, design elements)
How important is it to you to see a preview of the personalized card before purchasing?
What would your ideal card personalization process look like? What features would it include to make the experience better?

Aggregated Empathy Map

Based on the user's answers, I generated an empathy map.
These are repeated comments and pain points users experienced.

Persona's

I created the personas based on research, survey questions, and empathy maps.
They provide an overview of our users and the pain points we must address.

Problem Statement

Users seeking elegant greeting cards and stationery often encounter significant challenges when navigating the website. They find it difficult to access clear and detailed product descriptions that highlight personalization options, variations, and customization features available for each card. This lack of intuitive navigation and comprehensive information leads to frustration, as users are unable to make informed decisions regarding their purchases.

Furthermore, without an effective way to filter or categorize products based on personalization features and variations (such as size, color, and design elements), users may overlook suitable options that meet their needs. As a result, they experience a less satisfying shopping journey, risking the potential to choose less-than-ideal cards that do not align with their expectations for elegance and uniqueness.

Key Findings and Learnings:
Inadequate Website Navigation: Users struggle to navigate the site effectively to find the specific cards they are looking for, leading to a cumbersome shopping experience.

Lack of Clear Product Descriptions: Users often do not receive sufficient information about card options, particularly regarding personalization features, variations, and materials, which can hinder their decision-making.

Limited Visibility of Customization Options: Users need to easily identify which cards offer personalization and customization choices, but the current setup does not clearly highlight these features.

Overwhelming Choices Without Proper Filtering: Users can feel overwhelmed by the variety of options available but lack the necessary tools to filter results based on their specific preferences, leading to potential dissatisfaction with their selections.

Hypothesis Solution

To enhance the user experience on the e-commerce stationery website and address the challenges outlined in the problem statement, we propose implementing the following solutions:

Intuitive Navigation and Filtering System:

Hypothesis: By redesigning the website’s navigation to include a more intuitive filtering system, users will be able to easily locate cards that match their preferences for elegance, personalization, and design variations.
Implementation: Introduce filters for categories such as "Occasion," "Personalization Options," "Design Variations" (e.g., size, color, paper type), and "Style" (e.g., minimalist, floral, modern). This will allow users to quickly narrow down their options based on their specific needs.

Enhanced Product Description Pages:

Hypothesis: Providing comprehensive and visually appealing product description pages that clearly outline personalization options, variations, and materials will lead to higher user satisfaction and increased conversion rates.
Implementation: Include sections on each product page dedicated to:Personalization Features: Clearly list what customization options are available (e.g., names, messages, color choices).
Variations: Display all available sizes, colors, and paper types with high-quality images to help users visualize their choices.
Usage Examples: Showcase how the card can be used in real-life scenarios (e.g., invitations, thank-you notes) through lifestyle images or mockups.

Personalization Preview Tool:

Hypothesis: Integrating an interactive personalization preview tool will enhance user engagement and confidence in their selections, leading to a more enjoyable shopping experience.
Implementation: Create a feature that allows users to input their personalization choices and see a real-time preview of how the card will look with their customizations. This can include options for different fonts, colors, and layouts.

Clear Call-to-Action Buttons:

Hypothesis: Utilizing clear and compelling call-to-action buttons throughout the website will guide users toward personalization options and final purchases.
Implementation: Ensure that buttons such as "Customize Your Card" and "Personalizations" are prominently displayed on both category and product pages, making it easy for users to take the next step in their shopping journey.

Goal Statement

To enhance the user experience on the e-commerce platform by improving the navigation system and product detail pages. This will allow users to find the cards quickly and stationery they are looking for, easily access detailed information about customization options and variations, and confidently make informed purchasing decisions.

The goal is to reduce frustration, increase engagement, and streamline personalization, leading to higher conversion rates and greater customer satisfaction.

The website should ensure that personalization options are easily visible, product details are comprehensive, and filters allow users to narrow down their selections effectively. This will create a seamless, enjoyable shopping journey for customers seeking elegant, customizable cards and stationery.

Design Solution

Using the research, multiple wireframe designs, and lo-fi user testing, and the final design solution is below.

Homepage

Product Category

Product Details

Personalization

Key Findings & Takeways

1. Improved User Experience and Satisfaction:
Key Finding: Users now report a more enjoyable and seamless shopping experience due to intuitive navigation, clear product detail pages, and visible customization options.
Insight: Simplifying the navigation system and adding filters for personalization options and variations helped users quickly find what they were looking for, reducing frustration and decision fatigue.

2. Increased Personalization Engagement:
Key Finding: There was a noticeable increase in the number of users customizing their cards and stationery.
Insight: Adding a real-time personalization preview and clear details about customization options on product pages encouraged users to engage more with the personalization tools, leading to higher customer satisfaction.

3. Higher Conversion Rates:
Key Finding: The website experienced an uplift in conversion rates as users were more likely to complete purchases.
Insight: Clear product descriptions, transparent pricing, and visible customization options instilled confidence in users, making them more likely to finalize their purchases.

4. Reduced Cart Abandonment:
Key Finding: Cart abandonment rates dropped significantly.
Insight: By improving the clarity of the product pages and ensuring users understood all customization and variation options before adding products to their carts, hesitation and confusion were reduced, leading to fewer abandoned carts.

5. Enhanced User Confidence in Product Selection:
Key Finding: Users expressed greater confidence in their selections, leading to fewer post-purchase issues such as returns or dissatisfaction.
Insight: Detailed product descriptions, especially around materials, personalization features, and card variations, gave users a clear understanding of what they were purchasing, reducing any mismatch between expectations and the final product.

6. Increased Average Order Value (AOV):
Key Finding: The average order value increased as users were more likely to purchase premium or customized cards.
Insight: The ability to easily personalize cards and explore all available variations encouraged users to invest in more premium options and added customizations, contributing to higher spend per transaction.

7. Stronger Customer Loyalty and Repeat Purchases:
Key Finding: Repeat purchase rates improved, with more users returning for future orders.
Insight: A positive, streamlined user experience built trust and satisfaction, encouraging users to return to the website for additional purchases for future occasions.

8. Positive Customer Feedback and Reviews:
Key Finding: Customer reviews and feedback reflected more positive sentiments about the website’s usability and product offerings.
Insight: The improvements in navigation, product details, and personalization tools resonated with users, leading to better reviews, recommendations, and word-of-mouth referrals.

These key findings reflect the success of the website enhancements, demonstrating that better navigation, clearer product details, and an emphasis on customization lead to improved user engagement, higher conversion rates, and long-term customer satisfaction.