Product design

OK Roger

A product design challenge

OK Roger is a B2B web application aimed at simplifying Travel Management for organizations. The application implements workflows that allow Team Administrators to have visibility and exercise control over various travel related activities within their team. The experience is very much a set-it-and-forget-it, meaning that admins will set up their company’s account, invite team members, create travel policies, and that’s it. They might log in again to view reports and analytics, but there won’t be much else to interact with once their company’s policies have been established.

The Challenge

1. Re-design the information architecture of this site so that users can easily understand how to manage team members and travel policies.
2. Design a dashboard for the admin highlighting the most important aspects for them to feel in control of their company’s travel management.

Proposal

What we are looking for
We would like to see how you break down a platform’s information architecture and build it back up in a manner that is more intuitive to the user.We are looking for a solid senseof your UX and UI skills. Please make the final UI design output look beautiful.

Tools

Figma

Year

2022

first screenshot
Jump to the prototype

First step

For every project, is important to map the processes and artifacts you are gonna use to find and build a solution proposal.

What you are gonna find on this project
  • A new information architecture proposal.
  • A new dashboard design.
  • Travel manual-approvals flow.
  • Policies management including Rules and Location tiers.
What you are not gonna find on this project
  • Research with real users.
  • Deep competition benchmark.
  • Users, travelers, settings flows and prototypes.
project plan
objectives
Product background

Context

At briefing stage is very important to get all the context you can about the project, starting with the objectives and scope and finishing with the current product or business status.

In this case the objective was synthesized in 2 clear goals.

Benchmark

The visual and functionality benchmark was applied to looking for some information architectures and visual components references son some projects examples.

In this case none competition was explored.

visual benchmark
Product evaluation

Product evaluation

After map all the flows involved in the product, and get focus on the project-goals related flows; i have looked for usability factors those needed improvements.

Ideation start with brainstorming

After you collected all the insights about the project and product current status (benchmark, evaluation), it was time to propose ideas to solve the pain points and challenges found.

The fun point of this exercise is that you can propose any idea you have, however if it sounds crazy or even worse, sounds expensive!

Some ideas boarded were:

  • Email notifications for manual approval requirements.
  • Show last approved bookings on dashboard.
  • Add extra approvers on rule creation.
  • Comments engine to discuss booking details before to resolve it.
  • Drawer for Rule or policy detail.
brainstorming
prioritization

Prioritize to control the scope

After to check all the crazy and expensive ideas, i applied the easy artifact Prioritization Matrix, that allow me to categorize the proposals in order of effort and impact offered to the business and the user.

Ideation start with brainstorming

Finally i could set a group of solutions that will take care of on the building stage, and this group is already set with priorities that let me take some optional choices if i'm running out of time or budget.

solutions plan

Building stage

Building a better version of the console

home

Sitemap

Sitemap

Some wireframes

Style guide

I have explored the styles i will use on the proposal building; used the brand colors as based for primary and secondary colors and set a new one color for "Actions"

To speed up the prototype building, and as the objective was not to build a UI components library from scratch, i have used the existing UI Kit Nucleus UI.

With a ready-to-use base, i set a custom theme using the style guide and created a set of more-complex components for the project.

style guide

Some improvements on this proposal

home

Due information on your homescreen

The new home screen offers proper information that the team managers need to do regular tasks from the mains screen.

Your recent travel requests waiting for manual-approval
Quick actions to add "traveler users" and "travel rules".
Some statistics those help you take quick decisions
A notification system that share with you important information at real time

Better information design

Grouping the right info to show you on every screen, supported with visuals components like icons and flags, offers an easier way to manage your actions on the console.

Show service type with clear universal icons for flights and lodging.
The locations show a cleaner way for cities and countries.
Travel date give you a better context about wich elements are more urgents on time.
travels - resquests
Create rule . target selection 3

Optimized way to create rules

The brand-new form design for Rules Creation groups some options those were offered on separated options on the previous version.

Select your target at the same flow.
Add specific approvers for your custom rules

Better developed Tiers feature

The previous version offered the Tiers to group budgets by locations.

Now we offered a more complete feature that let you accomplish the same task with more customization and control.

Select between countries and cities.
Assign maximum amounts for lodging and flights.
Policies - Location tiers full
home

Better experience through visual impovements

We plan to offer a delightful experience through a high quality visual interfaces, through the application of design foundations as: contrast, typography hierarchy and spacing.

Check the full prototype

Jump to the prototype