ChEckPlus
Background
Icalia Labs Team, Custom Development
Role
Digital Product Designer:
(Concept design and product definition, UX design, UI design, Wireframing and prototyping, Front end UI, User test)
Tools
Figma, Rails, Tailwind
About the project
The client
Check Plus is a leading company in northern Mexico, offers security and protection services for traditional check transactions between companies and their suppliers, seeking a way to digitize their processes.
The Problem
The check sales validation process required sellers to manually report each transaction to Check Plus, which, after recording it in its internal system, also sent a manual authorization. This workflow created friction and delays in the sales cycle, slowing down the number of transactions and discouraging new customers.
Our solution
Develop a web application that integrates directly with the Check Plus system, automating transaction validation and eliminating manual notification and confirmation processes. By utilizing the existing validation infrastructure, we were able to focus on the experience and scalability of the new application.
Research and Ideaton
Design Workshop
First we run a design workshop to understand the full process of the Check Plus transaction validation, so we can turn that physical manual process into a digital one without missing any steps. This approach also help us to identify the key participants in the process and how they interact from start to end.
From manual to digital
After all the research and information gathered, and with the help of stakeholders, we designed a digital solution that would transform the process into a digital one without creating friction for existing customers, transforming each step of the process into a familiar and intuitive one, starting with transaction registration and ending with account status.
Design
Separated complementary experiences
We decide to create a single web app, and split the experiences for every actor in the platform, this way we culd reduce the time of implementation and simplifying the development for the development team. I started designing from sheared features and common actions and flows between actors and adding the specific ones over the initial experiences. I also want to make visible which experience is for each actor, so i made use of the visual brand for helping me in this objective.
Easy validation method
Being the main goal of this digital transformation the validation process, we research and explore different options to perform this step the easy and seamless one. We implement a main QR code as transaction validation method, this was an easy way to package all the data needed for Check Plus to validate their transactions. while the users keep an ‘element’ that feels familiar as a traditional check. We also implement a secondary more ‘manual’ way of validation with a numerical code alongside the QR. by this we ensure that devices without camera or a tool to read codes can still perform the validation.
Transactions views
Other of our main features shared for both actors was the transactions views, that offer a quick view of the user transactions by category and status, also the option for download the transactions data for external purposes.
Visual status helpers
After mapping the transactions life, we ended with almost 10 transaction cases. this challenged me to design a visual system that could inform and transmit in a practical and fast way the step in which each of the transactions carried out is, such as its category, status and other relevant information. I finishing addling different visual helpers to the transactions to facilitate the transaction reading, like a pill for the receipt status, the expiration status and the action needed from the actor.
Users and rol management
Some times, contractors (buyers or sellers) will depend on workers to management all their sales or purchases, so the users and rol management was also important to implement on a easy way. We implement a users and rol management that was accessible and easy to understand defining only 3 roles for each side, Master, Admin and Regular user (buyer or seller).
Accessibility over styling
Thanks to our research and workshop we identify that a big part of the end users are not tech drive people, with this insight i decide to make all the key actions in the platform the more visual and intuitive possible, even tho this focus could compromise the cleanest of the design we commitment to this and did the best to integrate the brand to compensate any over-design or over-information.
Responsiveness
Even when the main focus was to develop a web app focusing in the mobile version, we also offer a web version ideated for the sellers that expend most of the time at the front of the service desktop, ensuring that the platform could be use it everywhere and anywhere.
Challenges and Overcomes
Team size
For this project due to budget the develop and design team was reduced to 2 developers and 1 designer, This challenge pushed me to help the develop team with the front UI based on rails, as the developers expend most of the time working around understanding and connecting our solution to the CheckPlus already existing system, and solving data base problems and needs, leaving the team with less time to refine and adjust the UI. I overcome this applying my code knowledge and learning more about the Rails framework, walking out the project with more a experienced front skill.
Time consumption
Also due to the budget the management and planning team made the decision to reduce the time of development from the standard for size of projects. Challenge me personally to balance my other responsibilities inside the company and the other projects that where in development along side this one. also helping me to develop strategies and plans to efficient my work flow Even with the rush and adjustments in the ideal features that could elevate the final product, the final design and solution where well received for the product owner and stakeholders thanks to the user center approach, fulfilling all the initial goals and objectives from the design workshop
Success & Learnings
A initial workshop not work just for the client
Through all the design and development process, our initial workshop helped us in every iteration to work around solutions while keeping the initial goal in focus. With the documentation from the workshop session, we helped the client avoid drastically diverting from the solution scope and goal, reducing the amount of changes and 'would be great...' requests from them. We consistently appealed to the initial agreement and expectations we established together at the beginning of the project while keeping an open talk with them.
Tech stack learning
Although I had previously worked with Rails, my experience was limited to superficial modifications of styling elements, such as adjusting style sheets and implementing Tailwind. This project allowed me to delve deeper into HTML structure, components (partials), and thoroughly understand how Rails renders the frontend and makes calls to database models. This technical knowledge has transformed my design approach: I now think not only about the general UX, UI, visual structure but also about the development process and implementation for this specific framework. Additionally, by personally taking responsibility for the frontend implementation in this and other Rails based projects, I help eliminate the traditional friction between design and development, ensuring a 'pixel perfect' UI implementation without relying on intermediaries to translate my designs into functional code.