Designing the Paycrave IOS Application

A look into my process.

Intro

This project was something I created in early December of 2014 as part of my UI/UX apprenticeship with Bloc. The assignment was to take what I had learned so far in the bootcamp and apply it to designing my first mobile application. We were given a basic style guide to follow and the premise of the app; an application where users can find food trucks near them, view a menu, select items for purchase, and checkout.

The styleguide I was given to follow.

Identify and Understand the Problem

The basic problem was identified for me in this scenario:

While several mobile payment solutions exist currently, like Square Cash or PayPal mobile, when pertaining to food trucks, a well-designed discovery and payment solution hasn’t been created.

The Paycrave consumer app will allow users to discover nearby food trucks, and select food to purchase. Users will also be able to follow favorite trucks, and provide feedback for each food truck they’ve purchased from. Having the problem laid out in front of me was useful, but I needed to understand it on a deeper level before I could begin designing a solution. I began this process by learning more about my avatar or target user.

Luckily, it isn’t hard to find people that regularly or semi-regularly eat at food trucks in San Francisco; it’s one of the unspoken rules of being hip in SF. I spoke to friends, posted a few questions to the Off the Grid (a food truck event that travels around the Bay Area) Facebook group and observed and spoke to people at local food trucks. I asked about pain points in the process of finding and making payments to a food truck, what applications, if any, they use now to help, and what features they would like to see in a food truck application. I was able to create a persona of my potential user with the information I gathered. Once I had a solid view of who my avatar was, I could begin to understand their needs and goals. This was the first step toward creating a product that was solving a problem that exists. I used this understanding of my avatar’s needs and goals to fill in user stories and start working out the features and structure of the application.

User stories I created for Paycrave.

Structure a Solution

After researching my problem, studying potential competitors, understanding my persona and establishing the goals and needs I was ready to begin the process of designing a solution.

A userflow I created in Axure for users ordering and purchasing food.

Using my persona and user stories, I began mapping out the IA (information architecture) of the app. The goal here was creating refined flows that a user would intuitively step through to complete the necessary tasks of the app. I began this process on paper and started sketching out the steps a user would take to complete tasks like ‘signing up for the application’, ‘finding nearby food trucks’ and ‘placing and paying for food’. While creating these flows a user would take to reach a goal, I was also sure to acknowledge what happened when part of the process failed. For instance, what happens if a user fogets their password?

After creating and refining user flows for all of the necessary tasks and goals of a Paycrave user on paper, I used Axure to build my finalized (for the time being at least) user flows like the one you see to the left.

An early iteration of my Paycrave sitemap.

Using my flows, I was able to establish a sitemap. I used this sitemap to create the hierarchical structure of the app and delineate what pages I needed to design.

After having my user flows created and a sitemap in hand, I began the wire-framing process. This process once again began on paper. I sketched out multiple versions of the application’s pages; adding and removing features, changing layouts, reworking navigation and more. I would try new things out, receive feedback and then revise my sketches.

A look at a few iterations of my wire-frame sketches

Implement and Test… then Iterate.

After reaching a point where I was comfortable with my wire-frame sketches, I moved them into Axure. Using Axure I was able to turn my wireframes into a clickable low-fidelity prototype you can see here. With this prototype I was able to perform some basic usability testing before I even opened Sketch, Illustrator or Photoshop to begin work on the visual design. I was able to receive feedback and observe users to work out pain points in the user flows. From there I iterated on my wireframes until I felt comfortable moving into building high-fidelity mock-ups.

Visual (UI) Design and Brand

Finally I was at a point to begin creating high-fidelity mockups. I used Sketch to create my page layouts and Adobe Illustrator to build all of the necessary elements being sure to stay within the brand guidelines at all times.

Using InVision I created a high-fidelity prototype to continue usability testing and revision. I was able to get more feedback from users and revise my mockups to eliminate as much confusion as possible. Eventually, I was able to reach a point where I was happy with my mockups (being that it was my first mobile application) and call this project complete.

Revisit, revise, and ITERATE AGAIN

It’s been about 9 months since I completed this project and I thought it would be interesting to see how different it would look if I re-designed it today. I have grown tremendously as a designer over the last year as I have become more of a master of my tools and further developed my own personal aesthetic.

At the time I completed this project I liked some of the things I had designed but disliked others. I knew I didn’t like the profile page for instance, but didn’t really have the experience to pinpoint what I didn’t like about it or know how to fix it.

Looking back at this with a more experienced eye I was able to eliminate a lot of unnecessary elements that were causing clutter; making parts of the application both visually unappealing and confusing. I saw the redundancy of having both a side bar menu and a tab bar for navigation and eliminated the tab bar. I built better quality and more creative icons using my higher-level knowledge of Illustrator. I reworked the navigation of the profile page and the map/list page to create a better user experience. Overall my new designs are much cleaner, minimal, visually appealing and intuitive. You can see some of the pages from my new design below and an InVision prototype here.

by

Michael Horton

Thanks for reading!

michael’s portfolio site

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.