Walden App: A Case Study

Zoe Reifel
9 min readSep 5, 2020

As the only full-time designer at Walden (a small startup of about five), I was fortunate to work on every aspect of the product and user experience. I designed two web apps, restructured onboarding flows, and illustrated a marketing site during the COVID summer of 2020. It was also a great joy to work closely with a small team of engineers to build out my designs. Through this ranged process, I was able to understand the big picture of Walden’s usecases and intimately familiarize myself with the needs of its users.

In this case study, I’ll be outlining my process for the redesign of Walden’s coach-client dashboard. Other pieces of my work for Walden are available here.

Timeline: Summer 2020

Project Type: Internship

Skills: Product design, UI/UX design, wireframing, prototyping, design systems & style guide

About Walden

When I returned to Walden since my internship in 2019, the company pivoted to a B2B digital product. There were two sides of the new web app: an administrator dashboard and a coach-client dashboard. The admin dashboard essentially ran a business with payments, a light CRM, intake forms, and drip emails. The coach-client dash (i.e. where coaches interfaced with clients) occurred on the other side of the app through scheduling video calls and messaging.

Research & Problem

Because of the pivot, I started from a relatively blank slate, and set out to understand the company’s new purpose, users, and goals. This involved analyzing the existing functions of the new dashboard and asking questions to familiarize myself with the product.

An idea map analyzing the existing dashboard pages.

I also watched several video calls with potential customers and pored over notes from sales calls to understand the ecosystem and users’ needs. I synthesized this information to determine the core problem the app addressed:

Coaching practices frequently use a plethora of products to run their business, from Venmo to Calendly to Typeform to Google Docs. Walden aims to streamline the process so coaches can focus on their clients instead of the busy administrative work.

Throughout the design process, a few core qualities of Walden’s new app became clear. I used these principles as driving factors when making design decisions. These were:

  • Flexibility: Every coaching practice operated a little differently. The app needed room for customization to each business’ existing processes.
  • Simplicity: Many of Walden’s users weren’t the most tech-savvy. The app should keep things as intuitive and cut-and-dry as possible.
  • Functionality: Running a business is complicated. The app needed a wide range of features while not feeling overwhelming.

I also outlined my user types: clients, coaches within communities, coaches outside communities, administrators of coaching communities, and administrators of coaching communities who were also coaches.

Coach-Client Dashboard

When I started my summer job, Walden‘s coach-client interface was completely separate from the admin dashboard. I worked on combining these two products to create a seamless workflow, improving the virtual coaching experience, and modernizing Walden’s look.

The old coach-client dashboard from the previous summer — this is what I redesigned.

Wireframing & Sketches

I like to use wireframing to get initial ideas out of my head. While I’ll always do a bit of rough sketching, I mostly make lists of feature concepts and jot down broader ideas. This provides me with a roadmap for the design process and allows me to iron out the details in the prototyping phase.

Rough sketches and concepts for the homepage of the coach-client dash.

The most complex challenge of the coach-client dashboard was the navigation. Walden’s new sidebar needed to host all the admin dashboard settings as well as allow coaches to easily switch between dozens of clients. In addition, each individual client had a handful of pages (chat, documents, tasks). On top of this, each of the five user types would see different versions of the nav. I wanted the architecture to feel natural, intuitive, and simple regardless of its intricate nature.

I tested out several ideas for the navigation:

Three different concepts for navigational menus, all riffing off dual sidebars for admin settings and client switchers.
Here, I combined the admin dashboard settings with the client switcher all in one sidebar. This is closest to what was in the final product.

I also sketched out some concepts for the homepage of the app. The old design displayed chat and tasks side-by-side on initial log in. While this may have been appropriate for Walden customers pre-pivot, our new users had a different set of primary needs.

Through conversations with my boss and feedback from beta customers, we determined chat and video call scheduling needed to be at the forefront of the app. I set to work on a design that reflected this and pushed features like chat and tasks backwards.

Rough sketches playing with my navigation ideas and call scheduling.

High-Fidelity Prototyping

