A responsive web design for marketing an innovative prop controller.
THE CLIENTS:
End Users/Consumers: Individuals interested in purchasing technical products for personal or professional use.
Businesses/Organizations: Companies needing specialized technical products for operations or projects.
Engineers and Technicians: Professionals seeking reliable tools for their work.
Hobbyists and Makers: Enthusiasts engaged in DIY projects or technology-related hobbies.
THE PRODUCT:
Responsive Web Design
MY ROLE:
UX/UI Design, Market Research, Competitor Analysis, Participant Recruitment, User Interviews, Affinity Map, Project Goals, Problem Statement, Feature Set, HMW’s, Persona Development, Site Map, User Flows, Wireframing, Prototyping, User Testing, Iterations, UI Kit
THE TOOLS:
Figma, Figjam, SimilarWeb, Google Docs, Google Sheets, Google Meet, Screen Record, TapeACall, Noun Project, Envato, Coolors
TIMEFRAME:
14 weeks, 260+ hours
The Background:
Develop a responsive website for a small business specializing in a unique prop controller for the entertainment industry. Using Shopify, the business will launch an innovative flickering light device designed for haunted attractions, enhancing experiences in film, theater, themed events, and immersive installations. The website will showcase the brand, highlight product features, and engage a diverse audience while ensuring a smooth shopping experience and potential for future growth.
The Objective:
To design and launch a responsive e-commerce website that effectively showcases the innovative entertainment prop controller, providing users with an engaging shopping experience that drives conversions and builds brand loyalty.
The Potential:
A well-designed website can reach various markets, including entertainers, hobbyists, and professionals. By showcasing the prop controller's unique features and ensuring a smooth shopping experience, it can boost brand awareness, customer engagement, and sales.
The Solution:
Build a responsive website that features eye-catching visuals, clear product descriptions, customer reviews, and video demos. Ensure easy navigation for users, incorporate a friendly call-to-action, and simplify the checkout process. Additionally, implement SEO and social media strategies to attract more visitors and increase conversions.
To ensure a competitive and effective approach, a detailed look at competitors will pinpoint best practices and uncover opportunities for standing out in the marketplace.
COMPETITOR ANALYSIS
The market analysis unveils expansive insights into competitors' strengths and weaknesses, trends, consumer preferences, and pricing strategies, setting the stage for product differentiation and impactful marketing.
Enhanced Product Reviews:
Implement a system for gathering and displaying customer reviews to build trust and transparency.
Strong Online Presence:
Develop active social media profiles and engage with customers to increase brand visibility and interaction.
A summary of key findings:
Fright Props focuses on Halloween supplies, with weaknesses in product reviews but offers strong customer support and a diverse range of products.
Eastern Voltage specializes in DIY electronic kits, facing challenges with limited reviews and no social media presence, yet provides direct sales and consulting.
Lights Alive centers on advanced lighting solutions, lacking individual product reviews and having a cluttered site, but offers helpful instructional videos and detailed listings.
By examining the strengths and weaknesses of similar websites, essential focus areas for development have been highlighted, preparing a solid baseline for the project:
Excellent Usability:
Streamline website design to enhance navigation and reduce clutter, making it easy for customers to find products.
Expand Product Range:
Once new products are created and added for sale, ensure offerings align with customer feedback and market trends.
Customer Support:
Provide robust support and educational resources, such as tutorials and guides, to assist customers in product usage.
With a strong set of guiding values for the website's development, crafting a compelling list of questions for interviewees is crucial for gaining valuable insights and fostering deeper interest in the project.
USER INTERVIEWS
A well-designed website is more than just a digital presence; it serves as the cornerstone of a brand's success, delivering seamless user experiences that engage, inform, and transform visitors into loyal customers.
Collecting insights from my interviewees on their top priorities will be focused on:
1. Types of props they currently use or want.
2. Desired features in a prop controller.
3. Budget limits, preferred shopping locations, and purchasing methods.
4. Challenges faced when shopping for and buying prop controllers.
5. Previous experiences to ensure the website design addresses their needs.
The interview results not only met expectations but also illuminated key opportunities that significantly influence customers' purchasing decisions:
Develop User-Friendly Designs
Create prop controllers that cater to both novice and experienced users, focusing on ease of use and clear instructions.
Convenient Online Shopping
Ensure that shipping is efficient and offers tracking capabilities, as quick delivery is a major consideration for customers.
Comparison Tools
Develop features such as side-by-side comparison charts, filters, and video demonstrations to help users easily evaluate different products.
Attractive Pricing
Design pricing strategies that include discounts for bulk purchases and seasonal promotions to attract cost-conscious buyers.
Essential Features
Key features include multi-channel control, ease of programming, durability, remote functionality, and user-friendliness, emphasizing versatile controllers.
Reliable Reviews
Incorporate a robust review and rating system on the product pages to build trust and help buyers in making informed decisions.
Community Support
Establish a forum or blog dedicated to prop building, where users can share ideas, seek advice, and access how-to guides, fostering a sense of community.
Responsive Customer Support
Provide multiple customer support channels, including live chat and detailed resources, to enhance the customer experience and address inquiries promptly.
Now that interviews have been completed and initial suspicions confirmed, organizing the information into an affinity map will categorize specific website needs and enhance the design strategy.
AFFINITY MAP
Grouping similar items from the interviews will reveal patterns that enhance the website design, better align with user expectations, and improve the overall experience.
SHOPPING PREFERENCES
SUPPORT
Shopping Preferences
Method of Shopping
Product Info/ Features
Support
Community
Payment Options
WAYS TO SHOP
PAYMENT OPTIONS
PRODUCT INFO / FEATURES
Results Delivered
The affinity map summarized user insights across several key areas, forming the following main categories:
COMMUNITY
By leveraging insights from competitive analysis, interviews, and affinity mapping, the groundwork is set for creating user personas. This important step will not only deepen the understanding of the target audience's needs, behaviors, and motivations but also spark new ideas for engagement.
USER PERSONAS
Grasping the user's needs is more than just important; it's the cornerstone of crafting impactful experiences that truly resonate and nurture lasting connections.
The insightful research process thus far has led to the creation of three distinct user personas for the prop controller website, each capturing unique user traits. This detail and development paves the way for a tailored approach that enhances user experience and boosts engagement.
The creation of user personas revealed valuable characteristics of various user types, capturing the unique attributes and needs of our target audience. With this clarity, a solid foundation is set for guiding design and marketing strategies, resulting in insightful problem statements that resonate with users.
PROBLEM STATEMENTS
Crafting problem statements with empathy is crucial as it highlights the real challenges users face, directing attention and energy toward impactful solutions while ensuring that the most relevant issues are thoughtfully addressed.
Websites lack user-friendly design and navigation, making it difficult for users to purchase a prop controller. This results in high bounce rates and abandoned carts, negatively affecting sales and customer satisfaction.
1.
-How can we design the website layout and navigation for a more intuitive shopping experience that guides users through purchasing?
-How can we implement user testing and feedback to identify pain points and improve the shopping experience for diverse users?
Websites lack sufficient information about the prop controller’s features and setup, confusing new users about its value. This hinders purchasing decisions, leading to decreased sales, negative reviews, and reduced brand trust, ultimately affecting growth.
2.
-How can we develop detailed product descriptions, usage scenarios, and instructional videos that highlight the prop controller's benefits and applications?
-How can we create a resources section on the website with FAQs, setup guides, and troubleshooting tips to enhance user understanding?
The lack of a community platform on the website limits user engagement and knowledge sharing among prop controller customers. This results in missed tips and advice, reducing customer retention, brand loyalty, and impacting sales and market position.
3.
-How can we create an online community forum for users to share tips, ask questions, and collaborate on prop controller projects?
-How can we add live chat support and a knowledge base to provide immediate assistance for users with their prop controller?
The problem statements highlight important user challenges that are essential for shaping the website's features. By analyzing these insights, a well-defined list of the most crucial features to include can be created.
FEATURE SET AND INFORMATION ARCHITECTURE
The key features revealed a well-organized visual hierarchy of categories that effectively meets user needs and enhances functionality.
Must have categories include:
User-Friendly Navigation
Detailed Product Descriptions
Mobile Optimization
Customer Reviews and Ratings
User Flow: Image A
User Flow: Image B
SEO Optimization
Contact Us Page
About Us Page
Social Media Integration
With a feature list compiled and the essential categories identified, user flows can been developed to illustrate a distinct path based on two different user needs.
*Following the completion of the second user flow, image B, and discussions with the business owner of 236 Labs, it was noted that not all user reviews were available, necessitating the creation of a review page at a future time. Moving ahead, user flow image A will be utilized for the development of low-fidelity wireframes.
LOW-FIDELITY WIREFRAMES
Low-fidelity wireframes are essential for rapid iteration and feedback, helping teams visualize concepts and refine ideas before detailed design.
With a variety of low-fidelity screen layouts, a user flow, and a feature list as guides, the high-fidelity wireframes are set for construction, built on a solid design foundation that fully embraces the necessity for iteration.
HIGH FIDELITY WIREFRAMES
Building high-fidelity wireframes links the idea and its execution, providing a clear view of the user experience. This process not only ensures that every design choice is carefully thought out and matches the overall brand strategy, but it also serves as a good starting point for understanding that iterations will be necessary.
With the completion of wireframes, they are ready for testing. A comprehensive usability test plan will be crafted to evaluate how well user expectations are fulfilled. Should any differences emerge, the necessary adjustments will be pinpointed to elevate the overall user experience.
USABILITY TEST PLAN
Creating a solid usability test plan is essential for asking the right questions and getting useful feedback. To achieve this, the original group of interviewees was invited to complete a specific task while also reviewing the high-fidelity design. The insights gathered and behaviors examined will guide any necessary changes and improvements.
Individual test results:
-
Task Completion:
Completed, but skipped selecting a device option.
Errors/Roadblocks:
None noted.
Questions/Help Needed:
None.
Ease of Use:
Comfortable navigating.
Feedback:
Clear information, liked design, no reading issues, felt comfortable, very confident (5), would return if buying.
Suggestions:
Eliminate the buttons for selecting options.
-
Task Completion:
Completed without hesitation, selected product option before adding to cart.
Errors/Roadblocks:
None noted.
Questions/Help Needed:
None.
Ease of Use:
Very easy to navigate.
Feedback:
Clear information, neat design, no reading issues, felt interested, very confident (5), would return.
Suggestions:
Include product dimensions and reference images for size comparison.
-
Task Completion:
Completed easily with no errors.
Errors/Roadblocks:
None noted.
Questions/Help Needed:
None.
Ease of Use:
Relaxed while navigating.
Feedback:
Clear information, cool design, no reading issues, very confident (5), would return.
Suggestions:
None.
-
TTask Completion:
Completed, skipped the radio button and went straight to "add to cart."
Errors/Roadblocks:
None noted.
Questions/Help Needed:
None.
Ease of Use:
At ease while navigating.
Feedback:
Clear information, fit the product well, no reading issues, very confident (5), would return to check for new products.
Suggestions:
Would like to see more products as they are developed.
-
Task Completion:
Completed, went straight to "add to cart" without selecting an option.
Errors/Roadblocks:
None noted.
Questions/Help Needed:
None.
Ease of Use:
Comfortable navigating.
Feedback:
Clear information, liked structure/layout, no reading issues, very confident (5), would return.
Suggestions:
None.
Add Size Reference Images:
Include images of products next to familiar objects to provide a clearer sense of scale, reducing uncertainty and boosting purchasing confidence.
Overall Test Results & Conclusion:
The usability testing of the 236 Labs website demonstrated a generally positive user experience, with participants expressing satisfaction with the design, clarity of information, and ease of navigation. Most users completed the task of purchasing a controller smoothly, with no significant roadblocks encountered. However, a common observation was the tendency to skip selecting device options, indicating a potential area for improvement.
Insights Gathered:
1. User Preferences: Testers appreciated the overall aesthetic and functionality of the website, particularly its alignment with technical and engineering themes.
2. Clarity of Information: Users found the product information clear and easy to understand, which contributed to their comfort while navigating the site.
3. Need for Size References: Multiple participants suggested incorporating images that provide a reference for product size, enhancing their understanding of dimensions and scale.
4. Video Demonstrations: Users expressed interest in seeing product demonstrations, which could further engage potential buyers and clarify product functionality.
5. Evaluate Radio Button Usage: Consider eliminating or redesigning the radio buttons for device options, as users often skipped them. This may streamline the purchasing process and reduce confusion.
*While the above suggested criteria for size references and video demonstrations cannot be implemented at this time due to the client's inability to provide the necessary items, they remain important add-ons for future development. Once the required materials are available, implementing these enhancements will further improve user experience and drive customer satisfaction. The future considerations are outline below in detail:
Future Considerations:
Incorporate Video Demonstrations:
Once available, add video demonstrations of the products to the website. These videos can effectively highlight features, showcase usage, and enhance overall user engagement.
Gather User Feedback:
Continue gathering user feedback as new products and features are added to ensure that the website meets evolving user needs and expectations.
ITERATIONS
Before diving into testing the wireframes and taking a closer look at the results mentioned earlier, a few important aspects came to light that were initially missed. The changes made before testing, along with those that emerged from the usability test results, are shared below. These updates are illustrated with visual representations, complete with labels and numbers that correspond to each change made on every screen or page, making it easier to follow the journey of improvement.
Screen 1 / Before Testing / Labeled as 1 - identifying the change that needs to be implemented
1. Before testing the prototype with users, my goal was to ensure that only one option could be selected before moving on to the “add to cart” step. However, there were challenges in figuring out how to implement a seamless interaction for this feature. I realized I needed to adjust the design to accommodate an effective response.
Screen 1 / 1st Revision - Before Testing / Labeled as 1 - change made and shown below
1. I separated the two options by giving each its own “add to cart” and “buy now” buttons. This approach created a more effective version for through user testing.
Screen 1 / 2nd Revision - After Testing / Labeled as 1 and 2 - changes made and shown below
1. After conducting the tests, it became clear that most users were bypassing the radio button altogether and directly clicking “add to cart” or “buy now.” Insights gathered during the interviews revealed that the radio button was seen as unnecessary. Once it was removed, it became evident that there was no reason to keep a disabled version of the option. This led to the decision to keep both options in default mode (bright white).
2. To further enhance direction, I Included the text to further assist users with additional information that there are two options available.
Screen 2 / Before Testing / Labeled as 3 and 4 - identifying the changes that need to be implemented
3. Before testing the prototype with users with this design, I became aware that I needed to provide the ability to choose a quantity so I added a dropdown arrow in the quantity box.
4. I was missing the quantity on the cart in the navigation bar.
Screen 2 / Before Testing / Labeled as 3 and 4 - changes made and shown below
3. Dropdown arrow added to the quantity box.
4. Cart quantity added to the navigation bar.
No additional changes were needed for screen 2 after testing.
Screen 3 / Before Testing / Labeled as 5, 6 and 7 - identifying changes that need to be implemented
5. Dropdown arrow missing in the quantity box.
6. Cart quantity missing in navigation bar.
7. No kebab next to the product to allow for the ability to edit the selected product or quantity.
Screen 3 / Before Testing / Labeled as 5, 6 and 7 - changes shown
5. Dropdown arrow included in the quantity box.
6. Cart quantity added to the navigation bar.
7. Kebab added next to the product to allow for the ability to edit the selected product or quantity.
8. Text added to guide user in selection to proceed.
No additional changes were needed for screen 3 after testing.
Screen 4 / Before Testing / Labeled as 9 - identifying the change that needs to be implemented
9. Cart quantity missing in navigation bar.
Screen 4 / Before Testing / Labeled as 9 - change shown
9. Cart quantity added to the navigation bar.
No additional changes were needed for screen 4 after testing.
REVISED HIGH FIDELITY WIREFRAMES
Confident in the design iterations, these changes tackle challenges and enhance functionality, ultimately leading to a better overall experience for users. To demonstrate responsiveness, both tablet and phone screens are included as well.
With each revision of our wireframes, we turn ideas into actionable designs, ensuring clarity and user-centricity in every detail.
Home Screens
Product Screens
Shopping Cart Screens
Checkout Screens
Review Screens
PROTOTYPE
Careful attention to detail has crafted a seamless interface that truly invites user engagement and guarantees a smooth experience. With intuitive navigation, users can easily explore the features without any frustration. The website was designed to mirror the business logo and the product design envisioned by the owner, elevating the site's technological vibe through its textures and typography. With a fully prepared and refined mockup of the wireframes, the prototype is now set for testing, and there's a strong belief that further iterations will significantly boost product development.
The prototype is specifically designed for first-time users visiting the website to purchase a single prop controller with a power supply.
Check out the prototypes to experience the interface here:
236 Labs Prototype Test
A UI Kit was also developed to establish a cohesive design system, ensuring consistency across all elements of the website. This kit includes standardized components, styles, and guidelines that facilitate a seamless user experience while maintaining the brand's identity.
In conclusion, the project has successfully come together. It successfully integrates a user-friendly interface that truly reflects the brand's identity, thanks to careful design choices that reflect the logo and product aesthetics. The prototype, crafted specifically for first-time users looking to purchase a prop controller, showcases a clear task flow and makes navigation a breeze.
Moving forward, it’s crucial to focus on gathering user feedback during testing. This will help to identify areas for improvement and explore additional features that could elevate functionality. Plus, once the business owner provides those essential assets—like high-quality images to accurately showcase the product's size and a detailed video of it in action—these elements will really enrich the website's content. Continuous iterations based on user insights, along with the inclusion of these additional resources, will be vital in refining the interface and ensuring it meets the evolving needs and expectations of our users.