Studio Sen - The Tilted Tulip

Digital wireframing

Before we can begin the process of making our prototypes, we must take the wireframe ideas we brainstormed on paper and make them come to live digitally.

Now, let's spruce up our wireframes a little here since we are digitizing them. Here is what our digital wireframes look:

This is what my first digital wireframe looks like, replicated from my paper wireframe.

What does a low-fidelity prototype look like?

The skeleton for a low-fidelity prototype I completed as a concept for a major flower shop seeking to move to an app. As you can see, it is much more fleshed out than my wireframe. This is to enable more interaction with the app.

Have you ever wondered what the actual prototype looks like behind the scenes? This is my low-fidelity prototype which I put together after I completed wireframing for the app. Each string is a user flow connection.

Demo a low-fidelity prototype:

The very first prototype--simple in layout with primarily the basic skeleton and app functioning taken into account, this is what a low-fidelity prototype can look like. Please take a look by clicking around on the actual phone screen and trying to complete a user flow! I am very excited to upload future prototypes as I make more progress. Note: You will not be able to fill in anything specific into the input fields such as the credit card and the address.

What does it look like to plan a usability study?

Above is a basic layout of my UX research usability study. This layout will help us with future research. Without this we would seriously struggle to conduct research that is specific, organized, and neutral.

Data from usability study

In order to determine what our high-fidelity prototype will look like, or what features from our low-fidelity prototype should change, we need to conduct a usability study for multiple participants. One of our most valuable pieces of information will be the data collected from the participant studies. Below you can find the data I took from all the participants I used in my usability study. For my usability study, I had five participants run through a low-fidelity prototype of my app and complete several tasks.

From the information I gathered from observing click paths, behaviors, opinions, and issues/errors during usability studies, I can draw some conclusions as to what specific patterns users are drawn to and what insights we can gain from these observations.

Pattern and insight identification

Creating mockups

Now that we have created our low-fidelity prototype and conducted our first usability study, we can start creating mockups. We are on our way to creating our first high-fidelity prototype!

To create mockups we need to start with the foundations of the layout. I am going to start by adding text:

Next, let's go ahead and add some color. I like the colors pink, black, and creme as my primary colors. I want a minimalist look, so I plan to keep a very neutral white back lay. I want my images to do some of the heavy lifting when it comes to color on the page that stands out, so I will be making a lot of my color elements call to action buttons, since the color will really highlight the important features this way. Here it is:

Sweet! Now we get to work on the iconography, which means it's time to add icons and stock images. On top of that, I want to consider things like the grid layout and adding dividers as well as other points of containment. We also want to take into account things like scale, variety, proportion, unity, and hierarchy. This is going to look a lot more put together now:

It definitely looks a lot more put together now. I can't wait to add more for the high-fidelity prototype. Stay tuned!

What does a high-fidelity prototype look like?

This is the design behind the high-fidelity prototype. As you can see the individual designs on each page are much more fleshed out, and more pages have been added since the low-fidelity prototype to give it more functionality.

This is what the user flow for a high-fidelity prototype can look like. Each string serves a specific user flow purpose and adds life and realism to our high-fidelity prototype.

Demo a high-fidelity prototype:

Here is my high-fidelity prototype! Please click around on the phone screen to interact with the visuals in the app. As you will find if you do some exploring, this high-fidelity prototype is extremely fleshed out. Up for a little exploring? Try to find your profile, your saved items list, check out the banners and product pictures (including the arrows!), and try to complete a user flow process for a delivery or pick up order. Note: You will not be able to fill in anything specific into the input fields such as the credit card and the address. You can however click to autofill the boxes as an idea of what it would look like filled in.

You can view the finalized case study slide deck by checking out the attached source files or clicking this link to view the presentation on Google Slides. Thank you so much for checking out my work, I am always looking forward to gaining more experience from this process.