Grapes: Natural Wine

We built two consumer apps (iOS & Android) with Flutter, using Clean Architecture and the Monorepo pattern to share code across platforms and between the two apps. This approach streamlined development and ensured a consistent experience.

The seller app was originally planned as a web-only tool, but with Flutter’s cross-platform capabilities, we launched an iOS version in just one working day.

For backend services, we integrated Firebase to handle authentication, analytics, error monitoring, and remote configuration. We also implemented Radar.com’s API for address auto-completion and Stripe for secure payment processing, ensuring smooth transactions for users.

We needed to develop an API capable of supporting multiple mobile and web clients. To achieve this, we built a modular monolith backend using Node.js and the NestJS framework, which allowed us to structure the code efficiently and minimize dependencies between modules.

Following Hexagonal Architecture principles, we separated the business logic from external dependencies and infrastructure, making the system more adaptable. This approach was particularly valuable given the complexity and frequent changes in business logic – it enabled us to update external services with little to no modifications to the core functionality.

We developed a web ui for our client that allowed him to manage shops, users and content in the platform. The application had to handle various different processes and display detailed information about multiple parts of the system. Additional challenge were features related to importing and exporting large amounts of data which is heavily used by our client. 

We developed the application with React and Material UI library to quickly build a UI of the app. For API communication we used react-query library. The app also contained multiple forms with various complexity. We used react-hook-form to build them efficiently. We have written the app in Typescript and in combination with ZOD library for validation we achieved high level of type safety in our code

To ensure the Grapes platform aligned with real user needs, we conducted desk research and a quantitative survey, uncovering valuable insights into wine shopping behaviors and preferences.

Our desk research explored wine consumption patterns, online shopping trends, and competitor offerings, helping us define a clear user profile and identify key purchasing motivations.

These insights shaped product decisions, leading to a streamlined UI, personalized wine recommendations, and a refined target audience.

The Grapes app makes wine shopping more accessible with personalized recommendations based on user preferences. As the Product Designer, I led the creation of the Wine Scan feature, enabling users to scan wine labels for instant details and an easy way to track their discoveries.

In a Scrum-driven process, I contributed at every stage of design. Starting with the user flow, I mapped an intuitive path from scan to detailed wine information, streamlining the experience so users could effortlessly scan, save, and revisit wines. With each sprint, we refined this flow to meet user needs effectively.

I then created wireframes as blueprints, allowing us to quickly assess functionality and make adjustments. These low-fidelity frames ensured our structure was clear before advancing to high-fidelity designs. In this stage, I refined the visual elements to align with the app’s sophisticated yet approachable brand, making the feature both engaging and informative.

Thanks to close collaboration with developers, we achieved a polished and cohesive design, creating a unique feature that enhances wine exploration and brings expert knowledge to users’ fingertips.