Year
2023, a project for Instituto Atlântico
Projects duration
3 months, working 4-7hours a week
Team members
Luádyna Almeida (Product Designer), Ana Krummenauer (Product Designer), Stella Ruiz (Product Designer), Wesley Lima (Developer)
Project context and access links
Concept and visual definition
The visual concept of the app was designed to provide a simple, clear, and intuitive experience, contrasting with the common approach of many delivery apps, which often overwhelm users with flashy and distracting visual elements. We used Uber Eats as a visual benchmark for its clean content organization. At the same time, Rappi and Doordash served as functional benchmarks, offering insights into effective usability strategies and streamlined purchase flows.
During this analysis, we noticed that many of these apps use very small font sizes, which can make reading difficult — especially for users who are less familiar with the technology. This became a key point of attention, given our target audience of market vendors. As a result, we opted for a larger-than-average standard font size, combined with clear, supportive text to guide users through every step of the experience.
Additionally, we emphasized straightforward communication with buttons featuring clear and actionable labels. The color palette was thoughtfully chosen to evoke the fresh produce market atmosphere, using tones inspired by nature and the vibrant energy of the products being sold.
Wireframes
Hand-draw sketches
The wireframing stage began with hand-drawn sketches aimed at translating the visual concept established through the analyzed benchmarks. The initial focus was on representing ideas for the key screens of the purchasing flow, allowing for a quick exploration of potential solutions and interactions. These early sketches served as a foundation for defining the information architecture to organize elements as clearly as possible. Fundamental structures, such as card layouts, navigation bar placement, and initial reflections on the primary and secondary color schemes, began to take shape during this phase, guiding subsequent decisions in the interface development process.
Low-fidelity screens
With some initial concepts defined through hand-drawn sketches, the low-fidelity wireframing stage played a vital role in transforming these ideas into more organized layouts. This step enabled us to start listing the required components and their variations, establishing a clearer vision of the interface’s functional needs. Additionally, the process offered valuable insights into optimizing the purchase flow by removing unnecessary steps, ultimately shortening the journey and making it faster and more efficient for users.
High fidelity screens
Colors shades and accessibility
The primary colors chosen for the app were green and beige, as they are commonly associated with natural products and the health-conscious market. To ensure accessibility, multiple shade variations were tested using whocanuse.com, allowing for a precise evaluation of readability across different visual impairments. The final decision was based on achieving a high contrast ratio, ensuring clear legibility of text and essential information throughout the interface. This careful selection not only reinforced the app’s connection to fresh, organic products but also enhanced usability for a diverse range of users.
Typography
For typography, the focus was on maintaining simplicity and consistency by using a single font family, Nunito, chosen for its clarity and readability. This approach ensured visual coherence while reducing cognitive load for users. Regular and bold weights were strategically used to create a clear information hierarchy, emphasizing key actions, product details, and navigation elements without overwhelming the interface.
To enhance readability, larger font sizes were prioritized, making the text more accessible. Font sizes ranged from 14px to 16px for body text, ensuring comfortable reading, while titles varied between 18px and 24px, depending on the screen’s needs.
Components
Components were created after defining typography and color schemes, ensuring visual consistency across the interface. Only the core components were parameterized, focusing on essential elements that would streamline the design process. Flexibility was a key priority, leading to the development of components with adjustable variables and boolean properties, allowing for seamless customization based on different use cases. This approach not only optimized the design system but also enabled quick and efficient component usage, as demonstrated bellow.
Prototype and final screens
The prototype stage brought together colors, typography, and components to shape the final purchase journey, ensuring a cohesive and seamless experience. At this point, the screens fully came to life, allowing for a more tangible representation of the user flow. To enhance realism and usability testing, micro-interactions were incorporated, providing subtle yet meaningful feedback that helped illustrate the definitive journey. These interactive elements not only improved engagement but also refined the overall user experience before moving into development.
Conclusions
This project was a valuable learning experience, as it challenged me to design for a user group I had never worked with before. Understanding the needs of market vendors and tailoring the experience to their reality significantly broadened my perspective as a designer. Prioritizing accessibility-first design made me realize how crucial it is as a dedicated area of study within visual design, reinforcing its impact on usability and inclusivity.
Beyond personal growth, the project aims to create a real impact, directly benefiting small-scale market vendors by building a seamless bridge between them and consumers. Despite the initial hypothesis being invalidated, our resilience in exploring new market opportunities allowed the product to take shape and reach its full potential. Ultimately, the collective effort of the entire team was instrumental in bringing this project to life, marking yet another important milestone in my professional journey.
Lua Almeida
Made with love, using Framer