UX Copywriting Archives · Kari Kay | Product Design Meets Brand Strategy

CloudMunch: User Onboarding

Role
Visual Designer

Duration
4 Weeks, Completed in 2016

CloudMunch is an ambitious team working to tame the complex world of DevOps with a unifying platform for cloud-based app deployment, including plugins and pipeline templates. They knew the importance of making user onboarding smooth and engaging, and requested custom graphics and copywriting to help tell the story of their product's value.

Opportunity. CloudMunch knew that to increase adoption, they needed to refine their onboarding process and infuse more personality into the user experience. Having recently rebranded, they also needed help extending their brand identity and tone of voice into their product.

Approach. I worked with CloudMunch through multiple iterations of their marketing website and app platform. This included designing everything from their individual product icons to their multi-step onboarding process and illustrated product diagrams.

Outcome. CloudMunch successfully launched their app, and were acquired by JFrog a few months later.

CloudMunch requested a short, friendly setup process for new users, complete with compelling visuals for each screen in the flow. This seamless onboarding process encouraged collaboration for an even stickier product experience.

By positioning their product as a collaborative environment for development teams at the very beginning of the user experience, we were able to showcase the real power of their platform.

Each step of the onboarding process served double-duty as both an opportunity to highlight the product value and to reduce the number of form fields exposed at once to the user.

CloudMunch_AccountSetup_Mar2016_4_3 Password

Experimentation with A/B testing would reveal the pros and cons of how fields were grouped. For example, combining the password and team name fields into one step may have resulted in fewer dropoffs, or fewer reminders to secure their account and finish onboarding.

CloudMunch_AccountSetup_Mar2016_4_4 SendInvitations 1

Closing with the option to send invitations to collaborators reinforced the spirit of the product, and emphasized the speed at which teams could ramp up with their new tool.

… Back to Portfolio …

Redox: Web App

Redox: Healthcare Interoperability Platform

Visual Design

UI Design

Design System

Role
Lead Product Designer

Duration
6 Weeks, Completed in 2020

Redox is a healthcare interoperability platform aimed at simplifying the healthcare journey for patients, payors and providers. As they were preparing to transition their app to React, they wanted to take the opportunity to address some minimal UX/UI improvements and reflect more of their visual identity in the product.

Opportunity. Like many companies at the time, Redox was making the shift to React and wanted to make some simple updates to their UI and UX in the process. Based on feedback from Customer Success, the onboarding tasks and dashboard were in particular need of a revamp to provide context and generate enthusiasm at the outset for the app developers who used their product. Copywriting and minimal UI updates needed to be kept to a minimum so Redox's engineers could focus on the more critical tasks for the transition.

Approach. I worked with their UI engineers to flesh out a simple style guide to get them started in a good direction. I provided redlines, style guides and video walkthroughs to introduce new features and redesigns. Since we had received feedback that users often conflated terms like "Source" and "Destination" when configuring their tenant, I added simple tooltips and copywriting updates to guide users through the process.

Outcome. Unfortunately, layoffs affecting 25% of the company occurred before the project was implemented.

I worked with the UI engineers to identify a React-based UI kit to minimize the work required to flesh out their app. I reviewed their existing UX/UI patterns, and modified components from the UI kit to carry their branding throughout the product.

Consolidated Navigation

Since the sidebar is an omnipresent element, it needed to serve as an anchor for the rest of the page—an element that is intuitively organized and easy to reference at a glance. I updated the font weights, padding, and color assignments, and swapped in icons from the new UI kit. These simple updates made for a fairly extreme makeover to the interface, and saved precious vertical space.

To guide the user throughout the product, I added descriptions, tooltips and contextual documentation links for each product section.

Simple improvements, like enabling one-click copying of Endpoint IDs, and space-saving accordion-style filters created a more seamless user experience.

Onboarding Improvements

I narrowed the focus of the onboarding experience to the bare essentials, and linked pertinent documentation for easy reference.

Previously, the “Getting Started” checklist was easy to miss, as half of it appeared below the fold. It also included extraneous steps beyond what was actually needed to up the product, which cluttered the interface, and made it likely to be overlooked by users. Additionally, the list was pervasive even after steps were completed. It became a clunky interruption to daily work unless the user had hunted down the “off” switch in their settings menu.

I removed unnecessary items from the checklist, and positioned it at the very top of the Overview page. When users completed all the steps, the checklist would automatically disappear from the Overview page.

As a future iteration, I suggested integrating with Salesforce's Content Management System to pull in relevant guides and collateral based on customer data.

Dashboard Improvements

The Redox Network drew power from the "strength in numbers" maxim. The more healthcare providers that joined their network, the easier it became for health tech companies and app developers to connect to these institutions. More institutions meant more patients being offered options to enhance their personal healthcare experience with technology—Redox's ultimate mission. These numbers highlighted the Redox Network's collective progress, and encouraged their community of users to keep building.

… Back to Portfolio …

Protected: Esper Blueprints

Protected: Esper Device Fleet Management

Eat Fresh Tech

Eat Fresh Tech: eCommerce Templates

Role
Product Design, Creative Direction, Visual Design, UX Design, Project Management

Duration
2 Months, Completed in 2018

Eat Fresh, a growing e-commerce platform for meal prep companies, needed a more efficient and attractive offering to keep costs down and drive customer acquisition. I created a full white label experience that Eat Fresh could use to quickly launch their customers' branded e-commerce storefronts.

