Crab & Butterfly Mobile App​
​
​
The Product
​
The "Crab and Butterfly" product is a labor of love, crafted with meticulous care and attention to detail. It is a spicy, apple cider vinegar-based, non-alcoholic herbal tonic known as Fire Cider, enriched with robust flavors and nutrient density. Fire Cider is a testament to the founders dedication to flavor, wellness, and culinary craftsmanship.
​
​
Timeline
February - March 2024 | 2 Months
​
​
My role
​
Lead UX Designer, overseeing every stage of the product development lifecycle.
​
​
My responsibilities
​
Conducting user interviews, creating wireframes and prototypes, conducting usability studies, addressing accessibility, iterating on designs and overseeing branding.
​
​
Tools
​
Figma, Photoshop, Illustrator, Figjam
​
​
Background
​
This mobile app was created as a freelance contract project.
crab & butterfly case study.
Project Overview​
​
The Problem
​
Design a culinary mobile app in alignment with established brand guidelines, aimed at enhancing product sales through additional avenues.
​
The Goal
​
Our goal is to create a comprehensive culinary mobile app that not only adheres to established brand guidelines but also serves as a robust platform for increasing product sales. Targeting culinary enthusiasts and health-conscious consumers, the app will offer an engaging user experience while seamlessly integrating features to facilitate product discovery and purchase. Effectiveness will be measured by tracking increases in product sales and user engagement metrics, ultimately contributing to the growth and success of the culinary brand.
​
​
User Research​
​
Based on user research, several key pain points and areas for improvement were identified within the user experience of the Crab & Butterfly website. Firstly, users expressed frustration over the lack of product location information, indicating a need for enhanced accessibility to local product availability to streamline the purchasing process. Additionally, users found the current ordering process cumbersome and time-consuming, highlighting the importance of simplifying the online ordering process to improve efficiency and user satisfaction.
​
Furthermore, participants voiced frustration over the lack of updates regarding new stores or products, underscoring the need for improved communication channels to keep users informed about the latest offerings. The cumbersome access to company information, ingredients, and glossary within the website was identified as a significant pain point, as users found it time-consuming to access this essential information. Addressing these issues is crucial to enhancing the app's effectiveness and user satisfaction, aligning with the overarching goal of delivering a seamless and user-friendly experience for all users.
​
​
​
Pain Points
1
Product Location
Not knowing where to find the product locally is frustrating for potential customers.
2
Ease of Ordering
​
Going through too many steps online and having to go to a website is too time consuming for users.
3
Updates
Not knowing that new stores or new products are available is frustrating to users.
4
Outdated​
Not being able to access the company information, ingredients, glossary in an app is time consumting for users.
User Personas:​
​
​
"Having a variety of healthy food choices at my fingertips increases my quality of life"
Primary Persona description, Hannah
Through interviews and research, Hannah emerged as the primary user persona for "Crab & Butterfly" encapsulating the needs, values, goals, and frustrations of our target audience. As a young professional on the go, who is health conscious, Hannah's curiosity about new health product offerings positions her as an ideal client.
​
As a young professional assistant in the fashion industry, Hannah embodies a health-conscious and fashion-forward lifestyle. With a focus on maintaining both her physical well-being and aesthetic appeal, her primary goal is to cultivate a sense of vitality and confidence by prioritizing her health and nutrition. She seeks to incorporate healthy eating habits into her busy schedule, aiming to nourish her body with quality foods that contribute to her overall quality of life.
Additionally, Hanna desires to infuse variety into her diet, expressing a desire to explore new and nutritious food options to enhance her culinary experience and promote her well-being. However, Hanna faces several frustrations in her pursuit of healthy eating, including time constraints that limit her ability to browse for new foods in person and long wait times associated with online ordering. Furthermore, the uncertainty of product availability and freshness exacerbates her challenges, hindering her ability to seamlessly access the foods that align with her health and lifestyle goals.
Infinity Board:
Brand Development​
​
​
​
​
UI Design - UI Kit
This UI Kit graphic serves as a foundational resource for digital product design, consolidating essential design components, patterns, and guidelines into a centralized repository. Its purpose is to expedite the design process while ensuring consistency and coherence across user interfaces. By providing designers with reusable building blocks such as buttons, forms, typography styles, and icons, the UI Kit streamlines workflow, fosters collaboration, and promotes adherence to brand guidelines. Its versatility enables scalability and evolution over time to accommodate new design patterns and features, ultimately contributing to the delivery of high-quality digital products.
​
User Interface Kit for Crab & Butterfly
Starting the design​
​
Architecture
​
​
The depicted user flow in the sitemap commences from the onboarding screen, guiding users through their journey via the profile view, where comprehensive information is consolidated. Within the main menu, users can access sections such as Pet's Profile, Pet's Food, Food Database, Glossary, and Help, facilitating seamless navigation and access to essential features and resources.
Crab & Butterfly Web Application Sitemap
Ideation: Paper Wireframes
​
​
In the iterative design process for the Crab and Butterfly culinary app, paper wireframes were instrumental in refining the onboarding screen to optimize user engagement and conversion rates. The first iteration of wireframes prioritized clarity and simplicity, featuring a prominent slogan atop the screen, the app logo centrally positioned, and two distinct call-to-action buttons at the bottom for user account management. This layout adhered to best practices in user interface design, ensuring clear navigation pathways and intuitive user interactions.
3 Iterations of Paper Wireframes for Onboarding Screen
Subsequent iterations of the wireframes evolved to further enhance user experience and streamline the onboarding process. The second iteration introduced a refined layout with a smaller logo at the top and a succinct slogan at the bottom, strategically placing four prominent call-to-action buttons in the center. These buttons provided users with direct access to key functionalities such as locating the product and initiating the shopping process, aligning with psychological principles of user motivation and decision-making.
​
​
The final wireframe iteration aimed to maximize visual impact and user engagement by incorporating a larger logo, a captivating product photo, and a compelling slogan. Three strategically positioned call-to-action buttons at the bottom facilitated seamless user interactions, encouraging users to explore product locations, log in to their accounts, and create new accounts. This iteration emphasized the importance of visual hierarchy and persuasive design elements, reinforcing the app's brand identity and enticing users to take desired actions. Overall, the iterative process of wireframing for the Crab and Butterfly app exemplifies a user-centric approach to product design, combining best practices with psychological insights to create a compelling and intuitive onboarding experience.
Digital Wireframes & Lo-fidelity Prototype
​
​
To effectively engage teenagers, the interface must strike a balance between maintaining their interest without overwhelming them. By adopting a simplistic design approach and incorporating a dynamic logo alongside a continuously updated list of subjects, we can sustain their interest and encourage exploration within the platform.
Digital Wireframe depicting Store location map screen
Crab & Butterfly Lo-Fidelity Prototype
Study Type:
​
Unmoderated Usability Study
Location
Remote, USA
Participants
5 Participants
Length
30 minutes
Usability Study​
​
After the low-fidelity prototype was finalized, a Usability Test Guide was written and proposed. Participants who were health food shoppers were then recruited to take part in a Zoom virtual usability test.
​
​
​
​
​
​
​
​
​
​
There were 5 prompts created to test the usability and critical objectives of the app including, contacting Crab & Butterfly, purchasing one product, locating one store that has the product in stock and going to the FAQ page.
The test goals included the following:
​​
-
Identifying any significant errors or interruptions in task completion within the app.
-
Assessing whether users encounter difficulties with navigation or interface design.
-
Gaining insights into successful task completion paths and recognizing effective UI elements.
-
Evaluating the placement and timing of relevant information to ensure it meets users' needs effectively.
​
​
Findings
​
Location
Transfer
​
Participants, after selecting a store wanted to be transferred to maps for GPS route.
Add List for Speed
Participants expressed a desire for ingredients to be a list so they can jump to specific ingredients.
FAQ
Search
​
Participants desired a search tool for the FAQ section.
The usability study conducted for the Crab & Butterfly culinary product mobile app unveiled insightful revelations into user requirements and preferences. Participants identified several areas for improvement, emphasizing the need for seamless navigation and enhanced functionality. Specifically, users expressed a desire for a transfer feature that would seamlessly redirect them to maps for GPS route navigation after selecting a store, facilitating convenience and efficiency in locating product outlets.
​
​
Participants highlighted the importance of optimizing ingredient presentation by implementing a list format, enabling users to swiftly navigate to specific ingredients for enhanced clarity and ease of use. Additionally, users expressed a need for a search tool within the FAQ section, underscoring the importance of facilitating quick and efficient access to relevant information to address user queries and concerns effectively. These insights emphasize the significance of prioritizing user-centric design enhancements to streamline navigation, improve information accessibility, and elevate overall user satisfaction with the Crab & Butterfly culinary product mobile app.
Lo-Fi Prototype Location Screen shown before usability study and
Hi-Fi Prototype shown after usability study findings were implemented
Lo-Fi Prototype Ingredients Screen shown before usability study and
Hi-Fi Prototype shown after usability study findings were implemented
Going Forward​
​
Key Takeaways​
​
​
​
Impact
Quote from study participant:
​
“I love that I can find a place to pick up my favorite cider on my way home from work. No more stopping in places to see they don't carry it - this app will save me so much time and aggravation!”
Insights
Enhanced Navigation and Accessibility:
Users expressed a strong desire for improved navigation features, particularly when it comes to locating stores and accessing essential information quickly. Integrating a transfer feature to seamlessly redirect users to maps for GPS route navigation after selecting a store will enhance convenience and usability. Additionally, implementing a list format for ingredients and incorporating a search tool within the FAQ section will improve accessibility and streamline user interactions.
​
​
User-Centric Customization:
The app's success hinges on its ability to cater to individual user preferences and needs. By offering customizable settings such as text enlargement and text-to-speech functionality, the app can empower users to tailor their experience according to their unique requirements. Furthermore, language translation capabilities will enable the app to reach a broader audience and enhance user satisfaction among diverse linguistic backgrounds.
​
​
Integration of Health and Nutrition Features:
The app serves as a resource for health-conscious individuals by providing detailed information about fire cider's ingredients, its health benefits, and its applications in culinary concoctions. With a focus on transparency and education, the app offers insights into the nutritional value of each ingredient, empowering users to make informed decisions about their dietary choices. Moreover, the app highlights the health benefits of fire cider, a popular concoction known for its immune-boosting properties and therapeutic effects. By delivering valuable information on ingredients and their health implications, the app reinforces its commitment to promoting wellness and nutritional awareness among its users.
​
​
Overall, prioritizing these key takeaways in the app's development and design will not only improve user experience and satisfaction but also reinforce the app's reputation as a user-centric and inclusive platform dedicated to promoting health and wellness among its users.
Accessibility Features
​
​
Language Selection
​
In designing the Crab & Butterfly app, accessibility remained a central focus, prioritizing inclusivity and usability for all users. The app incorporates robust language selection functionality, allowing users to customize their experience by choosing their preferred language. Whether accessing the app for the first time or adjusting settings later on, users have the flexibility to select their desired language from a comprehensive list of options, ensuring seamless navigation and comprehension regardless of linguistic background.
​
Text-to-Speech Integration
​
Understanding the diverse needs of its user base, Crab & Butterfly integrates text-to-speech functionality to further enhance accessibility. This feature provides an alternative mode of interaction for users with visual impairments or reading difficulties, allowing them to listen to text rather than relying solely on visual cues. By offering this inclusive feature, the app promotes accessibility and empowers users to engage with content effectively, regardless of their individual abilities or preferences.
​
Enlarged Text Options
​
To accommodate users with visual impairments and enhance readability, Crab & Butterfly offers customizable settings for text enlargement. Users have the option to adjust the text size to suit their preferences, ensuring optimal visibility and usability throughout their interactions with the app. By prioritizing text visibility and providing flexibility in text size, the app ensures a user-friendly experience for all individuals, reinforcing its commitment to accessibility and user satisfaction.
Next Steps
​
In conclusion, the case study has provided valuable insights into the design and functionality of the Crab & Butterfly mobile app. Moving forward, there are several key next steps to consider for enhancing the platform's capabilities and user engagement.
New Products
Introducing new products from Crab & Butterfly, as requested by the majority of users, has the potential to drive sales growth.
Ratings
Incorporating customer ratings and testimonials from satisfied users would enhance the app's appeal and credibility.
Recycling
​
Encouraging the recycling of Crab & Butterfly bottles would foster sustainability efforts.
Product Diversification:
Responding to user demand for new product offerings presents an opportunity for Crab & Butterfly to expand its product line and diversify its offerings. Conducting market research to identify emerging trends and consumer preferences can inform the development of innovative products that resonate with target audiences and drive sales growth.
​
​
Customer Engagement Strategies:
Developing strategies to encourage user engagement and participation, such as incentivizing customers to leave ratings and reviews, can enrich the app experience and foster a sense of community. By actively soliciting feedback and testimonials from satisfied users, Crab & Butterfly can leverage positive word-of-mouth to attract new customers and build brand loyalty.
​
Sustainable Packaging Initiatives:
Implementing eco-friendly packaging solutions for Crab & Butterfly products will align with the brand's commitment to sustainability. Exploring options such as biodegradable materials or reusable packaging can minimize environmental impact and enhance the brand's reputation as a responsible steward of the planet.