TRACK TIME AND EXPENSES
The challenge was to update the look and user experience of the client’s time and expenses app by designing patterns of key screens (selected by the client) that they can use and apply on to other pages of their app. One key design challenge is keeping the design within the limitations of the of the Sencha Ext JS framework that the client is using for their app. In addition, the application also needs to accommodate some kind of brand customization feature for their clients.
INTERVIEWS
The client gave a demo of the current design of their product and the team lead discussions on goals and ideas on which aspects of the current app to update.
INFORMATION ARCHITECTURE
Opportunities to streamline flows that originally required multiple screens were discovered and solutions were provided that only needs one screen, improving the experience drastically.
SKETCHING AND BRAINSTORMING
A quick method to communicate layout, high level UI elements, and just an overall look is by sketching. Sketching allows us to quickly change concepts and improve details on the fly.
WIREFRAMING
Upon agreement on key screens, wireframing ideas were initiated and updates on the design were introduced in the wireframe as well. During this phase, ideas were explored to streamline some of the app’s processes for a better experience for the user.
PROTOTYPING
After a good set of designs have been created, clickable interactions to simulate the user's experience with each task were produced. The simulation feels exactly like an interface, where the user would click through screens as though they would normally do in their devices.
STYLEGUIDE
Upon the end of the design project, as components and screens are finalized, style guides are produced to help the client form a unified style across their application and they also received styles converted to be used for development on their particular devices.
ALTERNATE VISUAL DESIGN WITH BRANDING COLOR SWAPPING FUNCTION
The client needed a way for their own clients to brand the app. The original design comprised of a line at the top nav that can change the color set by the client. The new design introduced a way to set a single color value and apply the accent color to more than just one line. Above is a concept of the brand color changer in an earlier concept of the application.
MOTION
Motion adds a lot of affordance to improve how users perceive the application. It gives a physical location to the user using transitions and adds feedback on things the user interacts with. Motion is strategically used for the app to communicate back to the user of how it responds to user’s interaction with it.