Reflektive Web App
Consulting 2016
New Feature, Improved Navigation & Redesign
Leverage user data in other product features to create a compelling Employee Profile page that has purpose.
Design several options;
• A low impact solution that leverages existing UI patterns.
• A Blue Ocean solution that improves UX and will provide mobile platform consistency.
• Prioritize what various persona's will want to see and minimize content displacement across various use cases.
• Create a clear summary of basic information.
• Improve access to employee's performance content with clear shortcuts.
• Ability to view/edit skills and current projects.
• Allow other employee's to engage & learn about a peer's skills with the possibility to vouch for them.
• Employee viewing their own profile.
• A Manager/Admin/HR viewing an employee's profile.
• An Employee viewing a peer's profile.
Reflektive is an agile talent development suite integrated into an employee's daily workflow in order to drive maximum productivity and engagement.
Client's existing product
Screens provided by client. It was requested to leverage current style and layouts to offer one design solution that will solve product requirements and have low engineering cost.
Design Solution #1
Benefits
• Consistent UI pattern and navigation model with existing product.
• Proper visual hierarchy of employee information.
Downside
• Navigation model on the left adds an extra layer that is unnecessary.
This screen reflects an employee viewing their own profile page.
Design Solution #2
Benefits
• Below basic employee details are shortcuts to various other key features within the product. (i.e. Performance reviews / Provide feedback). This area can easily accommodate various buttons based on which persona is viewing the page.
• Removed side navigation to incorporate content in main page.
• Main content can easily have elements shown or hidden based off of who is viewing the page.
Downside
• Product's existing visualization of user feedback is visually overwhelming and could benefit from simplification.
This screen reflects an employee viewing their profile page.
This screen reflects a direct manager/HR/admin
viewing an employee's profile page.
This screen reflects a peer viewing
a fellow employee profile page.
Hidden elements include:
• 1x1 Agenda
• Performance goals
• Shortcut to Performance reviews
• Shortcut to Providing feedback
Design Solution #3 / Blue Ocean
Benefits
• Improve navigation by eliminating horizontal and vertical models. Introduce only one model (vertical) with capacity to have sub categories.
• Navigation pattern increases consistency with mobile, it is a more responsive design. Layout easily adapts to various screen sizes.
• Proper visual hierarchy of employee information.
• Takes better advantage of various screen resolutions.
This screen reflects a peer viewing a fellow employee profile page.
Mobile adaption of navigation UI pattern.
Consistent navigation model across desktop and mobile improves intuitiveness and reduces learning curve.
Moving on to Visual Treatment
It was determined that solution #3 was going to bring the most value to the Profile Page but most importantly the overall product, despite the extra engineering cost.
Visual Design Goals
• All visual treatments achievable through CSS.
• Ability to easily modify branding to adhere to Reflektive's various clients.
The following screens reflect a peer viewing a fellow employee's profile page.
Client's branding applied through CSS with four HEX values & Logo image.
