Case Study:
PayCrave Mobile App

PayCrave is a mobile app that lets users locate a food truck near them and make an easy, fast online order before they even arrive! It is an innovation to the mobile world of apps to help users fulfill their orders without having to wait in line. It also lets users track orders, see the food menus and read feedbacks from others.

The Main Goal

My client had an innovative idea about a GPS for food trucks but he did not just a GPS for locating food trucks, he wanted clients and users to have an easy transaction, view food menus, follow on the news and updates, view food ratings from other users, and be able to track their previous orders with ease. One of the most importance is the ease and saves time on orders. It all came down to play when they decided to let me help them with this intriguing project. I had never done anything like this and I was super excited to help them with their UX and UI Mobile App Design.

Sketches

User Research

 

Collecting research information for PayCrave was exciting as the data results came in with Competitive Analysis for both very popular mobile apps on the market for food delivery services widely used today, Foodler and Grubhub. I also created user stories based upon the responding of users. Both apps have transaction fees and order minimum that requires users to meet. Both apps, for competitive analysis, have good ratings for their services because it resolves most of the key features from the user stories. And this gives PayCrave an advantage to seek other features that Foodler and Grubhub lacks. Beverage-only orders and food truck locating.

 

Design Decisions

It was always the hardest thing to do after researching and planning, but it was the next phrase in the project to make an opportunity happen. While I had explored so many options to create and design this project, I found that the decisions I made would best fit their theme and concept.

Wireframes

 

Creating wireframes, helped me and my clients to know what is the skeletal of the design would be.

As a UX UI Designer, information architecture plays a huge role in building a well rounded website and mobile apps. Here, I used Photoshop and Illustrator as my design tools.

 

Mockups

Finally, it came down to adding colors to the skeletal design. 

I used Invision App to give an interactive experience of the app. Check it out

User Testing

With surprising results from remote usability testings, PayCrave had a bit of an icon recognition and navigation flows issue with a particular task: writing feedback on the comment area. The familiar of the pad and pencil silhouette resolved the issue. However, another issue arise...there were too many paths that can lead to the rate and write a review page. At first, it seems like it will let users choose and give them options to lead them to the right path, no matter which way you take. However, sometimes in this case, too many options can cause a downfall. Especially, when our navigation flow only let testers go towards one path out of the many. Because of that, my test results have become not as successful as I had hoped. I have gotten only 60% successful rate.

Before deciding on putting out the next test, I made a simple analysis on eye-tracking. It turns out that they were more likely to click on the More icon than the ratings link under the company's name. So, to conclude the usability testings, the final test was the submission of the order ratings and reviews from customers.

In Conclusion

I learned throughout this project is that mobile app design can be a challenge. It must be usable but simple that people don't have to think. However, there are so many icons out there and most designers, like me, strive to create innovative, distinguishable icons for each app. I learned that sometimes it is best to stick to the ones users are already familiar with. They don't have to think, and they can navigate through their tasks with a breeze. PayCrave was solely designed for users, and everything is made simple and recognizable to use. I would've decided to change the Add-More Item (to cart) button during the checkout page a little simpler and not stand out as much. I would use this information in the near future by taking the account of the simplicity of the design and the importance of hierarchy. There were some minor adjustments that I need to make. The search bar from the dashboard content area need to be longer and centered more. I had trouble with my CSS coding skills and it is likely to be difficult to know if it worked on all monitors since each monitor will likely to display differently. I am continuing to learn as I grow deeper into UX UI Design and Front End Development. This project taught me that it is okay to fail and not know everything, and that we can continue to improve.

More Case Studies

Contact
email. amymeetom@gmail.com

cell. 323.381.8482