Opportunity. In 2018, many meal prep companies were operating almost exclusively offline using small rented commercial kitchens, and partnering with local gyms and grocery stores to amplify their distribution. With modern life getting busier and busier, the $220 billion meal prep industry was predicted to see a steady increase at a compound annual growth rate (CAGR) of 4.3%. North America had been leading the way since 2015, specifically due to the advent of e-commerce platforms. Eat Fresh's founder saw the opportunity to improve people's health, and support many grassroots meal prep companies through their customizable e-commerce storefront. This would allow health-conscious chefs to focus on cooking rather than on complex website creation and maintenance.

Approach. I worked directly with the founder, who was also a software developer, to formulate a plan to scale his efforts. I brought in a front-end developer who was familiar with theming and e-commerce websites to help develop a scalable codebase from the design system I created. Together, we identified the functionality and individual components needed to build out branded websites and custom shopping cart experiences. This approach allowed Eat Fresh to keep costs and development time to a minimum without skimping on the design details that their chef customers demand.

Outcome. Eat Fresh has successfully scaled their business using the templated solution. It has allowed them to create branded websites and shopping experiences within a few hours, rather than weeks. They were last reported to process $5 million in orders annually.

Eat Fresh's clientele consisted mainly of busy chefs who had little interest or time for technology. Three goals remained top-of-mind for them—creating delicious, nutritious meals, building their brand, and being profitable. Each week required a lot of juggling: menu planning, sourcing and buying ingredients, distributing the menu, collecting orders, preparing the food, and finally, delivering meals.

Common User Flow & Pain Points

Gray = Chef's activities, Blue = Chef's customers' activities, Outlined areas = room for improvement

With their existing process, chefs and their customers communicated via multiple channels. This was extra work to maintain, and meant there was a lot of room for error and disorganization.

Improved User Flow with Eat Fresh

Purple areas represent points throughout the process where Eat Fresh could provide value to chefs and their customers.

By understanding where chefs lost most of their time, Eat Fresh could interject with technology to help gain it back. Improving the ordering experience would also have a direct impact on profitability. The primary goal was to make the experience as turn-key as possible for chefs, while upholding their brand image.

The templates for the e-commerce experience needed to take into account a wide variety of use cases to make it easy for Eat Fresh to provide fast turnaround times for chefs as they onboarded.

Menu items with and without images
Minimal or detailed meal descriptions
Multiple meal customization options

Fully-customizable meals
Quantity of meals
Varying prices for meals

EatFresh_ClientTemplate_v1_FINAL_Page_09

Shopping Cart Templates

Depending on the complexity of their offerings, chefs could choose from different shopping cart layouts. Some businesses sold meal credits as part of ongoing meal memberships, some provided vouchers and discount codes, while others simply made individual meals available for purchase. I developed multiple flows, core templates and elements that could flex to emulate multiple brands. This strategy reduced the amount of customization required to onboard new Eat Fresh customers, which reduced implementation time and costs.

One-pager Checkout Flow

Multi-page Checkout Flow

Mobile Shopping Cart Experience

Website Template

In addition to the e-commerce platform, I also designed a templated solution so Eat Fresh could offer marketing websites that integrated with the Eat Fresh shopping cart. This packaged solution took yet another task off the busy chefs' plates.

… Back to Portfolio …

Chalkdoc: Web App

ChalkDoc

Role
Lead Product Designer

Scope of Work
User Research, Launch MVP, Visual Identity, Marketing Website, Web App, Illustration

ChalkDoc was created by a teacher who was disenchanted by the canned lesson-planning tools on the market. He decided to build tools that both students and teachers can enjoy.

Duration: 8 weeks, Completed in 2015

Opportunity: ChalkDoc's founder wanted to create a completely customizable lesson-planning app to accommodate teachers' tiny budgets and limited time. The tool features simple, streamlined functionality and access to relevant and entertaining questions to engage students' hearts and minds. While other apps generate non-editable worksheets, ChalkDoc gives teachers control over the specific kinds of problems they know their students need to work on most.

Approach: My work with ChalkDoc started with brand and product positioning through market research and user surveys. I connected the founder with an engineering team, and developed a simple visual identity as a foundation for a consistent look and feel to extend across their responsive marketing website, worksheets and web app as they experimented and scaled its functionality. I provided illustrated assets, a mini design system for the web app, high-fidelity wireframes, and templates for the downloadable worksheets.

Outcome: Using the provided assets and foundational user flows, the ChalkDoc team was able to scale the product across multiple iterations without requiring additional design work. The software continues to provide value for thousands of users many years later.

User Flow: Creating a Worksheet

Create Worksheet Flow - Iteration 1

Since the final output was intended to be a printable worksheet, the interface was designed to provide a preview of the worksheet as the user added their desired content. The worksheet title, page numbers, and a space for students to write their name and date, were auto-generated to keep things organized.

1. Create New Worksheet

2. Add New Section

ChalkDoc_New Worksheet Edit Section Simple Configure

3. Configure Section - Advanced Options

4. Worksheet Preview (hover to scroll)

Create Worksheet Flow - Iteration 2

After reviewing and testing different options, the engineers suggested some simplifications to reduce the lift. Displaying "pages" in the preview proved to be more complex than it was worth due to the varying lengths of questions that filled an unpredictable amount of the page. Additionally, rather than printing directly from the app, teachers were offered the option to "download" the worksheet and the answer key separately, and share the worksheet via email.

While keeping it simple was the number one priority in their early days, I made sure to bring out the approachable charm of the brand through custom illustrations and playful copywriting.

I built a marketing website for the founder to edit as needed, establishing a simple design system, and providing a series of illustrated assets to flesh out the look for the website and within the app itself.

The Final Product

After conceiving of the initial flows, and handing off the wireframes and mini design system, the founder and engineers continued to evolve the platform over time to include an increasingly complex library of swappable equations.