Personally, the bulk of the iterative design process occurs for me in Figma. New ideas come to me best when I can fully visualize the product. I started by creating a prototype based on one of my original sketches:

After presenting this version to my boss, she encouraged me to think bigger and play around with other layouts. Thus, I explored a few more concepts.

3 of about 15 screens I created during this step of the process.

This step of the process helped me visualize a myriad of potential and unconventional ideas. I spent a great deal of time talking over the pros and cons of each screen. This helped me hone in on the best aspects of each design and bring the strongest components together.

Eventually, I settled on this for the general layout, which turned out to be very similar to the final version that went into build. One of the largest changes between this iteration and my first prototyped version is the right hand sidebar. This design now allowed clients to join a video call without having to search for links and easily schedule another call while on any page.

The foundation for the final product.

With the general concept down, I focused on the specifics of the vertical navigation. First, I worked with my boss to determine the content of the sidebar for each user.

Next, I prototyped these sidebars based off the lists above and the layout I outlined in my sketches. I played around with an active/inactive client feature, a collapsing sidebar, and swizzling groups of menu items.

A few vertical navigation iterations. The three on the far left are closest to what is now on production.

Style Guide & Design System

With the conceptual design for the coach-client dashboard finished, I began to have conversations with Walden’s engineers about the build process. At the time, the backend for these features already existed, and thus only the styling and layout needed to be updated.

Conversations with our frontend engineer revealed the need for a defined design system and style guide. By creating sets of parameters, it would be much easier to not only build out the new dashboard, but also put together pages in the future. He encouraged me to base my style guide on Chakra UI’s system. Working off the existing Chakra community Figma doc, I stylized global components to be applied across the entire product.

First, I built a color system. Using tools like Colorbox and Smart Swatch, I started by creating programmatic shades of our existing brand colors and grays. Those colors then went through a process of iteration in which I tested them out in the app designs and altered them by eye.

Our color system, including Walden brand purple. This came particularly in handy when designing buttons, alerts, and tags.

Next I set a typography system. This involved updating our global typeface, setting frequently used sizes, and creating header and paragraph styles. Our old typeface, Freight Sans Pro, had slightly funky numbers with unusual baselines , which was proving to be an issue in features surrounding metrics and payments (as made clear by complaints from our users). Thus, I set out to find something readable that was modern, friendly, and simple. I tried out several typefaces, but eventually settled on Gordita.

Finally, I created 23 different types of UI components, such as buttons, input fields, menus, alerts, tags, and switches. Each component was constructed using my color and type systems. While I did base many of these components off Chakra UI, I also drew heavy inspiration from Google’s Material Design.

A few examples of UI components from Walden’s style guide.

Throughout the process of creating the style guide, I tested out components in our screens to check for size, scale, and overall cohesiveness. For example, I updated an old modal to reflect and test our new input fields. The new design simplified and decluttered significantly.

Old styling (left) vs. new styling (right)

Final Product

The last step was to apply the style guide to my new coach-client dashboard designs. As I did this, I continued to recognize issues with my systems and made changes as needed. The final iteration looked like this:

Walden’s new coach-client dashboard. This is a client view with a collapsed sidebar.

One of the largest changes towards the final iteration was the decision to move away from Facebook-style messaging bubbles. Based on existing user messages, many of which were lengthy and often included lists, we determined this style of communication would not fit well in bubbles. We moved towards a Slack-style layout and a redesigned chat bar to allow for text formatting.

After the homepage was finished, the remaining pieces were the subpages (tasks, files) and the call scheduling flow. I drew design inspiration for these features from products like Calendly, Things, and Google Docs.

The flow to book a call with your coach that occurs on the right-hand side of the product.
Both tasks and files are shared collaborative pages between a client and their coach.

I finished up these features during the last week of my 2020 summer internship with Walden. Since I’ve returned back to school, Walden’s small team of engineers have been working on building out the new coach-client dashboard. It was an honor to work with such a talented, dedicated team, and I can’t wait to see where Walden will go next!

Unlisted

--

--