The Knotted Handkerchief (KH) is a theoretical, web-based mobile and desktop shopping app I created in order to gain familiarity with the process of taking a digital application from inception to the point of development. KH would allow its users to quickly and easily compile lists of items they need to purchase. Once an item has been added to a list, KH would then send a reminder to the user’s mobile phone when the user is near a store that sells one or more of the items on said list.
My Role: UX designer. I originated and developed the idea for the KH application, and was responsible for producing the supporting documentation and digital prototype included in the case study below.
Challenge: Produce a fully-functioning digital prototype for KH that exhibits its unique value proposition.
Project’s Impact: I gained a more thorough understanding of how digital applications are developed and learned how to use design documentation (such as personas, storyboards, experience maps, and task flows) to direct and support my design decisions.
I began by conducting (1)RESEARCH in order to understand if there was a user base for KH and what similar apps were offering their users. This research was subsequently processed during the (2)SYNTHESIZE stage, at which time I combined the takeaways from my research with my own ideas for the KH app. Next, via the production of experience maps and task flows, I would (3)IDEATE the user journey and the specific screens needed to support it. Finally, I attempted to (4)VALIDATE my design decisions by administering a round of user tests on my digital prototype.
Before I could implement any of the ideas I had for KH, I first needed to familiarize myself with similar tools that were already on the market: understanding what these tools did well and what they could improve upon would help me to design something valuable of my own. I also needed to know if anyone would actually be interested in using the app.
My research, which included competitive analyses and potential user interviews, revealed that the idea of KH was, in fact, appealing and that KH could, if designed and implemented correctly, provide a unique experience for its users. While a variety of products are available that touch on elements of the KH experience, none have yet combined them in the manner that KH would.
Before beginning work on the app itself, I compiled a group of found images into a mood board (Fig. 1), which I would refer to for inspiration throughout the design process. For the mood board, I was very interested in pairing bold color and unique typography with a playful yet refined aesthetic.
In order to design for user needs, I created two user personas (Fig. 2 & Fig. 3). The first persona was Abby, a photographer; the second was Lucas, a lawyer and dad. Creating these user personas helped me to better understand prospective KH users.
As a result of producing these personas I felt I had a better understanding of who would use KH, but I still needed to develop how KH would be valuable to these users. In order to do this, I produced a storyboard.
I began work on the storyboard by brainstorming a variety of potential KH user scenarios. The one I liked best involved my persona Lucas, his son, and a nightly bath-time routine. From this basic outline, I developed a narrative for the storyboard, which would need to be represented visually in no more than six panels. I then sketched out the imagery that would be contained within these panels, and, after a number of changes and revisions, added the text describing what was being pictured. These pencil-and-paper drafts lead me to my final, digital storyboard (Fig. 4).
Next, I began working on an experience map, which graphically and textually tracks a user scenario from beginning to end. The map can take many forms, and the first step I took in creating my own was studying other experience maps that I felt worked particularly well. I was especially drawn to experience maps that utilized graphs and icons; I felt the inclusion of these elements helped to convey information quickly and concisely. The inclusion of color in the layout was also a common theme in the maps I preferred.
I then began the layout of my own experience map. I designed my map to be comparative because I felt it was important to contrast the experiences of a KH user with the experiences of a non-user. Sarah represented the KH user group; Hannah represented non-users. Both Sarah and Hannah ultimately achieved the same goal (purchasing the dish soap they needed), but Hannah's journey was longer, more complicated, and culminated in an inconveniently timed trip to the store (Fig. 5).
The work that I had done thus far made me feel confident that I had a thorough understanding of my target user group and how KH could be valuable to them. What came next was designing the app itself. The first step of the app's design process was defining its minimum viable product, or MVP. The MVP would be the bare-bones version of the app; it would include as little functionality as possible while still providing value to its users. The task flow I created as part of the first step in the application design process described the functions required to support my MVP. I began a flow that I hoped would both support my MVP and be illustrative of a common user scenario (Fig. 6).
The task flow helped me to understand how the app needed to work in order to provide value to the users I had envisioned. It also provided me with a list of screens that I needed to build for my final prototype. I sketched rough drafts of each of these screens and presented them as a paper prototype to two of my fellow designers (Fig. 7). These designers then provided me with feedback regarding potential usability issues that could arise when the drafts were finalized and digitally rendered.
I revised these screens based on my fellow designers' feedback and then used them as the basis of my digital prototype (Figs. 8 - 11). I used a prototyping tool that was new to me—JustInMind—and enjoyed the learning experience a great deal. The resulting digital prototype is a three-part mobile/desktop experience, which begins and ends with the mobile interface. It is intended to walk a user through a scenario included in the task flow diagram, with a few minor changes.
Using the digital prototype, I next administered a final round of user tests. For these tests, I was hoping to gather feedback about the prototype’s interface and learn if the participants felt the app would benefit or intrude upon their day-to-day lives. Overall, participants’ experiences with the prototype were positive and the feedback I collected led me consider some additional features I hadn’t thought of before; the ability to silence notifications at certain times of the day, when stopping at the store would be inconvenient (such as before work), was one example.