UX Design Archives · Page 2 of 2 · Kari Kay | Product Design Meets Brand Strategy

Lean Design for Startups

A startup for startups, Lean Design teaches entrepreneurs the importance of clarifying their message from day one and using their limited resources to their full potential.

SERVICES
Product Validation, Branding, Identity, Website Design, Copywriting, Printed and Digital Marketing Collateral

PROJECT TYPE
Branding, Visual Identity Design, Website Design, Marketing Collateral, Educational Course Design

Lean Design for Startups is one of our Founder's favorite pet projects. After helping dozens of startups launch and iterate on their products, Kari saw how a lack of understanding about the creative process was costing entrepreneurs precious time and unnecessary heartache.

Kari developed the Lean Design™ brand and wrote, designed and organized the educational content from scratch. She is continually developing new materials to help entrepreneurs design their businesses and products to fit their lifestyle, personality and talents.

This growing collection of educational content is both an exercise in "eating your own dog food" as well as a service to ambitious tech-savvy entrepreneurs. Boiling down over a decade of branding and design expertise into bite-size exercises for the design-challenged has been an incredible experience that has strengthened Kari's love for the design process and its ability to serve people in practical and often life-changing ways.

More Projects

OgdenGlazer Legal

Chalkdoc: Web App

Little Green Light

Roland Foods

… Back to Portfolio …

Bob’s Floor Covering

Bob's Floor Covering

Interaction Design

Visual Design

Role
Creative Director, Interaction Designer, Visual Designer

Scope of Work
Brand Positioning, Website Design, User Onboarding Experience

A 30-year-old, high-end flooring company elevates everyday environments with their expert guidance and exclusive, curated product lines.

Bob's Floor Covering is an unassuming business in a small, unassuming town in Southern Wisconsin. But, like many companies, there's much more to Bob's than meets the eye. Through the process of modernizing their website, we learned that when the real estate market tanked in '08, Bob Jr. saw the opportunity to grow as a high-end flooring company, adding exclusive lines to his already extensive collection. This move set him apart from his competitors, not only as having the largest showroom in the area, but also as a name affiliated with good taste and high quality for the wealthy homeowners throughout the Chicago and Milwaukee area.

We used the website redesign process to more clearly position their company, constructing sections of content intended to draw in ideal customers and partners. We also enabled their non-technical staff to manage content and estimate requests seamlessly and without fear of losing content or being vulnerable to security breaches. Their online presence finally reflected their company's broad and deep expertise, and their respected relationships with local builders.

Untouched for eight years, their website didn't just need a visual upgrade, it needed to become a better business tool. We rebuilt the site from nothing, rewriting entirely new content with SEO in mind, hiring a photographer to show off the top brands in their vast showroom, and creating a faster, easier way to provide customers with custom estimates.

The day we launched the website, the first quote request arrived in their queue. The owner and office assistant were both instantly notified via email, and able to see their prospect's floor plans, measurements and request in one organized list. Before, this would have required multiple back-and-forth phone calls. Now, it was as easy as checking their email.

… Back to Portfolio …

Shiftboard

As a rapidly growing cloud-based workforce management software and employee scheduling solution, Shiftboard needed a facelift for their website and presentations.

SERVICES
Website Design, Graphic Design

PROJECT TYPE
Visual Identity Refresh, Website Design, Collateral Design

Shiftboard serves a wide range of industries throughout the United States and United Kingdom. They sought to refine their image to stand out from their more established competitors. Time was of the essence, so we made simple tweaks to their visual identity and completely revamped their website, making it more responsive, functional and attractive to prospects. We worked with their in-house marketing team to maintain their SEO and clarify content.

To flesh out their image, we extended their identity to include photo treatments, a bold color palette, custom icons, page layouts and type treatments for their responsive website and PowerPoint presentation templates.

Not wanting to noticeably transform their image, which was growing in recognition, we made minor alterations to their logo's letter spacing to improve its readability and polish, and toned down their very orange primary color to a more palatable reddish orange.

We tweaked their primary brand colors and expanded their palette to provide more range and establish a modern image.

We simplified their pricing tables to showcase options more clearly, and developed toggle functionality to view monthly and annual pricing.

We developed functionality to make their vast number of case studies filterable by industry.

More Projects

OgdenGlazer Legal

Chalkdoc: Web App

Little Green Light

Roland Foods

… 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.

… Back to Portfolio …

CloudMunch App

