360 Finance 22-23
22-23
Feature implementation to B2B2C fintech platform & implementing scalable design system
End-to-end Design Process • Website Design • Cross-functional Collaboration • Agile Environment • Scalable Design System • Design choices walk-through & presentationWhat is 360 Finance?
360 Finance is a startup initative within Quinstreet, a company located in the US, Mexico, and India. Within the team we worked in a B2B2C Fintech platform that was about to launch into the US market. I was able to work with a multidisciplinary and multicultural team located in the US and India.
The platform had three different users: administrators, contractors and clients.
a. Platform experience
Within the platform there is an onboarding experience to showcase the best insurance offers to homeowners when they want to start a home-renovation project. The platform helps: manage the work of the whole project for contractors, updates the progress and details to the admin in their own portal, and serves as a communication channel between homeowner and contractor to have details about the project’s progress.After conducting user tests online, we understood that there were no major issues with the onboarding flow and that it was okay to move on in developing other features in the platform.
1. Activity feed feature
The issue?
Administrators needed to keep up-to-date with home renovation projects that they were managing, by monitoring the activities contractors were handling in each individual project.
The process?
A benchmark was conducted to understand practices that were already in the market, identify the best ones that could be implemented to the product and how the feature could work overall. After this activity it was possible to sort out functionalities, how the feature would behave and how notifications would be sent out.
The result?
Findings and explorations led to two possible solutions: 1) an embeded widget within the administrator dashboard to have a quick view of latest updates or, 2) a dropdown menu that expanded from a button at the top of the dashboard. Both options could expand to a new screen if needed to observe further details in the activities.
These findings were then shared with stakeholders and product to understand which was the solution that could make more efficient the workflow and later we worked on acceptance criteria for tasks and wireframes.
2. Error states research task
The issue?
Lack of consistency and applied best practices for error states within the platform.
The result?
After doing a benchmark and research, components were added to the design system library and documentation was created to justify the different applications and situations in which errors could be triggered and how they should look within the platform.
This was a cross-functional team effort working alongside backend developers to understand which errors were triggered, then with the frontend developers to understand which were shown in the UI, and stakeholders to understand what we needed to communicate as well.
b. Design System
This project was a team effort that consisted in organizing and correcting components that were being used in design files of the product, at a certain point I had ownership of maintaining it and adding to it when necessary. I also had the opportunity to develop further my skills in Figma’s new variables and experiment with them.• Grid styles were created to give consistency to product design items.
• Components were created and published in a team library to be used across all design files.
• Patterns were also added to the component library to make prototyping easier.
• The local variables were also used in color and sizing.
Role: Product Designer
Tools:
Figma - for prototyping and brainstorming activities
Jira - to follow product process and team collaboration in an Agile enviornment
Microsoft Teams - team collaboration
Usertesting.com - conduct user tests and retrieve insights
Responsibilities:
UX + research
User Interface design
Design System management
Platform audits + testing
What I learned from this experience
From this role I learned a lot about research practices in a work setting, I was able to evolve my role as a designer by owning design aspects such as the design system maintenance and got the opportunity to work on end-to-end processes in new product features that were launched.
This role brought me confidence on my skills as a designer and helped me continue growing in my career with other projects.