Many children under 14 may not feel satisfied with traditional digital communication methods like video calls or texts, unless they have already built a strong bond with the other person. Therefore, receiving a personalized message through the mail can be more meaningful for them. Flutter is a digital platform that allow children to connect with their loved ones uniquely. It provides the ability to send digital messages that can be transformed into physical greeting cards and delivered anywhere.
When using the product, customers need to provide their information by filling out forms that are spread out over multiple screens. Unfortunately, this process is quite lengthy and can confuse users. Additionally, once users move past a certain screen, they have limited opportunities to edit the information they've already provided. Editing is also a tedious process because it requires users to repeat certain steps. Therefore, it's essential to improve the usability of the card-sending flow for end users. Finally, some concerns about data security need to be addressed.
Researched and proposed a design solutions for Flutter’s card-ordering flow in the Web App platform to be kid friendly, frictionless and easy-to use. Optimized the number of steps, created an intuitive design with user handholding and enhanced UI elements for a well-informed user experience. Included editable features to improve overall usability and contributed to greater user retention.
The Flutter app is currently a web-based application that you can access through the Flutter website, and it's available in the USA, India, and Canada. However, Flutter aims to expand its reach and cater to a wider audience by developing a web app that is optimized for mobile devices. This initiative seeks to provide a seamless user experience across various platforms and pave the way for future development of a mobile-friendly app.
This web app aims to attract more diaspora kids and families to strengthen their family connections through Flutter’s card-sending experience.
We successfully designed a solution for Flutter’s card-sending web app that enables users to customize cards digitally and send them physically.
Our IDP project team consisted of three members. We used a step-by-step approach to tackle different business needs and challenges. By starting with a clear plan and focusing on understanding Flutter’s goals, we successfully developed solutions for the Flutter Web App.
The project started with a kickoff meeting with stakeholders. During this session, we introduced ourselves and had the opportunity to understand the brand's vision, overarching goals, and current challenges. These interactions were essential for seeking their valuable perspective.
After the meeting, our team understood the stakeholder's goal of simplifying the card sending flow for a more intuitive and kids-friendly user experience. This led us to prioritize usability research over visual design. Recognizing the need for more data, we dedicated ample time to the research phase.To ensure our efforts aligned with stakeholder objectives, we developed a detailed project plan and timeline. With their approval, we promptly initiated the project.
In our competitive analysis, we embarked on a thorough examination of companies offering similar products or services in the market. Each team member was tasked with researching and evaluating two competitors, ultimately narrowing down our focus to three standout companies. Using FigJam, we meticulously documented our findings, delving into their features, user experiences, and overarching strategies. During this process, We meticulously assessed each competitor, identifying both their strengths and weaknesses. We scrutinized features for similarities and differences, while also pinpointing potential opportunities that could be integrated into our web app. This comprehensive analysis provided invaluable insights to guide our design decisions and enhance our competitive edge.
To gain a deeper understanding of users, their needs, and pain points, we opted for usability testing for the Flutter web app. We conducted four user interviews with their parents. Users were assigned the task of sending a digital card using the Flutter web app. While users performed the task, we made sure to observe actions such as choosing a card to send, customizing the card with a message, adding the recipient's address, and finally sending the card. Additionally, we informed parents to assist their kids only when needed.
After completing the task, we asked questions focusing on three main metrics.
We decided to create three different persona’s to serve as a constant reminder of the user throughout the entire design process.
After developing a better understanding of my users and analyzing their needs, it gave me two ‘How might we’ questions to create solution designs. It also provided me with necessary MVP feature and nice-to-have features that I should include in our solution.
After presenting our research and synthesis analysis to stakeholders, we received feedback and suggestions that helped us focus on MVP which is low-effort, high-impact tasks. Subsequently, we began ideating the solution.
Next, We created user flows to map out the steps users would need to take to achieve their goals in the Flutter web app. User flow provide a high-level overview of the key interactions users have within Flutter web app. We created 3 users flows i.e. Home Page, Age Verification and Country Selection Flow, Card Selection and Card Customization Flow, Name Address Input, Review Order Checkout, Order Confirmation Flow.
Next, we proceeded to sketch out the user flows, with each team member responsible for visualizing one flow. It was exciting to witness our research materialize into tangible representations!.
We initiated the design process. After sketching out our ideas, We proceeded to create clickable high-fidelity wireframes. Utilizing the Figma tool, We found it easy to translate our low-fidelity designs into a more polished form. These wireframes encompassed all the design elements intended for the Flutter web app, integrating insights gathered from end-user feedback during the research phase.
Splitting up the task one teammate tackled Home Page, Age Verification, Country Selection screens, I handled Card Selection, Card Customization screens and one teammate worked on Name Address Input, Review Order Checkout, Order Confirmation screens.
Subsequently, due to time constraints during our usability testing phase, we made the decision to develop our design system and style guide. Since the stakeholder's product had already launched in the market, we chose to acquire the style guide and branding guidelines from the stakeholder. Additionally, we supplemented it with additional components based on our new design approach.
We opted to test our card-sending flow with target users to ensure usability and create a seamless user experience throughout the process. We presented our low-fidelity design solutions to the client and solicited feedback from developers. Concurrently, we initiated outreach to our target audiences. Collectively, we conducted five user testing sessions, each lasting 30 minutes, over Zoom.
After getting insights from users and client, we synthesized our findings using figjam tool. Then we made all necessary changes in our final high fidelity designs. These tests helped us validate initial ideas and receive feedback early in the process.
We developed high-fidelity prototypes for Flutter utilizing Figma, materializing our design concepts. This stage represented a significant milestone as Flutter evolved to closely resemble the final product.
Received positive feedback from users and the client regarding the intuitive design and seamless navigation, laying a robust groundwork for future enhancements. This affirmation not only underscores the successful execution of the project objectives but also highlights the alignment with the client's vision and goals.
Before starting the design work, it's important to know what the business wants, what problems users have, and plan out when things need to be done. This helps everyone stay on track and focused on what needs to be done.
Avoid jumping into visual design until the solution’s UX is well-defined and validated.
Prioritize simplicity and clarity in design to cater to young users' needs and preferences.
Ensure the web app is accessible to children of varying abilities and backgrounds, considering factors like readability, color contrast, and language options.
Continuously gather feedback and refine the design throughout the delivery phase. This iterative approach ensures the final product meets user expectations and fosters positive interactions.
Working together as a team helps us combine our ideas and skills to solve problems better. When we talk and listen to each other respectfully, it makes it easier to reach our goals together.
Our journey with Flutter’s card-sending web-app has been marked by collaboration, problem-solving, and a commitment to improving user experience. Through thorough research, thoughtful design iterations, and user feedback, we've identified key areas for enhancement and implemented solutions to address them. With this user-centered approach, Flutter is well-positioned to create a highly usable and effective product. Although there is certainly room for further refinement of the high-fidelity designs we created, our efforts have significantly improved the platform's usability and appeal. From streamlining the card customization process to providing clear information and guidance, our work has been guided by a dedication to making Flutter’s platform more intuitive, user-friendly, and enjoyable for both parents and kids.