An ambitious team developed a platform to tame the complex world of DevOps with their unifying web app, integrations and template tools.

SERVICES
UX Design, Illustration

PROJECT TYPE
Brand Expansion, Product Launch, Web Application

We 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.

Because of the quick turnaround times for their product releases and their established image in the market, we didn't stray far from their original look and feel. We made gradual updates to their color palette, graphics and layouts, and consulted on their use of language and user experience to create a polished and simplified presentation for increased user adoption.

Within months of our work together, CloudMunch was able to be acquired by JFrog.

The CloudMunch application featured a Workspace, Integration Hub and Dashboard. We simplified their user interface and unified their color palette to create a clean, uncluttered work environment for developers.

We illustrated custom icons to depict each of their products and distinct sections within their application.

In addition to redesigning their user interface, we helped them streamline user onboarding.

We illustrated clear step-by-step visuals to help new users get started with their first project.

CloudMunch Website

See the work we did for the CloudMunch marketing website.

View Project ►

More Projects

OgdenGlazer Legal

Chalkdoc: Web App

Little Green Light

Roland Foods

… Back to Portfolio …

Seattle In Progress Web App

Seattle In Progress

Seattle in Progress tracks construction projects throughout Seattle from application to completion, giving local residents and businesses a way to stay informed at each step of the process, right from their phones.

SERVICES
Visual Identity Refresh, UX Design

PROJECT TYPE
Brand Expansion, Online Ads, Responsive Web App, White Label App Extension

Seattle is currently one of the most rapidly growing cities in America. Construction projects have become a normal part of everyday conversation, and with that, the desire to know what's being built downtown, down the street, or even right next door. Beyond providing information to satisfy curiosities, Seattle in Progress can also notify users of new projects, giving naysayers the chance to appeal for changes to construction plans that might create unfair or unappealing living situations.

We worked with them to revamp their marketing website, improve the user experience design for the responsive web app, and extend it as a white label solution for businesses. They were able to double their business as a result.

By making the web app responsive, users can view details about construction projects as they encounter them throughout Seattle.

We helped Seattle in Progress develop a white-label version of their app to generate a new revenue stream.

More Projects

OgdenGlazer Legal

Chalkdoc: Web App

Little Green Light

Roland Foods

… Back to Portfolio …

Mobile Doorman Web App

Mobile Doorman: Web App

UI Design

UX Design

Visual Design

Role
UX Design, Design

Scope of Work
Responsive Web App for Desktop, White Label iOS and iPadOS app, Onboarding collateral for each brand

Mobile Doorman is a white-label app for high-end residential property managers and residents to communicate and develop a sense of community.

Duration. 5 months of iterative work, designed in 2014

Opportunity. 2014 saw a tremendous increase in urban development. 7,000 condos and 31,000 multi-family properties, and 1,400 student properties became a primary target for improving the environment for managed buildings. Mobile Doorman served as a conduit between corporate, building staff and residents. Their goal was to increase resident and staff satisfaction, improve retention rates, and decrease operational costs.

Approach. I worked with them from square one, starting with their brand strategy and visual identity, and carrying it through to their marketing collateral and app. I collaborated directly with the founder, CTO, and their engineering team.

Outcome. Over the course of 2014, Mobile Doorman built momentum as their products were adopted in more than twenty high-end residential buildings across the United States. They continued to grow and were featured in leading real estate tech news sources, attracting top talent and an impressive national portfolio of clients. In 2021, Mobile Doorman was acquired by Zego.

I designed a simple interface for the property managers to oversee operations from a single online dashboard. From maintenance requests to financials and direct messages from tenants, managers were finally given the power of organization without being tethered to a single workstation.

Doormen required a separate app, which was designed specifically for use on a tablet. The doorman app gave staff the ability to assist tenants with services such as package deliveries and guest check-ins with greater speed and accuracy. Because it was tied to the same database, information was synced with the manager's web portal. This made for a more organized staff, easier record-keeping and a better overall tenant experience.

The resident's app was designed for use on their mobile devices—the same devices that captured their attention for hours of their day, everyday. Each building received their own branded app with access to amenities and information that kept them connected with the management team and in sync with their building community.

I worked with Mobile Doorman's engineers to establish a streamlined user flow. Work included wireframing, UX copywriting, icon creation and a strategy to provide a themed UI for a white label experience.

The white label experience included the design for each of the three applications—management, on-site staff and residents—as well as a marketing package to help each building promote the app to their tenants.