Mariner 7

Mariner 7 is an online performance management tool for small to large organisations. The tool enables employees to take ownership of their performance and track their professional development within the organisation. Employees are able to prepare their professional goals or reviews and submit it to their manager to approve it. The tool encourages and supports managers and employees to be more actively involved in the review process.

Skills used

  • User Experience
  • User Interface Design
  • Digital Branding
  • Art Direction

User types

The primary user types in the application are managers, employees and administrators.

The manager’s role is to provide feedback, coaching and guidance to employee. Potential manager's activities: Create and send tasks, Create templates (Task, Key accountability, review forms), Receive notifications

Existing and new employees can create individual goals, developments plans and rate their scores. Managers approve individual employee's goals, plans and reviews.

Administrators can add and remove employees and managers from the application. Administrator also can create and edit templates, rating scale system and team structure.

Key sections

I reviewed the key sections on exiting applications and prioritised the main tasks and features. The blue sticky notes indicate the primary tasks or actions that need to be completed by users.

  • The dashboard screen allows the user to explore more of the data and get different insights. Data and content are displayed differently for different user groups.
  • Key Accountabilities: A manager and employee can set & agree goals and plan actions based on each goal. Managers can create, edit or remove employee's goals within this page.
  • The library stores existing and new templates. Administrator can manage new and existing templates but also managers can submit their own templates.
  • Managers and employees can send feedbacks/messages based on their review progress.
  • Gateway/Urgent alerts: Change employee's status based on his/her inappropriate behaviours.

User Journeys

Discovering typical user flows based on user types.

Wireframe - Dashboard

All sections have the primary call to actions on the header area. I have prioritised content types and divided them into four sections on dashboard. The tasks and team status are displayed on the left column and secondary and tertiary items are positioned at the right column. A manager can see ‘My Team’ status on the dashboard. A summary of team status helps a manager to identify urgent tasks.

Wireframe - Key sections

Key Accountability section contains large amount of content. Each competency can also contain multiple goal. Users can easily lose the focus while they are completing each task. Creating a better flow and typographic hierarchy was the most important task for this section. Secondary action panels can be collapsed. Using inline content editing helps users to click on less buttons while they are previewing or editing a specific content.

Review (Performance rating) section provides a better and easy way to score the employee’s performance and behaviour. Displaying sticky rating scale panel helps users to reference while they complete a long list of rating tasks. Also a user can easily change the rating by dragging or clicking on a scroller module.

Branding & Styleguide

Performance review process can be scary and stressful for employees and managers. I wanted to avoid the rigid and boring bits of review process and make it more fun and engaging for every user. I chose a soft colour palette to make the interface more conversational and contemporary. Functional colours were used for validation, error, notification messages.


Slab serif is a certain kind of serif typeface that has thick, squared-off serifs/ Slab Serif fonts are more modern and bold and the lower case option is perfect for larger headings.


The client want to devliver more fun and engaging brand to their customers. I created few style tiles and discuss ideas around using a hand drawn icon style with a soft colour tones. Oerall they loved the idea and we finally tested few icons for high and low resolution screens.

Page Layout

The tool is targets for desktop users only. The layout needed to help the content highlighting the most important pieces in that page. I started looking at the high level frame layout then added components.

Login/Reset password

The login form and process needed to simple and effortless as possible. I sketched a reset flow and each screen then created high fidelity wireframes.


The onboarding process is a critical step in setting your users up for success with your product, but there are a number of considerations and hard decisions to be made when you are designing your onboarding to define how best to get your users familiar with your product and its value. To create a simple and delightful onboaridng experience, Keep it contextual, just-in-time onboarding approach is a good way to avoid information-loaded screen-by-screen tutorials.


Dashboard provides a quick overview on a user’s current tasks and the team status. The latest tasks are limited to 5 on default view and a scroll bar will be displayed on a longer listing.

Team status are labeled with colours and the filter can be applied on team listing.

Key Accountabilities

Competencies can include custom icons and multiple goals. Adding icon helps scalability. Mandatory field is clearly labeled on editing and non editing modes.

Goals can be edited individually (inline editing). Tooltip provides further explanations on specific terms.


I created three simple steps to explain the overall rating. Overall rating contains the manager’s rating, employee’s rating, Adjustment rating and confirmed rating. On a default view, only the manager and employee’s rating would be displayed on a slider. A user is able to add and remove a marker to adjust a rating.

Individual Development Plan

The donut graph timer showed the remaining time until the completion. Employees are able to track their development plans and remaining times by looking at the timer and plan details.

My Team

This page will be defaulted to current user, showing own team members. User can navigate upper and lower level of team structure by clicking icons. eg. GO UP ONE LEVEL. + icon will show lower level team listings. - icon will hide it. Click on to team member’s name, it will bring up Team Listing Page (if this is a manager who has team members) or bring up profile page (if this is a employee)


Colour labeled message is the key on Gateway section. A manager is able to add reason and comment based on an option.