Case Study: App: Yoga Notes

Case Study: App: Yoga Notes

Responding to a Request for Proposal (RFP) is a unique and challenging creative process that parallels many of the stages in executing the project itself. It requires not only a clear understanding of the client’s goals and requirements but also the ability to distill those objectives into a compelling and well-structured response that stands out from the competition. My role in RFP responses goes beyond just assembling documents—it’s about creating a vision, a brand, and a strategy that resonates with the client.

Embracing the challenge of simplicity

Adapting Eva-Lotta Lamm’s Yoga Notes book into an app presented unique opportunities and challenges. The book itself provided a rich foundation with clear visuals, step-by-step guidance, and charming illustrations. However, transitioning this content into an interactive digital format required rethinking its flow and functionality while ensuring the final product stayed true to the essence of the original work.

From the start, I approached the project with humility and curiosity. I understood that even seemingly simple projects come with their complexities, and assumptions can lead to missteps. This mentality has become a cornerstone of my design philosophy.

UX/UI Design: Source Book and Content

The app design process

1. Understanding the vision

Before starting any designs, I worked to fully grasp the project’s scope, goals, and challenges. Yoga Notes, while sweet and straightforward on the surface, required careful attention to tone, audience, and functionality. I delved into the book’s backstory—why it was created, who it was for, and how it could better serve its audience as an app. This stage also involved defining the user base: a mix of yoga practitioners and instructors seeking clarity and simplicity.

UX/UI Design: Color and Fonts

2. Research and User Insights

User research was vital. I conducted surveys and usability tests with target audiences to learn their preferences, habits, and pain points. Observing how users interacted with similar yoga apps helped identify opportunities for improvement. For example, users appreciated clear navigation and visual aids but often felt overwhelmed by cluttered designs or redundant features.

3. Analysis: Crafting personas and Mapping

The insights from research were distilled into detailed user personas. These personas guided every design decision, ensuring the app aligned with the needs and goals of its audience. Additionally, I created navigation maps to establish a clear flow for the app’s interface.

UX/UI Design: Sketches / Wireframes

4. Design: From sketches to prototypes

Armed with insights and plans, I moved to the design phase, starting with pencil-and-paper sketches. Early-stage concepts were shared with the client for feedback, allowing for adjustments before progressing to digital prototypes. This iterative process saved time and ensured alignment with the client’s vision.

Using Adobe XD, I built the interactive prototype, ensuring that every screen—from the home page to detailed pose instructions—was user-friendly and visually engaging. Key features, such as simple navigation and charming yoga illustrations, were designed to reflect the book’s approachable tone.

Birds-eye of Yoga Notes App Design in-development, showing prototype linkage lines

5. Tesing and refinement

Throughout the project, I prioritized user feedback. Multiple rounds of usability testing with prototypes revealed potential pain points, which I addressed before finalizing the app’s design. This iterative approach allowed for continuous improvement and alignment with user expectations.

6. Launch and post-analysis

The final prototype was handed over to developers, and I remained closely involved to ensure the design’s integrity during the build. After launch, I analyzed user feedback and considered future updates to improve the app further. The Yoga Notes app became a practical and charming digital companion for its audience, staying true to Eva-Lotta Lamm’s original vision.

Blog Hero: UX/UI Design: Application Prototype Project with user experience emphasis

Reflections

Looking back, the Yoga Notes app is a reminder that no project is “too small” to teach meaningful lessons. This experience taught me the importance of research, iteration, and collaboration—principles that continue to guide my work today. While my capabilities have grown exponentially since this project, the Yoga Notes app remains a proud example of thoughtful design that marries form and function.

If you’d like to explore how I can bring this process to your next project, let’s start a conversation!

White Space Is A Beautiful Thing

White Space Is A Beautiful Thing

What IS White Space?

Blog Hero: Puppy and Chick: Bad Design and Bad Design Experiences

Simply put, white space is an empty area surrounding a design element. And don’t be mislead by “white” and “empty” because the design element isn’t always surrounded by a field of pristine white, but possibly a texture like grass or sky or some other regular background. But the effect is that in relation to the featured design element, the area around it is empty. “White space” is simply a convenient term.

Why Is White Space a “Beautiful Thing”?

Now you know WHAT it is, WHY is it? And what makes it a “beautiful thing”? To understand why designers have relied on white space since the beginning of Design, one must understand its effect on a viewer.

Because we’re basically animals, when any of us with normal, healthy vision looks at a designed piece, they generally see elements in a predictable order:

  • Faces
  • Color
  • Symbols
  • Edges
  • Text

You can imaging how difficult things could get for a designer if this order were set in stone. Fortunately, we have work-arounds and among the most powerful of them is white space.

There’s one thing I left off the list above because it’s not really a thing, but the phenomenon of comparison. You see, more than any specific type of element, humans pick on differences more strongly than about anything else. Our eye shoots right to the piece of spinach between the boss’s teeth. We can’t NOT see the one out-of-step solider. We notice the child among adults at the business meeting. And it seems there is no turning off command of our focus.

And that’s where the magic of white space finally comes into play. If you need the text to be seen before or more prominently than, say, the model who is speaking, leverage white space in two directions:

  • Framing. By placing the element of focus—the text, in this case—in a semi-central location in the design and by giving it a lot of room on all sides, we see it as special or important.
  • Diminishing. Conversely, by removing white space from around a design elements that might otherwise steal attention, we communicate to a viewer that the element is less consequential.

Of course there are better and worse ways to utilize the concept of white space but at its root, it really is that simple.

A blunt but successful example of using white space is how we always see “Got Milk” campaign or the Nike swoosh presented, by themselves and with ample space around them. But an experienced designer will consider white space in every aspect of design. The spacing between headlines and paragraphs, the tightness of lines in the title of a book, or how much space there is between elements of a business card are all examples of how white space is a conscious decision a seasoned professional makes at every point of design.

It is often the single most notable difference between design work that a viewer will subconsciously categorize as “pro” versus “amateur”.


CONTACT US