Zelena Firma
Creating a CRM & PM solution for a small business
Scope
Mobile App UI
Interaction Design
User flows
Information Architecture
Wireframes
IA & Navigation
Prototype
Timeline
Nov 2023 – June 2024
Tools
Ai, Ps
Figma
Figjam
Jira
Team
Development
Aldin Desic, Nikola Djukic, Nikolina Sikmanovic, Ognjen Obradovic, Pavle Cvorovic
PM Nemanja Nikolic
Summary
Green Wave is a software solution for a recyclable waste management business, which offers them automation solutions for their internal processes. The product consists of a mobile application for 3 user roles (client side app and internal app for 2 roles of managers and collectors) and a web application for administrators. Our team had the freedom to take any technical decisions, as there were no restrictions from the client’s and stakeholder’s side.
Problem Statement
The main pain point our client needed to get solved by this software were CRM and speeding up as well as simplifying their internal processes. At the time of this project, our client had an NGO to handle almost single-handedly all recycling waste removal from the city, which had its advantages in coordination of their internal processes, like assigning collectors to requests and to handle their clientele’s requests via phone and Viber/Whatsapp. On the other hand, they also had difficulties with miscommunication about the amount of waste their clients needed to have removed. All processes had to be unified and simplified in one system that can handle every employees and the clients tasks frictionless.
Users and Audience
As mentioned above, the roles have been defined in the project planning phase as follows:
NGO’s clients
NGO’s employees: manager of collectors, waste collectors
NGO’s administrator(s) in the web application
Design Process
Project Scope Definition and Information Architecture
The scope of the project was defined by first documenting all 4 types of user’s goals, specifying the exact tasks they have to be able to complete using the system.
After we had a well written project documentation approved by our client, we moved on to create the Information Architecture, defining states, request statuses and user flows. This was conceived in tight collaboration with the PM and the backend engineer. As we lastly defined the system’s interaction points as well, I could move on to the next phase of creating wireframes.
Research & Visual Design Decisions
Wireframing and a research on competitor’s solutions was managed simultaneously to ensure that we create a modern solutions, while managing time on tasks efficiently. After the wireframes were completed, I moved on to double-check all user tasks and flows against our project documentation and user goals.
UI & Prototyping
Our client had at the time of this project only a logo without a Brand book created or any visual definition of their brand appearance. This is why additional UI and branding research has been conducted to base UI decisions on their vision while being competitive with other similar businesses of the region. Another important aspect was the font selection to ensure that there is no friction in using the application in any cases when accessibility standards need to be our top priority, i.e. when a collector is driving and opens the app to check something quickly.
This is why the UI had to distinguish clearly between different modules of the mobile application to ease user navigation on the first glance of a screen.
Once the static UI has been completed, the prototype was connected and micro-interactions were considered and defined.
Outcomes and Conclusions
This’s been an agency project with pre-defined scope and the project has been concluded as we released the mobile and web applications to our client. No follow-up study was planned on the client’s side, so as a single conclusion we can draw based on the limited data at our disposal has been our client’s high satisfaction rate with the end product.
View more case studies
Ambages Design 2024