font-family: 'carbona-variable', sans-serif; font-variation-settings: 'slnt' 0, 'MONO' 0, 'wght' 700;font-family: 'marydale', sans-serif; font-weight: 400; font-style: normal;
Phillips_PC

Phillips Design

A Concord, MA residential showroom and interior design company focused on helping you create the home and space of your dreams.

Project Overview

Create an intuitive and efficient way for people to purchase paint products through an e-commerce platform attached to the existing website, which they can accomplish using a simple and intuitive menu.

Details

Type: Web app | Team project | 3 Designers
Role: UX research | Wireframing | User flows
Sketches | Usability tests | Hi-fi designs
Client: Explo
Duration: 3 Weeks

Tools: Sketch | Axure | InVision | Photoshop

Phillips

Problem

Navigating the online store for Phillips Fine Paint presented a real headache for customers.

Trying to find and buy paint products on the website felt like solving a puzzle with missing pieces. The website lacked a smooth way to make purchases, making it confusing for customers. There was no easy-to-use menu, leaving users feeling lost and frustrated. The online experience didn't match the high quality of Phillips Fine Paint's products.

This conceptual project stepped in to fix these issues. We wanted to create a virtual shopping space that felt as simple and natural as strolling through an actual store. Our goal was to make buying paint online a breeze, with a menu that guides users effortlessly. We aimed to transform the digital shopping journey, making it as intuitive and enjoyable as selecting paint colors in person. The focus was on bringing a seamless, user-friendly, and hassle-free online paint shopping experience to the customers of Phillips Fine Paint.

Objectives

In reshaping the online experience for Phillips Fine Paint, the objectives were clear. First and foremost, our aim was to design an e-commerce platform seamlessly integrated into the existing website, providing users with an instinctive and straightforward way to purchase paint products. The focus was on crafting an intuitive information architecture that harmonized with the brand's identity, offering users a digital shopping environment that mirrors the simplicity and elegance associated with Phillips Fine Paint. Additionally, the objective was to enhance user engagement by introducing an efficient menu system, guiding customers through a hassle-free paint selection and purchase journey.

Goals

The overarching goal of this conceptual project was to revolutionize the way customers interact with the Phillips Fine Paint online store. Specifically, we aimed to increase the accessibility of paint products by introducing a simple and intuitive menu. This not only involved streamlining the user journey for existing customers but also attracting new ones. Our goal was to create a visually appealing and user-friendly e-commerce platform that encourages users to explore the extensive range of paint options effortlessly. Ultimately, success would be measured by heightened user satisfaction, increased paint product sales, and a notable uplift in the overall digital shopping experience for patrons of Phillips Fine Paint.

Phillips

Research

User Interviews

In the user research phase, I had the privilege of engaging in meaningful conversations with the lifeblood of Phillips Fine Paint—the customers. Through one-on-one interviews, I uncovered the intricate details of their online paint shopping experiences. Their stories, preferences, and even the challenges they faced navigating the existing website provided invaluable insights.

Furthermore, discussions with the store owner added a layer of depth to the research. Learning about the vision, ethos, and aspirations behind Phillips Fine Paint offered a unique perspective. The owner's insights into customer interactions and expectations fueled our understanding of the brand's essence.

A few visits to the physical store were indispensable. Observing the ambiance, understanding the layout, and witnessing firsthand how customers interacted with paint products provided a tactile understanding that no digital interaction could fully capture.

This multi-faceted approach to user research ensured a holistic view. It wasn't just about the clicks and scrolls; it was about the stories, the connections, and the essence of Phillips Fine Paint. The synthesis of these insights would serve as the compass guiding the redesign, ensuring that the online experience harmonized seamlessly with the spirit of the brick-and-mortar store.

Need
Users, as fundamental necessities, need a seamless and efficient online shopping experience for paint products. This includes a straightforward way to find, explore, and purchase items. Clear product information, easy navigation, and a secure checkout process are essential needs. Users also require a connection between the online and physical store experiences, ensuring a cohesive and integrated shopping journey.

Wants
Users desire a visually appealing and user-friendly e-commerce platform. They want an intuitive menu that simplifies the process of finding and selecting paint products. A wish for informative product descriptions, color visualizations, and user reviews aligns with their desire for a comprehensive and enjoyable shopping experience. Additionally, users want the online store to reflect the elegance and quality associated with Phillips Fine Paint.

Desires
Beyond basic needs and wants, users harbor desires for personalization. They seek a tailored experience, where the platform understands their preferences and recommends paint products based on their unique tastes. The desire for a seamless transition between online and offline interactions also emerges—a wish for a harmonized experience where the digital and physical aspects of Phillips Fine Paint complement each other seamlessly. Overall, users desire a digital journey that mirrors the warmth and expertise they encounter in the physical store.

Untitled-1-3

Research debriefing and solution brainstorming sessions

Solution discovery

In navigating the solution discovery phase, a hands-on and immersive strategy unfolded. To craft an optimal information architecture, menu structure, and search feature, a unique card sorting exercise was designed. One hundred meticulously chosen paint items were visually cataloged, forming the foundation for a comprehensive card sorting activity involving more than five participants. This exercise aimed not only to decipher user preferences and mental models but also to co-create an architecture that resonates with a diverse user base.

