UI work sample
UI work sample
Embedded Files
SAAS React web app designed with Figma
SAAS React web app designed with Figma
Project details
Project details
Platform: Responsive web app (desktop & mobile) built with React, designed using Figma
Purpose: Managing and monitoring millions of payment terminals in several countries
Role: I was the sole UX/UI designer in this company
Client: Invenco Group Limited
Design system
Design system
Material 3 design system has been used as general guidelines and built on. Everything here was made from scratch in Figma apart from the swatch template which was generated, altered, and expanded.
Component library
Component library
The ICS application had already been built using Angular but it was not loved by users and adding new features was really time-consuming. Once I had the layout and navigation for existing pages working I created a library of reusable components to enable rapid design and prototyping of features. I collaborated with the development team to get everything implemented, although it was time-consuming we made our process much more efficient.
Page types
Page types
Log in
Log in
Simple centered log-in form and branding
Dashboard
Dashboard
Modular page with charts and tables that give an overview of
Main lists
Main lists
Browse, filter, and search large amounts of data in the form of lists or grids
Swimlanes
Swimlanes
A view with data split into lists, generally used for tracking the progress of tasks or automated jobs, similar to Jira or Trello board.
Details page
Details page
A focused view showing the details of an object or entity
General page (settings etc)
General page (settings etc)
A simple page for multiple purposes like settings, information
Dashboard page design
Dashboard page design
1 - Layout wireframe
1 - Layout wireframe
This is a base wireframe with all layout and navigation components active
2 - Dashboard wireframe
2 - Dashboard wireframe
This is one of the main dashboard pages with only it's relevant components active.
3 -Operational dashboard design
3 -Operational dashboard design
This is just one iteration of the dashboard design without it's actual content. Usually several versions of a page would be designed, and then some would be chosen for prototyping and user testing.
Asset list page design
Asset list page design
List page template
List page template
This is an empty template created for several pages with similar functional requirements
Asset list
Asset list
The asset list page with directory open
Asset selected in list
Asset selected in list
The asset list page with an asset selected showing the overview tray
Final outcome
Final outcome
Building a component library in Figma enabled me to collaborate with the development team seamlessly. I could also focus less on UI work and more on delivering users exactly what they need.
Building a component library in Figma enabled me to collaborate with the development team seamlessly. I could also focus less on UI work and more on delivering users exactly what they need.
Prototyping and testing new features ensured that we validated everything before handing it over for development.
Prototyping and testing new features ensured that we validated everything before handing it over for development.
Page updated
Google Sites
Report abuse