From

paper
tO
prOtotype

Here because of a class assignment? See numbered sections below for the content you are meant to review.
About this page

This is a presentation for a UX class, showcasing the steps to take a design from paper to a digital interactive prototype deployed for design critique and review. The task I was given at the outset was to develop an app that was specific to bakeries, with the idea that the app would help the user locate the nearest bakery with open, reservable seating. (The app itself is not meant to be viable, ultimately, as this was a class exercise.)

To my classmates who are tasked with reviewing this page, welcome! I appreciate the feedback. Feel free to collapse this paragraph of text, as the materials to review are listed below this line:


1: ROLE

As this is a class assignment, my role was as a sole producer throughout the design process described below. Accordingly, there are aspects of this process that I find myself already well-suited for, as well as aspects where I found myself wishing I had additional team members there to assist in development.

2: GOAL

The purpose of this exercise was to design toward a specific end goal, that of allowing users to determine if where the closest open table at a bakery might be, and to order and reserve seating at that table, then present the QR code at the door so that all of the interactions could be touchless, a primary concern due to COVID-19 at the time I began developing the app.

3: END USER PERSONAS

The users I designed this for were very specific personas, developed in the cultural moment after the initial lockdowns were over and there was a sense that there could be a new normal for bakeries and coffeeshops as they returned to business. Here is a look at the initial research documents I developed for these user studies.

Carousel imageCarousel imageCarousel imageCarousel imageCarousel image

4: Key Constraints

One user wanted to coordinate payment within the app across different payment options and different users. The other wanted to make sure there would be appropriate seating at the bakery so they could meet with friends to study together. I identified the second user as one that I could design towards a solution. Additionally, as this is a class assignment, resources are limited to what I have at hand and can source online, as well as my own technical limits and skill set.

5: RESEARCH

Once a lo-fi prototype was developed, this was tested in an unmoderated teledistant review session. The practice of active listening, while encouraging the participants to think out loud, provided a recording that could be reviewed and transcribed so as to glean insights to apply to the development of the class assignment.

Carousel imageCarousel imageCarousel imageCarousel imageCarousel imageCarousel imageCarousel imageCarousel imageCarousel imageCarousel imageCarousel imageCarousel image

6: Conceptual STRATEGY

The app should be able to showcase a map screen with the closest bakery locations, it should provide easy sharability of the app itself to the other people coming to the bakery, and it should provide a menu, shopping cart, and qr code receipt for the user. My design development began with a determination to provide as much visual inclusivity as possible, while meeting the requirements of the class assignment. There was a design restraint requirement that led me to include as many different aspects as possible that could be applied to different elements, as a way to explore the full functionality of the interface. I also restricted my design to a single device screen, which most closely resembled my personal phone, so I could more easily critique my design as I iterated it over the various classes. My conceptual strategy was to guide the user through similarity to other visual designs, as well as consistency in on-screen navigation elements, to try and make the visual experience as intuitive as possible. I also wanted to provide photorealistic art throughout, to help anchor the digital experience in a conceptuialized physicality on the part of the user.

7: WIREFRAMES

My wireframes began with rough - and I mean - rough (I've lost the use of my right hand and have learned to draw, very ruggedly, with my left hand) sketches on paper. These hand-drawn designs were painful but required by the class, and as such I wanted to underscore the effort that went into developing this class exercise. From there, the visual wireframes were redeveloped within a digital workspace, as you can see below.

User flow

First look at how I mapped the flow of the user.

intial layout

Visual icons were derived from this design.

digital wireframe layout

STICKER SHEET

8: USER TESTING

Once this was developed user experience and testing of these low fidelity prototypes were run to identify issues within the prototype that could be addressed within the next design iterations.

Carousel imageCarousel imageCarousel image

9: Final Class Designs

The insights from the user testing were incorporated into a final round of iteration, providing this high fidelity prototype of the Best Bakers app.

10: CONCLUSION

Developing an app from beginning to end revealed a number of procedural steps that I'd otherwise have taken for granted. Having my own chronic pain disability, I found myself thinking a lot about what touch gestures mattered in an interface, and increasingly drove my desire to find more speech navigation methods I could include in upcoming designs.