The Voyage by New Ocean is a personal wellness mobile application that bundles with employee healthcare packages. The Voyage enables people to take charge of various aspects of their health and well-being, by providing a fun and effective application to achieve health goals while earning rewards.
I worked on this project while at Webjunto as one of two product designers building flows and designing screens in collaboration with our engineers, and the client's in-house business, research and engineering teams. The health-tech company New Ocean came to us with an existing application, a new visual identity being worked on in tandem by another agency, and detailed business and data requirements but wanted us to solidify their user experience to be more in line with their target user base. We started designing the mobile app, and were later tasked with creating the client admin portal.
With the introduction of new key features like My Voyage, the navigation moved the most high value content from the menu into a new tab navigation.
Users progress through their Voyage by accumulating Points earned from completing various health and fitness activities. Rewards are given at milestones along the way along with visual reinforcement.
Programs are scheduled personal activities grouped by focus categories. Recommended focuses are displayed at the top.
Challenges are scheduled community events where teams compete for in-app and real world rewards maintaining their activity streaks.
User's can track more personal health data like Blood Glucose, and calories burned in a day. This data can be entered in manually or synced automatically from paired apps and devices. Users can also have Support Teams to hold each other accountable and cheer each other on.
Users can also monitor their progress on four types of rewards ranging from in-app points and commemorative badges to real-word redeemable credits and cash prizes. All four reward types are organized into a consistent and cohesive system.
I was tasked with designing a set of UI icons specific to this product. The brand had not been developed yet at this point, so I took inspiration from The Voyage's somewhat nautical theme and worked with the client to finalize the visual style. Since these icons are rarely displayed at more than one size, some icons like navigation are designed to be larger than an icon that's usually inline with text.
The previous version of The Voyage had a series of badges that were awarded for various reasons like streaks and progress milestones, completing medical check-ups, and altering lifestyle habits (think merit badges or video game Achievements but for basic health). These badges were redesigned to be consistent, on-brand, and relevant to the accomplishments they represent.
While I aided in some the design, these badges were mostly created by designers under my direction.
The Voyage was developed with the Ionic cross platform framework, but it was important to the client that it look like a custom branded experience while still retaining somewhat of a native feel for both iOS and Android versions.
New Ocean wanted a web based platform where their clients could easily manage their own company accounts, add challenges for their Voyage users, add new users, and pay for it all. At the time, New Ocean was performing all these actions for their clients.
A basic user flow of the Client Admin Portal. This does not account for every screen or state.
We created an early version of the design to quickly get the process moving. This version was mostly for internal use to gather client and user feedback as we worked with new ocean to help them finalize and articulate their technical and business requirements.
From the feedback, we moved toward the final design that allowed for clearer information hierarchy, a layout better suited for responsive browser widths and scrolling, and a lighter visual style with more consideration for graphics.
The dashboard allows admins to see the status of their voyage license and all their features at a glance. Features of the portal are represented as cards and arranged by importance. The state of the dashboard will change depending on the activation status of the admin's license, and whether or not they have opted in to distribute cash rewards.
.png)
The first thing an admin does after creating an account is go though a guided process to set up their base package, additional services, and number of users to make their initial purchase. All of this is easy to change in the Package Options section with calculated totals and cost adjustments at the bottom.
Challenges in The Voyage are facilitated through the admin portal. Admins can browse available challenges, configure their start dates, durations, and possible cash rewards.
One of the main ideas behind The Voyage is that businesses can save money on healthcare by encouraging healthy lifestyles for their employees. Clients can then pass some of those savings back to their employees in the form of cash rewards.
Admins can set up a budget for cash rewards which they can then distribute to existing rewards in the app.
%20Edited%202.png)
Admins can get a full overview of their users in the Manage Users section. From here, both users and admins can be searched for, edited, or removed to free up a seat. They can also be added individually or in batches via spreadsheet.
While the Client Admin Portal is mainly intended and expected to be used on desktop browsers, it's still a fully responsive web app and will work on tablet and mobile browser widths.
The design of the The Voyage's Client Admin Portal shares much of the same DNA as mobile app, but translated for desktop web for client use.
