Walden App: A Case Study
--
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.
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.
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.
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:
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.
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.
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.
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.
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.
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.
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.
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:
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.
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!