In parallel, a keen eye was cast on industry peers. Comprehensive analysis and heuristic evaluations were conducted, drawing inspiration and insights from giants in the field. The experiences of The Home Depot, Sherwin Williams, and Farrow & Ball were scrutinized to distill best practices, innovative features, and potential pitfalls. This competitive analysis not only enriched the understanding of industry benchmarks but also served as a compass, guiding the development of a solution that stood out while aligning seamlessly with user expectations. The fusion of user-driven card sorting and industry insights formed the bedrock of our approach, ensuring a solution that marries user-centricity with industry excellence.

User flows

Screenshot 2023-12-07 at 12.07.10 PM
111111-copy
qwwwqww-1

Design

Screenshot 2023-12-07 at 12.07.26 PM

Wireframes

Knowing what screens I need to design, I drew low fidelity wireframes,
to compose the prototype for testing.

For me, it's important to have a visual hierarchy and to arrange the
information allowing the user to accomplish their tasks as easily as possible.

kkiiyihi

Mid-fi UI Designs

wireframes
Untitled-2

Last, I add the UI elements to make the screens come to life.

 This application is intended to create a less stressful and more intuitive experience, so I assembled elements with a UI kit and made it similar to the existing page.

Test

Usability testing

The usability testing was conducted using
an Axure mid-fidelity prototype of the new website with the shopping feature incorporated. 

Test goals

Evaluate User Navigation:

Assess how users navigate the revamped e-commerce platform, specifically focusing on the intuitiveness of the new menu structure and information architecture.
Gauge Search Feature Effectiveness:

Measure the efficiency and effectiveness of the search feature in helping users find specific paint products, evaluating factors such as search accuracy and relevance.
Examine Card Sorting Impact:

Understand the impact of the card sorting exercise by evaluating users' ability to categorize and locate paint products based on the insights derived from the exercise.
Assess Overall User Experience:

Gauge the holistic user experience, including factors such as visual appeal, ease of use, and satisfaction, to ensure that the revamped platform aligns with users' expectations and preferences.
Identify Pain Points and Opportunities:

Uncover any potential pain points or areas of improvement by observing user interactions and collecting feedback, allowing for iterative enhancements to address user needs and desires effectively.

Elements

Design Iterations

Participants were able to make it through the prototype with no major issues, but a pattern that some of them missed was: images next to the information, the placement, and content size.

Screen Shot 2019-06-21 at 1.55.16 AM
23232
D32R32R

Users wanted to navigate to the top-level categories.

I modified my design to expand on hover and made all levels of categories clickable and added some visuals to help them make sure they find the right product in less time.

Re-sized all the content to better fit and clarify all the information requested. 

Last, I made the checkout process more streamlined leading them to see all their checkout decisions at once on the last screen.

The SUS after the changes increased from 75% to 100% and the users felt more confident accomplishing the task with some illustration from the product.

Conclusion

In concluding this project, it is immensely gratifying to witness the transformation from a conceptual idea to a user-centric e-commerce platform for Phillips Fine Paint. The collaboration with users, store owners, and stakeholders provided valuable insights that guided the design process. The intuitive design and simplified navigation aim to redefine the paint-purchasing experience, emphasizing both visual appeal and functionality. The iterative testing with low-fidelity clickable wireframes allowed for dynamic adjustments, ensuring that user feedback directly shaped the final product. As we bid farewell to this phase, it's not just the completion of a project but the beginning of a user journey—one that seeks to harmonize the art of choosing paints with the ease of online shopping. The lessons learned and the strides made toward user satisfaction mark the success of this endeavor, fueling anticipation for the positive impact it will have on users' lives and the brand's digital presence.

Video Player

Learnings

Plan further ahead!
A 2-week sprint for this project starting with research ending with an interactive prototype can be pretty
tight if not planned accordingly.

I thought I did well until the presentation, but I should have allotted myself more time to prepare and practice.

User-Centricity is Key:

The project reinforced the importance of placing users at the forefront of design decisions. Understanding their preferences, needs, and behaviors significantly impacted the success of the e-commerce platform.
Iterative Testing is Crucial:

Conducting usability tests with low-fidelity clickable wireframes proved invaluable. It highlighted the effectiveness of iterative testing, allowing for quick adjustments and improvements based on user feedback.
Simplicity Enhances User Experience:

Users appreciated simplicity in design and navigation. The lesson learned is that an intuitive and straightforward approach contributes positively to the overall user experience.
Personalization Drives Engagement:

Features like 'Recommended for You' resonated with users, emphasizing the power of personalization. Understanding and catering to individual preferences can significantly enhance user engagement.
Visual Elements Matter:

The project emphasized the impact of visual elements. From color choices to interactive features, visual appeal plays a crucial role in attracting users and keeping them engaged throughout the platform.
Effective Communication is Essential:

Clear communication, both in design and functionality, is crucial. Ensuring that users can easily understand the purpose of each feature and how to interact with them contributes to a positive user experience.
Balance Innovation with Familiarity:

Introducing innovative features, such as an interactive color wheel, can set a platform apart. However, maintaining a balance with familiar elements ensures that users feel comfortable and can quickly adapt to new features.
User Feedback Guides Enhancements:

The feedback collected during usability testing and user interviews played a pivotal role in shaping enhancements. Listening to users' preferences and pain points provided valuable insights for refining the platform.
Inspiration Fuels Engagement:

The 'Inspiration' section emerged as a powerful tool to inspire users for their painting projects. Offering creative ideas and suggestions adds value to the overall user experience.
Continuous Learning is Fundamental:

The dynamic nature of user preferences and digital trends underscores the importance of continuous learning. Staying abreast of industry developments and user expectations is vital for creating relevant and effective digital experiences.

Screen-Shot-2020-05-13-at-7.31.12-PM

2024 All rights reserved