Creating a UX Design for a mobile app.

This is a case study that outlines the process and steps that I took on my first project as a student at RED Academy’s UX design professional program. This study will showcase how an idea to solve a problem turned into “Make Me Something” — an app that helps people discover and create recipes that suit any lifestyle.

The Opportunity

Our first week project started out with us partnering up with a classmate and using their background and experiences to identify an problem that was to be addressed in the form of a mobile app. We were given free range with this project, in that there were no technical constraints. The user in question for this project was my classmate, Lloyd — an avid board gamer, expert cook, social media enthusiast and all around good guy.

Research

The first stage of research was interviewing my main user, Lloyd. Before that, however, I created a mind-map of questions as a starting point. The purpose of this was to help flesh out Lloyds social behaviour, patterns, likes, dislikes, history — pretty much anything that could help me know Lloyd on more then just face value.

The Mind Map I created and implemented.

I started off by interviewing Lloyd for 15–20 mins to see if I could suss out a problem that needed solving. The interview was very free-formed. I actually ended up hardly following my mind-map as Lloyd dictated the direction of the conversation while I made sure that we didn’t go off in a direction that wasn’t pertinent to the task at hand. Lloyd expressed his love for cooking throughout the interview and I found that to be a pain point for him as he was unable to be a “chef extraordinaire” in his new home due to lack of facilities, lack of a roommate to cook for, and too many dishes.

It was then that I decided to create an app to address Lloyd’s problem of wanting to cook complex meals but lacking the motivation to do so.

My next step was conducting a competitive analysis. However, due to time constraints, there wasn’t enough time to delve too deep into either app. I did manage to pick up an interesting similarity between both apps:

Both apps didn’t unlock their full features unless signed up payment was made.

Planning

Planning was kicked off with a storyboard that helped to dictate Lloyd’s frustration with his current situation. I was hesitant with this step as I am no Picasso but I found the benefit of creating a storyboard and often referred back to it in order to make sure I stayed on track with solving the User’s dilemma.

At this point I had discerned that it wasn’t that Lloyd, did not want to cook but that he lacked the motivation to cook. I decided at this point that an app-based product that enhances his cooking experience was the choice to go with.

It was this need that kick-started my User Flow. My User Flow was intended to map out Lloyd’s initial run-in with this obstacle (in this case, not enough counter space) which would lead him to accessing the app to overcome it.

Around now I had the key features ironed out:

• The App must have a customizable recipe base to be flexible to each user, after all we all have our own unique tastes.

• The App must have a simple step by step flow to it.

• The App should integrate a social media presence to it.

Design

I created an initial set of sketches to help wrap my brain around what the app should have. It was basically me drawing boxes, forming a layout, and trying to see what would stick. I thought about what elements were required, the pain point I was trying to alleviate from Lloyd, and the user flow. Once I completed those sketches I morphed them with a few felt markers to give a bit more clarity for when it came to testing it out.

I’m no Picasso... yet.

User Testing

Once I was happy with the initial “design” I decided it was time to do some user testing. Testing this solely on classmates I gave them a simple task:

  • Log into the App, create a customized recipe by navigating through the set process that the app presents.

Feedback

The Feedback I got from my classmates were very simple but also quite eye-opening as they seemed quite simple fixes but also detrimental to ensuring that the user flow stayed in tact. The requested changes were:

  • Add a progress bar to show what stage the user is at during the process
  • Add a “go back” option on each screen just in case the user makes a mistake or changes their mind throughout the process.

The feedback given was very helpful and gave me the means to continue on to my paper prototype:

My paper prototype after a few revisions.

Prototype

The final result was a low-fidelity prototype that I created using the Marvel app. It was a very simple prototype and gives the user only one flow to follow but I wanted to focus on simplicity and functionality. Through the functionality the User can create recipes based on the ingredients at their disposal and the utensils they have as well (if required). From there, the user can have a variety of options of what to cook and then receive instructions on how to create said recipe. Finally, they have the option of sharing their creation on Facebook or Instagram thus hitting the social media aspect that Lloyd had required.

You can check out the low-fidelity prototype here: https://marvelapp.com/42hidad/screen/27027237

Summary

It was an intense week of researching, testing, prototyping and really getting into the UX process of learning on how to pinpoint a problem and find a solution. While I’m quite proud of my end result I feel I could have ended up tweaking and finalizing a few more design aspects and honing the functionality a bit more. This process was definately a great learning experience, now on to the next one!

Show your support

Clapping shows how much you appreciated Elliot Mayer’s story.