Roles
I assumed the following roles in designing this app:
• User Interface (UI) Designer
Project Specifications
Duration: 2 months
Tools: Figma, Adobe Photoshop
Deliverables
Interface Design:
• High-fidelity interactive prototypes on iOS
• Style guide and pattern gallery
The Opportunity
The COVID-19 pandemic that has been affecting the world since 2019 has severely affected the Portuguese economy. The surplus of production in the agriculture sector added to the difficulty of access to supermarkets and created problems for both producers and consumers.
To be creative during a time of crisis and keep selling, small producers created social media accounts to share their product lists. Piip is based on a simple idea: to connect small producers to consumers on a single platform.
Visualizing an easy-to-use interface
When I came on board, the project was well structured based on UX Design best practices, which meant that the empathy, define, and ideate phases were completed. The prototype stage was in progress, so the product had only the core screens. Therefore, my role in this product was to continue designing missing flows. The main challenge was that there were two different versions of the apps: one for the seller and, a second one for the buyer. Those two interfaces should aesthetically be related but should solve different target users’ needs. A second important aspect of this project was to keep the interface elements consistent and predictable, to help with task completion, efficiency, and satisfaction. To achieve that, I made sure to create consistency and use common UI elements. In doing so, users feel more comfortable and can get things done more quickly.
Establishing visual Design
The colours, type, and icons were already established. To ensure consistency, I systematised and defined them as components, I also created their variations. The new design elements were subsequently added to the style guide and pattern library. This system increased efficiency during high-fidelity design iterations and helped maintain consistency across the platform. View the project on Figma.
Takeaways
Working on the Piip project was an enriching experience from which I have learned many valuable lessons. One of the biggest challenges in developing the app was to make the ordering process efficient, taking into account the complexity of offering users 'pick-up' and 'delivery' options while dealing with the diversity of sellers who may or may not offer both options. Another challenge was to ensure that users could not buy products from multiple sellers at the same time so they had to abandon their shopping cart if they wanted to buy from another seller.
Here are some of the key lessons we learned from these challenges:
Understanding business complexity:
Before we started the project, it was important to thoroughly understand the business model and workflows of organic product suppliers. This helped us to set clear requirements and make informed decisions about the design of the app.
Flexibility in the checkout flow:
To accommodate the variety of pick-up and delivery options offered by vendors, we have introduced a flexible checkout system that allows users to choose their preferences.
Clear user communication:
It was important to communicate to users which sellers offered pick-up and delivery options. We used tags and visual indicators to help users choose and avoid confusion.
Shopping cart restrictions:
To remove the limitation of only being able to shop from one vendor at a time, we implemented a system that warned users when they were trying to add products from different sellers to their basket. This instructed them to complete their purchase with one supplier before continuing to shop with others.
-
In summary, this project taught me that flexibility and clarity are essential when designing a complex app where users have different options and constraints. Understanding the nature of the business and working closely with the team was crucial in overcoming the challenges and delivering a solution that met the needs of all stakeholders.
