Fiee

Fiee is a system proposal assigned by Tess International and it works as a collaborative workspace for client's employees to work on their cases relating to finance and monetary matters.

To create and design a system proposal that consists of (1) dashboard of statistics, (2) tableview of client's portfolio cases and (3) detailed information of client's portfolio cases.

• Stakeholders to utilize their work tasks
• Employees who uses the workspace to assist on finance and monetary affairs
  

My Role

UI/UX Designer

Duration

2 weeks

Tools Used

Figma, Miro, Canva

Key Contributions

UI/UX Design

Prototyping

Branding

Associate

18 May

Assessment received via email sent by Sharan of Tess International HR

19 - 22 May

Assessment analysis, understanding requirements, brainstorming user persona and empathy map

23 - 26 May

Sketching, wireframing, prototyping high-fidelity mockup on Figma

27 - 29 May

Compiling project information and design elements onto case study

30 May

Handover for testing and validations

Taking into account Tess International has done its business analysis and usability testing that we were able to come out with a list of system requirements that I would need to include in this design proposal. We jump straight into defining the problem.

I took some time to define the user persona and empathy map to ensure that I was designing based on what the ideal user would want and need.

I drew my sketches on paper, proceeded to come out with the branding and visual elements, and did the wireframe and prototype on Figma.

The final product mockup is handed out to Tess International for further testing and validations. Improvements are to be made in new design iterations.

Welcome greeting to encourage users on their daily work tasks, generated differently each day at 24-hour mark

Case Alerts section has real-time progress bar based on the case status

Button to add more action buttons (e.g. Portfolio Cases button) on user's dashboard to cater to their workspace preferences

Button to add more Modules (category or workspace) which can be accessed easily on the top navigation

Search Bar can be used to search by case or by client's name etc.

Indicator (light blue text background) to increase readability of the table

Back button appears on the left main navigation bar for easy access to the previous page viewed

To increase information processing efficiency, page is sectioned by:

• Summary Info,
• Case History,
• Account Overview,
• Remarks input, and
• A few action buttons on the bottom
  

Colour indicators (green and red) to indicate the categories (deposit and withdrawal) that are visualized on the pie chart

Case History section includes users' profile pictures to encourage collaborations and teamwork instead of using task-based icons; demonstrating human-centered workflow as opposed to being too task-oriented

Taking into account this is the first iteration for this project, I will be listing out some of the improvements I could have made if I was given more time to work on them:

Intuitive main navigation bar that shows current active page (see picture for example)

The choices of icons need better harmony with each other

The interactivity of the pie chart for client's transaction pattern

Click to test the prototype