Case Study: App: Yoga Notes
UX/UI Design Case Study: App Design
Never Underestimate Any Design Project
For creating the app version of Eva-Lotta Lamm’s book, Yoga Notes, I could have been lulled into a lazy design headspace. After all, all the content was right there in book form. I had all the text, all the illustrations, and since the book is a step-by-step guide, I even had a pretty good head start laying out the basic order of the screens.
My years of graphic design, having completed more than 100 website design projects, have taught me that every design project requires a calm head AND a clean mental slate. I may have some expectations of a project’s complexity or simplicity, but project expectations and client preferences change mid-course far more often than those expectations are met. Unexpected challenges and opportunities are always part of any design journey, especially a UX/UI assignment.
Wise designers before me established the standardized 6 Steps of UX/UI Design process. Its built-in fail-safes, and detailed stages have resulted in the creation of thousands of success full UX/UI products. Working in this manner I proceeded confidently yet remained appropriately flexible so I could face any challenges and the project could benefit from any opportunities which arose.
Contents
The 6 Steps of UX/UI Design
UX/UI Design Step 1: Understanding
It is important that a UX/UI design project’s scope, its core mission, and its complete set of moving parts is fully understood by all parties prior to proceeding.
I worked to understand as well as possible the project as a whole. I needed to gain a deep initial understanding of the stakeholder and her brand. I outlined her goals for the app? I learned why had she creating the book? I brainstormed how an app version might best benefit her and her users. I identified her target audience and developed a way to deliver her content in the most efficient, logical, and intuitive way possible.
And since I was dealing with an already-created, evolved product, I would need to understand the book’s brand more intimately than Eva-Lotta’s personal brand. Yoga Notes is as sweet, charming, and simple as it is clear and informative. If I were going to capture its tone in the app, I would need to have a full understanding of her rationale for writing it, whom she had intended to serve, and how had she decided on its pacing and order.
The Design Journey: Research
Next in line is research, identifying likely users and interviewing, surveying, and leading them in focus groups and usability testing.
Even early on, I needed to collect information about users. And data collection would need to be repeated at multiple points in the design process. Again, I knew to avoid making assumptions based on the style of the book with its cute cartoony characters and short paragraphical content. Assuming one knows the users’ minds and failing to research fully often results in missing their actual usage habits and preferences. And that results in an app that misses the mark in any number of ways.
To better inform my design process, I would need to learn users’ emotions and attitudes toward similar existing products on the market. I would need to listen to their ideas and suggestions. I would need to log their questions and help them identify and articulate nuances of their experiences.
Sometimes by asking users to open and use similar apps, I learn alternative approaches to achieving design goals. Sometimes details of users’ experiences only occur to them later. By repeating usability testing throughout the UX/UI design process, one increases their odds of incorporating this invaluable user feedback.
The Design Journey: Analysis
Now that I understood the scope of the project and possessed a wealth of key data, it was time to distill that information into a usable form. Most helpful is the crafting of a detailed user persona and mood map.
Through considering a range of data — Goals, Background, Age, Gender, Behaviors, Spending habits, Pain points, and Needs — an average likely user emerges. I create a person who will serve as my lighthouse throughout the design process. I remain connected to the user’s experience and allow it to influences each of my decisions.
Photo credit: Lucero Salinas Photography
The Design Journey: Design
Everything we’ve done, everything we’ve learned up to this point has made me more confident as I finally sit down to the UX/UI design.
For me, this always begins with mapping the navigation of the app out — its hierarchy of main, supporting, and utility screens; its obvious linkages; and any design, behavior, or other notes that I won’t want to forget later in the process. As was the case with Yoga Notes, there are inevitable differences between the sketches and the final design, but those initial ideas are a designer’s best starting point.
Sharing these sketches with the client and sharing the insight I’ve gained will sometimes result in major changes. Because the design investment is only in pencil-and-paper, those changes never seem as major as they would be if I had started digitally. Even a simple app such as this can be a lot of work with thousands of tiny tweaks and adjustments so the investment in sketching will prove its worth.
App prototype created in Adobe Xd
Once the app flow is understood and any changes noted, it’s finally time to create the digital prototype. With all the spatial problems already solved on paper, this step proceeds in an efficient manner. I currently use Adobe Xd for its ease of flow with other Adobe CC Suite.
Still, it is wise to stick to the plan but to also remain aware of value-added adjustments that are either necessary or that could improve the final product and still remain on-course for client time table and budgetary expectations. I pay close attention to opportunities for value-added enhancements, and I make the client aware of any difficulties, gaps in understanding, the need for additional resources, etc. as work progresses.
During the build, at multiple mile markers, I share the prototype for client and user feedback, noting any pain points and new insights that may improve the product. Analysis > Feedback > Design continues in cycles until all parties are numb… ahem… satisfied.
Take a look at the video below of the working prototype
The Design Journey: Launch
Only now can I pass the prototype to the development team. If the prototype is the caterpillar, this is the stage where it transforms in its cocoon. I work closely with developers, listening to and considering their feedback to ensure that any issues that arise are assessed and addressed.
Internally and user testing continues. Late in the process, we release a beta launch, and sometimes even an alpha launch before that, depending upon the application’s complexity. Once beta is passed, keeping with our analogy, the butterfly emerges into the markets.
The Design Journey: Analysis of the Process
Congratulations! The work done. You can now enjoy your living app.
However, over time as you collect feedback from your wider user base, you may identify areas of improvement. You may have your own ideas for any number of modifications. You may want to simply expand the app’s reach or functionality to match your organization’s growth. As operating systems evolve, there will be an unavoidable need for compatibility updates.
Whatever the reason, I’ll be there for your organization.
In the meantime, after your organization’s application launch, I will analyze the process top to bottom, identifying areas where improvements of all types can be made, and implement targeted changes going forward.
Taking in all positives and negatives, I asses the project as a whole. I identify points where the process slowed or stopped and why. I track how the user experience data changes over time using the application. I deduce causality behind usage rises and drops. I check to see if I addressed and solved pain points fully, accurately, and on the first run. I brainstorm and log suggestions for future modifications and/or expansions. Finally, I consider anything that might make the next project run more efficiently and deliver an even more successful product and experience.
The bottom line is that during and after your application’s development and launch, I remain your organization’s advocate.
Let’s get started today on your UX/UI design project!
CONTACT CMD
Other Graphic Design Services
UI showcase
Family / Caregiver App
Sports Streaming App
Live Stage Streaming App
Appointment Management App
Recent Comments