Flycart
From screen to sky: crafting a user-centric drone delivery experience
Project overview
Flycart is a mobile app designed to expedite the shopping process through drone deliveries. Created for a logistics company, the application enables users to purchase items from a variety of local stores, such as grocery outlets, drugstores, and hardware shops, and receive them in a matter of minutes. The app aims to be accessible and user-friendly for a broad audience, including tech enthusiasts, residents of rural areas, and older individuals. The primary goal is to elevate the convenience and reliability of online shopping, meeting the immediate needs of users efficiently.
The problem: Many people find traditional online shopping to be slow and sometimes unreliable, especially when immediate needs can't wait for a next-day delivery. For those in rural areas or with limited mobility, like some older adults, going to a local store isn't always easy or quick. Current delivery options just don't offer the speed and simplicity that modern life demands. Flycart is developed to solve these issues by offering a fast, dependable way to shop from local stores and receive goods right at the doorstep.
The goal: To make online shopping more convenient and reliable, so users can get what they need without any hassle in mere minutes.
My role: UX/UI designer.
Responsibilities: User research, wireframing, prototyping, visual design, usability testing.
User research
To start this project from scratch, the first thing I did was get to know our users: understanding their behaviors, motivations, needs, and goals. As a sole UX designer on this project, I embarked on an extensive user research journey, utilizing tools such as surveys and in-depth interviews.
Initially, I hypothesized that the main user base would predominantly be young, tech-savvy urban dwellers, known to be early adopters of groundbreaking technologies like drone deliveries. To my surprise, the research unveiled an expanded demographic that included rural residents seeking improved access to goods and individuals with mobility challenges who were attracted to the enhanced convenience of drone deliveries. Moreover, contrary to my initial assumption that users would prioritize speed, I discovered that while quick deliveries were valued, users also placed high importance on reliability, tracking capabilities, and the unique experience of drone delivery. These enlightening findings significantly shaped the direction of my design process, emphasizing the need to create an app that was not only user-friendly but also catered to the diverse needs and expectations of this varied user base.
Personas
Creating user personas helped me to understand and empathize with our target users' needs, experiences, behaviors, and goals. Each persona I created represents a significant user group for the app, and by designing for these representative users, I could ensure the solution met the needs of our larger audience.
Empathy mapping
Creating an aggregated empathy map after developing individual personas was a strategic step in consolidating insights and understanding common themes and needs across our diverse user base. This exercise allowed me to see the bigger picture and identify shared patterns that might influence the design process. The aggregated empathy map served me as a tool to keep those user insights at the forefront of design decisions, ensuring the final product provides a meaningful and satisfactory user experience.
User stories
After developing user personas and empathy maps, the next step was to draft some user stories. A user story is a fictional one-sentence story told from a persona's point of view to inspire and inform design decisions. It introduces the user, lays out an obstacle, and states their ultimate goal. To write a user story, I followed this simple formula:
As a [type of user], I want to [action], so that [benefit].
User stories helped guide the design process by keeping the focus on what different kinds of users really need and want from the app. This made it easier to make design decisions that would benefit our larger audience.
User journey maps
Designing the user journey was instrumental in understanding the step-by-step interactions of the user with the app, identifying potential pain points and emotions during each phase, and thus providing strategic insights for improving the overall user experience and accessibility of the app. Other advantages include: identifying improvement opportunities, reducing the impact of designer bias, and helping create obstacle-free paths for users.
Problem statements
Next, I wrote problem statements. A problem statement is a clear description of the user's needs that should be addressed. Problem statements align the team on which user problem to focus on, giving everyone a clear goal. A strong problem statement is human-centered. It should be broad enough to allow for some creative freedom, but narrow enough that it can actually be solved by a design solution.
Utilizing the personas created, I formulated distinct problem statements for each one, employing the following formula:
[User name] is a [user characteristics] who needs [user need] because [insight].
Problem statement 1: Tim is a busy software developer with a love for technology who needs a reliable and efficient delivery solution that offers real-time tracking because his busy lifestyle leaves little room for uncertainty or delays in deliveries.
Problem statement 2: Monica is a small business owner living in a rural area who needs quicker, more reliable access to goods and services that cater to both her personal and business needs because traditional delivery methods often prove slow and unreliable in her geographic location.
Problem statement 3: Ralph is a tech-interested retiree living in a retirement community with certain mobility issues who needs a user-friendly and accessible way to get daily necessities delivered to his doorstep because physical shopping trips can be challenging and the community lacks tech-forward services.
Hypothesis statements
After the problem statements were defined, I wrote hypothesis statements for each persona using the "if/then" formula.
Hypothesis statement 1: If we provide Tim with a user-friendly app interface that offers real-time drone delivery tracking and seamless integration with his existing tech platforms, then he will become a loyal user, making frequent purchases and advocating for the innovative service among his network.
Hypothesis statement 2: If we offer Monica an e-commerce platform that features a wide product range, easy search options, and efficient drone delivery to her remote location, then she will find a reliable solution for her shopping needs, leading to increased customer satisfaction and potential business growth.
Hypothesis statement 3: If we design an intuitive app interface with clear instructions, large buttons, and accessible customer support, tailored to Ralph's needs, then he will feel empowered to shop online with confidence, leading to increased app engagement and expanded adoption of the drone delivery service among the elderly community.
Goal statement
It was time to transition from the problem that users were facing to the solution I could design to meet their needs. A goal statement is one or two sentences that describe a product and its benefits for the user. Goal statement covers who the product will serve, what the product will do, and why the product solves the user’s needs. To write the goal statement for this project, I followed the formula:
Our product will let users perform specific actions which will affect a specific user by an action. We will measure effectiveness by its impact.
Goal statement: Our Flycart app will empower users to effortlessly order and receive products through drone delivery, providing unprecedented convenience and speed for tech enthusiasts, rural residents, and elderly individuals. We will measure its effectiveness by tracking increased user satisfaction, swift deliveries, and improved accessibility, ultimately revolutionizing their shopping experience.
This goal statement provided a clear, actionable objective for the team, emphasizing not only the unique delivery mechanism but also the broad user base it aimed to serve. It also set criteria for measuring success, focusing on speed, accuracy, and user engagement.
Value proposition
Next, I created a value proposition for the Flycart app.
In step 1, I described the app's features and benefits. I created a list of all the great features and benefits of the product, big and small. Here, I didn’t hold back; I listed everything that came to mind and then narrowed it down later.
In step 2, I explained the value of the product. The giant list of features and benefits from step one was sorted into 4 categories: efficiency, user experience, accessibility, and support.
In step 3, I connected these features and benefits with the needs of our users. The goal was to identify what’s truly valuable to the user and not just a cool feature that users didn’t ask for. To determine value, I took the personas I'd developed and paired each persona with a value proposition that met their biggest pain point.
In final step 4, I reviewed my official value proposition list for Flycart app.
Ideation phase and competitive audit
After figuring out what makes Flycart special, it was time to come up with ideas for how to build it. The shift from planning to brainstorming is called the ideation phase. During this stage, a lot of different ideas were thought of, keeping in mind what users and the business needed. Also, a comprehensive audit of competitors (both direct and indirect) was conducted. This served a dual purpose: it inspired new design solutions and also identified gaps in the current market offerings that Flycart could aim to fill. This helped me in generating a lot of creative yet practical options for the app's unique design.
Storyboards
As I transitioned from the problem the user was facing to coming up with ideas for solutions I could provide as a UX designer, I focused on storyboarding, a tool for ideation that helped me outline an ideal flow for my design. In UX, a storyboard is a series of panels or frames that visually describe and explore a user's experience with a product. The four key elements of a storyboard are the character, the scene, the plot, and the narrative.
I created two storyboards: a big picture and close-up. While the big picture storyboard focuses on the user experience (how, why), the close-up storyboard focuses on the product (what).
User flows
I designed a user flow to outline the typical journey a user would take to order and receive a drone-delivered package using the Flycart app. The reason for creating this user flow was twofold. First, it allowed me to visualize how users move through the app to accomplish a specific task, in this case, making a purchase and getting it delivered. Second, it gave me a clear picture of the app's functionality, helping to identify any gaps or friction points that could affect user experience.
By mapping out each step the user takes, from opening the app to receiving their delivery, I was able to get a holistic view of the user's interaction with the product. This set the stage for the design process, ensuring that the app's architecture would be aligned with both user needs and business objectives.
Information architecture
After mapping out the user flow, the next logical step was to transition into creating the Information Architecture (IA) for the Flycart app. While the user flow gave me an understanding of the tasks users need to complete, the IA helped organize the app's content and functionalities into a coherent, navigable structure. The goal was to create an organized blueprint for how the app’s interface should be structured, which screens lead to which actions, and how data is interconnected.
By designing the IA, I aimed to ensure that the app would not only meet users' needs but also be easy to navigate, thereby reducing cognitive load and enhancing the overall user experience. This step was crucial for moving into the more granular aspects of the design phase, like wireframing and prototyping, with a solid structure in place.
Wireframes and low-fidelity prototype
After finalizing the IA, I moved on to creating wireframes. I started with paper drafts for each screen to quickly test different layouts and focus on addressing user pain points. The rationale behind starting with paper drafts was to facilitate rapid iterations. Drawing out multiple versions of each screen allowed for the quick testing of different layouts and elements. This method was particularly effective in refining the design so that it would best address the identified user pain points.
Once I felt confident in the paper drafts, I transitioned to digital wireframing using Figma. The digital wireframes allowed for a more detailed and precise layout, enabling the addition of specific UI elements like buttons, input fields, and navigation menus. These digital wireframes also made it easier to share and collaborate with other stakeholders on the team.
After finishing the digital wireframes, I transitioned to the next phase: creating a low-fidelity prototype. I focused on linking key screens to simulate the primary user flow, specifically navigating the app, placing an order, and going through the checkout process. This allowed me to create a functional model that could be tested with actual users.
Usability study
With the low-fidelity prototype in place, I then moved on to planning an unmoderated usability study. This was the logical next step to validate the design choices and get direct user feedback. I conducted the study with five participants to gather insights into how effectively the app met user needs and to identify any areas for improvement. This usability study served as a critical validation point, ensuring that the design was on the right track before moving into the high-fidelity design and development stages.
Affinity diagram
After wrapping up the usability study, I used an affinity diagram to make sense of the data collected from the interviews. This organizational tool helped me categorize the feedback and insights, making it easier to identify patterns and opportunities for improving the user experience. It was a pivotal step in synthesizing the research findings into actionable design improvements.
Themes
After going through the feedback from users, I sorted it into three main themes. These themes helped highlight what needed attention in the design to improve the overall user experience.
Research insights
• Users like signing in with just one tap to get started quickly.
• Users want to look around the app before giving their delivery address right away.
• Entering credit card details manually is a hassle for users; they'd rather use Apple Pay or PayPal.
Recommendations
• Update the login process to include quick sign-in options like Google, Facebook, and Apple.
• Let people add their delivery address later as they use the app, and think about adding an automatic location finder.
• Include Apple Pay and PayPal in the payment options at checkout.
The insights from the study were really useful in taking my designs from the wireframe stage to more detailed mockups.
Design System and Style Guide
Once the digital wireframes were refined and the recommendations from the initial usability study were incorporated, I moved on to the visual design phase. This transition marked a shift from focusing on the app's structural elements to fine tuning its visual aesthetics and user interface.
To ensure consistency and efficiency throughout the visual design phase, I developed a comprehensive Design System and Style Guide for the Flycart app. This system served as the foundational framework for the app's user interface, encapsulating key design elements such as typography, color schemes, icons, onboarding illustrations, and components.
Visual design and mockups
Next, I started crafting design mockups, which involved adding color schemes, typography, iconography, and other visual elements from the Design System and Style Guide to make the app more engaging and user-friendly.
Here are the final design mockups for the Flycart app:
High-fidelity prototype
Once the mockups were complete, I transitioned to building a high-fidelity prototype. It represented the most complete version of the app to date, offering stakeholders and users a near-final experience for further validation and feedback. Creating this high-fidelity prototype was a critical step in transitioning from design to development, effectively serving as the last checkpoint before moving into the coding phase.
You're welcome to navigate through the key user flows in the embedded Figma prototype. Use "R" to revert to the starting point.
Next steps
• Initiate the second round of usability testing to verify that previously identified user pain points have been successfully resolved.
• Engage in further user research to discover any new issues or requirements that may have emerged.
• Collaborate closely with the development team to ensure a smooth transition from design to implementation.
• Prepare an extensive handoff document outlining design specifications, assets, and guidelines for the developers.
• Plan for A/B testing of key features post-launch to continue optimizing the user experience.
• Schedule regular check-ins with the project stakeholders to update them on progress and any adjustments based on user feedback.
These next steps are designed to validate, refine, and implement the design, ensuring an effective and user-centered final product.
Takeaways
Designing the Flycart app was a revealing journey that emphasized how crucial it is to iterate based on real-world feedback. While the initial concepts provided a foundation, the most meaningful design decisions came from usability studies and collaborative team input. This iterative process made it clear that understanding and adapting to user needs isn't just a one-time task, but an ongoing commitment. By continually refining the design based on this valuable input, we were better positioned to meet or exceed user expectations, resulting in a product that not only fulfills its functional requirements but also provides a seamless and enjoyable user experience.
Next case study: