Recent Work :
UX/UI
Zact
iOS, Android, Web
Roles
UI Designer
Usability Consultant
I led the design of Zact through 3 distinct stages, designing a travel app, then redesigning the app for expense management, and then a Web app with much more detailed functionality.
Zact was a complex project due to the nature of what the app needed to be able to do. Zact was created to handle expenses for employees of a large company, automatically. It also required access from manager’s who would have different controls than the standard employee. And they also needed a web-app version that allowed for much more complexity than the apps.
Zact started life under the name “Priv8Pay”. When I was asked to submit an style direction for the app, during the early stages of development, I created a style that conveyed sophistication, using a darker color scheme. The following year they updated the corporate branding and I was asked if I could redesign the app to be consistent with this new branding. I then developed the updated design which is the current style of the app.
Color Exploration
Plan A & Plan B
At the beginning of any project like this I often explore various color and layout options, and vet these with the client.
In this case the color direction (at left) was chosen, then the following year after the corporate rebranding, I created the newer design.
These images show a comparison of the two styles, in this case a screen from the web-app.
Color Exploration
Plan A & Plan B
At the beginning of any project like this I often explore various color and layout options, and vet these with the client.
In this case the color direction (at left) was chosen, then the following year after the corporate rebranding, I created the newer design.
These images show a comparison of the two styles, in this case a screen from the web-app.
Color Exploration
Plan A & Plan B
At the beginning of any project like this I often explore various color and layout options, and vet these with the client.
In this case the color direction (at left) was chosen, then the following year after the corporate rebranding, I created the newer design.
These images show a comparison of the two styles, in this case a screen from the web-app.
Web-App Layouts
So many to show them all
These are but a few of the many layouts required for the web-app version of this product.
The web-app needed to allow for all the functions of the mobile apps, but also allow for administration of the overall system. This meant pushing the layout tools to the limit as I built screens to accommodate the added complexity. Building a solid design system is crucial for a project like this one.
Web-App Layouts
So many to show them all
These are but a few of the many layouts required for the web-app version of this product.
The web-app needed to allow for all the functions of the mobile apps, but also allow for administration of the overall system. This meant pushing the layout tools to the limit as I built screens to accommodate the added complexity. Building a solid design system is crucial for a project like this one.
Web-App Layouts
So many to show them all
These are but a few of the many layouts required for the web-app version of this product.
The web-app needed to allow for all the functions of the mobile apps, but also allow for administration of the overall system. This meant pushing the layout tools to the limit as I built screens to accommodate the added complexity. Building a solid design system is crucial for a project like this one.
Housekeeping
Examples of clean component and screen layouts from Figma
It is important to keep things organized in my working files. Fast-paced development cycles sometimes means there can be lot of loose ends in a program like Figma or XD. Handing a group of working files off to another designer, or programmer means those files need to be clean.
I’ve included some samples of my working files here to show some of my methods of keeping layouts and components clearly labeled.
Housekeeping
Examples of clean component and screen layouts from Figma
It is important to keep things organized in my working files. Fast-paced development cycles sometimes means there can be lot of loose ends in a program like Figma or XD. Handing a group of working files off to another designer, or programmer means those files need to be clean.
I’ve included some samples of my working files here to show some of my methods of keeping layouts and components clearly labeled.
Housekeeping
Examples of clean component and screen layouts from Figma
It is important to keep things organized in my working files. Fast-paced development cycles sometimes means there can be lot of loose ends in a program like Figma or XD. Handing a group of working files off to another designer, or programmer means those files need to be clean.
I’ve included some samples of my working files here to show some of my methods of keeping layouts and components clearly labeled.