PROJECT BACKGROUND
The Knottery is a small business located in San Diego that specializes in creating handcrafted macrame products. Their products include wall hangings, plant hangers, earrings, keychains, and custom orders. The Knottery currently sells its products at farmer's markets, selected retailers, and through social media for custom orders.
Our objective is to develop a user-friendly e-commerce website that enables customers and potential customers to explore and purchase various macrame products, learn more about the small business, submit a custom order, make a seamless online transaction, and get in touch with the maker.
ROLE
User Research, UX/UI Design, Branding, Prototyping, Usability Testing
PROJECT DURATION
5 weeks
TOOLS
Figma, Google Forms, Whimsical, Lucid Chart
I. Research
GOALS
• Research the market and competition to learn more about online retail behaviors and trends.
• Understand the reasons why people prefer to shop on online marketplaces like Etsy.
• Understand the reasons behind people's desire to purchase personalized products.
• Gain insights into customer behavior when using an online platform to shop for products and place custom orders.
PROCESS OVERVIEW
• Market Research
• Competitive Analysis
• Provisional Personas
• Surveys
MARKET RESEARCH
Conducting market research is crucial to reveal trends, demographics, and insights into the e-commerce experience and customized orders.
COMPETITIVE ANALYSIS
I conducted a competitive analysis to identify gaps, strengths, and opportunities when shopping for handmade products and placing custom orders.
PROVISIONAL PERSONAS
I created provisional personas to make assumptions about customers and identify patterns and behaviors.
SURVEY RESULTS
Number of Participants: 5
Ages: 25 - 64 years old
Average yearly spending on handcraft/custom
products: $100-$200
SUMMARY
• Willing to pay $50-$100 for a handcraft/custom product.
• 80% of participants shop for handcraft/custom products every day.
• The motivations for purchasing handcrafted or custom products include supporting small businesses, admiring the skill involved in the creative process, and connecting with the maker or seller.
• 80% of participants make repeat purchases from the same maker/seller due to product quality.
• 80% of participants prefer to shop online at the website of the individual maker or seller.
• The features that attract customers to online shopping include getting to know the seller, viewing customer reviews and high-resolution photos, and the ability to order custom products.
• 100% of participants have ordered a custom product due to its one-of-a-kind design.
• When considering ordering custom products, people often hesitate due to concerns about pricing, perceived value, and the time it takes for the order to be fulfilled.
II. Define
GOAL
Synthesize research to identify core problems.
PROCESS OVERVIEW
• Persona
• Customer Journey Map
USER PERSONA
I created the persona Mindy by gathering user data to understand their goals, needs, and frustrations.
CUSTOMER JOURNEY MAP
I created a customer journey map to gain insight into the target customer and identify potential opportunities.
III. Ideate
GOALS
Ensure a seamless custom order process by organizing the website structure and mapping out ideal user journeys.
PROCESS OVERVIEW
• Sitemap
• Task Flow
• User Flow
SITEMAP
After conducting user research and analyzing competitors' websites, I created a well-structured sitemap to facilitate easy navigation and help users find what they are looking for.
TASK FLOW
I created a simple task flow to help me understand how users interact with the website when ordering custom products.
USER FLOW
I communicated with the small business owner to understand her current custom order process and also conducted competitive analysis to explore how other small business owners handle their custom order process. This exercise helped me gain a better understanding of the various scenarios a customer would go through when placing an order for a custom product or when navigating through the website to buy other products that are available.
IV. Design
GOAL
Design the user interface and branding for the project.
PROCESS OVERVIEW
• Mood board
• Mid-fidelity wireframes
• Brand style guide
MOOD BOARD
I created a mood board to discuss with the small business owner, communicating a style and brand that complements her current social media presence.
MID-FIDELITY RESPONSIVE WIREFRAMES
After discussing the desired style and brand direction for her small business, we talked about its goals, which prompted me to reference a free Shopify template to help me draft the interface framework.
BRAND STYLE GUIDE
I helped define Knottery's brand identity by using their existing style and branding from their social media presence as a reference. This approach allowed me to make informed design decisions for the color palette, typography, and UI design to ensure that the overall design was cohesive.
V. Prototype
GOALS
Create a dynamic and interactive website that empowers users to efficiently navigate through and gather comprehensive information about the small business, its diverse range of products, and the talented maker or seller behind it.
PROCESS OVERVIEW
• High-fidelity wireframes
• Prototype
HIGH-FIDELITY WIREFRAMES
I created high-fidelity wireframes with brand styles, UI elements, and visuals in line with the brand's social media presence, referencing Shopify's design.
PROTOTYPE
By utilizing high-fidelity wireframes, I was able to create a prototype that provides an engaging and interactive experience for the Knottery website. The prototype has limited functionality but it showcases the website's potential and sets a strong foundation for future development.
Test the prototype by:
• To view each page, use the top navigation bar.
• Navigate to the page where the "other items" category is displayed.
• Select the "wristlets" option from the "other items" category. Once selected, you can play around with the drop-down menus.
• Navigate to the "custom" category page and go through the custom order form.
VI. Test
GOALS
Conduct a comprehensive assessment of the e-commerce website's navigation, flow, and design, and pinpoint any frustrating pain points.
PROCESS OVERVIEW
• Usability Test
• Affinity Map
• Revisions
USABILITY TESTING
I conducted a usability test of the Knottery high-fidelity prototype with three participants to assess its navigation, flow, information architecture, and design. I analyzed their interactions through video calls, recordings, and detailed notes.
TEST OBJECTIVES
• Evaluate the quality and user-friendliness of the custom order form submission process.
• Ensure the website has sufficient information and features for user interaction and browsing.
• Make it easy for the user to select the color and quantity of a product.
USER TASKS
• How would you navigate through the website to check out what products the Knottery has to offer?
•Can you guide me through the process of adding two sunshine-yellow macrame wristlets to the shopping cart?
• Can you guide me through the process of ordering a customized product for my best friend's baby shower? She is expecting a baby girl, and I want to purchase a medium-sized wall hanging with a wooden dowel. I would like the wall hanging to have a rainbow pattern with the colors off-white and blush.
• Where can I find more information about the maker/seller on the website?
• Where can I find information on where to see the products in person?
• You have a question about the earrings she's offering. How can you contact her?
• You want to learn macrame and are looking for workshops. Where can you find information on upcoming workshops?
AFFINITY MAP
Based on the data collected from the usability test, I meticulously created an affinity map to effectively synthesize user feedback and behavior. My insights were then analyzed and categorized into positives and suggestions, allowing me to confidently identify potential solutions and determine the appropriate next steps for optimal results.
REVISIONS
Based on the feedback I received, I determined high-priority changes to the high-fidelity wireframes. Specifically, I focused on enhancing the interaction experience of the custom order form when a user submits a quote for a custom order.
Conclusion
REFLECTION
In this project, my primary objectives were to develop a responsive web design that perfectly aligned with the Knottery's existing style and brand from social media, create a straightforward yet detailed process for customers to order custom products and provide an engaging platform for customers to learn about the business, products, and the maker. With my comprehensive research and expertise, I was able to achieve these goals with a 100% completion rate and without any errors or discrepancies.
Collaborating with the client was an extremely gratifying experience, and I was thrilled to assist a small local business in launching its website. Communication proved to be the key to success, ensuring that both parties understood the high-level goals and objectives, the expected final deliverable, and any potential limitations that could impact their business goals.
NEXT STEPS
• Refine designs and deliverables to hand off to the small business owner to implement on Shopify.
