RestoCred

INTRODUCTION/PROBLEM

Inspired by my need to design, I decided to create a project for myself.

Restaurants and other small business are shutting down due to the restrictions caused by Covid-19. Many are at risk of shutting down permanently due to the financial strain the closures are causing them. I decided to create a product that would be of assistance and supply the financial support they need. Thus the idea of RestoCred was born. I designed an app to help fund these restaurants’ survival. The app enables people to donate money now, which they will later be able to cash in as credits at the restaurants they helped save.

RESEARCH

My first step was to see what other apps/products exist. This included: checking out the competition, checking out content-adjacent apps and looking out for unrelated apps for concept and design ideas.

1. Go Fund Me - “A for-profit crowdfunding platform that allows people to raise money for events ranging from life events such as celebrations and graduations to challenging circumstances like accidents and illnesses.”

2. Dining at a Distance - “Created specifically to support food providers during the COVID-19 pandemic, offers dozens of local, community-sourced databases of farms and restaurants that remain open for business.”

3. James Beard Foundation - “By supporting JBF, you are helping us to achieve our mission to celebrate, nurture, and honor chefs and other leaders making America’s food culture more delicious, diverse, and sustainable for everyone.”

The existing apps that I found are very impressive and tackle tough issues, but do not solve the financial problems faced by the vast majority of restaurants across the US.

IDEATION

FUNCTIONS

I started by listing the main functionality my app would need.

1. Restaurants can set up fund me pages, which will state how much $ they need.

2. Users can donate to restaurants.

3. Users will be able to keep track of the restaurants to which they have donated and have credits with.

4. Users will be able to cash in their credits at restaurants (like a voucher).

USERS

At the same time, I needed to figure out who my users are to know who I was designing for.

1. Restaurants that need money to survive.

2. People with money who love eating out.

   1. Wealthy

   2. Social/Political

3. Diners who like to help their communities.

   1. Givers (Generous)

   2. Community Centric

   3. Trusting

   4. Foodies

   5. Hopeful

USER PERSONAS

With the users’ characteristics broadly defined, I narrowed in on who the individuals are that I was designing for. It is important to put the users at the centre of every decision made.

I came up with two personas, Katherine and Alex.

MAPPING CONTENT/INTERACTION

FUNCTIONALITY

In order to begin designing the structure and content of the app, I found it helpful to list the step-by-step functionality of the app:

1. Either search for restaurant by name, scroll through a list if nearby restaurants or view them on a map (like you would searching on google, yelp, etc.).

   1. Ability to search with filters (i.e. “in your area,” “by cuisine,” “need help most”)

2. Select a restaurant, read its profile, discover its needs.

3. If you would like to make a donation, select amount and donate.

4. View “Restaurant X” profile to confirm credits have been applied to your account.

MAPPING

Then use that functionality to begin mapping the content needed and their interactions.

When designing the app, I wanted to stay as slick and streamlined as possible. Speed of use is an important aspect of an effective user experience, therefore having as few steps to get to a users intended goal is key. As previously defined, the users needs were to find the restaurants they wanted to donate to and donate. So, after logging in, it is intuitive to have the users land at a list of restaurants; based on how close they are to the users location. The user needs search functionality in order find restaurants that they want to donate to, as well as an ability to view restaurants in a list or on a map.

When clicking into “restaurant x,” it is important for restaurants to have a chance to introduce themselves and explain how much they need and why they need it. It is important for restaurants to grow a relationship with their potential donors. Similarly, a comments sections is useful for customers to interact with each other and the restaurant, which makes people more comfortable donating. In this section, a big call to action to “donate” is important, accentuated to show hierarchy.

A separate credits page is necessary for users to keep track of what they have donated, and use it to cash in at restaurants later on.

USER FLOW CHART

I designed the user flow to better map out and visualise the experience my users would have. This helps easily communicate what the user flow looks like and ensures no important steps are missed. It is much easier to make decisions and changes in low-fidelity designs before a lot of time is invested in the look and feel of the design.

NON-VISUAL PAPER PROTOTYPE

I used low-fidelity paper prototypes to take the next step at designing content placement, as well as start to develop the feel of the app. I then used this prototype for usability testing with potential users. At this stage it is easy to make changes based on the feedback received.

To make the app as intuitive, accessible and usable as possible there were a few things I knew I wanted to get right, including:

• Do not make the user click, scroll or interact more than necessary.

• Make it obvious to the user what steps they need to take to reach their goals.

• Make the interface accessible regardless of age or disability.

LOW-FIDELITY WIREFRAMES

Similarly, a low-fidelity prototype is great for testing functionality with potential users so that they do not get caught up on the visual design; such as the colours, typefaces, button shape, etc. This allows changes to occur to the functionality of the app; such as adding or subtracting features. This is a very useful way to work when in an Agile environment.

A decision that was confirmed during this process was to have the menu options Filter and Map View at the top of the page as opposed to the bottom. It made more sense to have them at the top because they were not continuous options on every page and users are used to finding these options at the top of the page on other apps. Having thought about whether menu item icons were needed at the bottom of every page, I concluded that in order to keep the product streamlined, further options were unnecessary. This hypothesis was back up after conducting tests with five users.

GUERILLA USABILITY TESTING

In order to test the app’s user experience, I had users test the app as I watched them. It was important to let users know that I was testing the app’s design and not them. I had them explain every decision they made out loud so that I could note down places they were confused or stumbled. In these cases I would ask open-ended questions, such as, “I noticed some hesitation there, can you please explain why?”.

I had each user perform the same set of tasks:

1. Login and view a restaurants page.

2. Find the restaurant that is closest to your location and donate money to it.

3. Find the restaurants you have donated to and view your credits.

I then asked a few follow up questions:

1. What do you think the purpose of the app is?

2. Are there any features you wish the app included or anyway you would improve the app?

3. Is there anything about the app that is unclear to you?

4. What do you find appealing about RestoCred?

5. Did anything about RestoCred surprise you?

6. Do you think RestoCred is going to be useful?

7. Would you use RestoCred?

8. Why do you think someone would use RestoCred?

Using the three tasks outlined above, I evaluated the success of my prototype. In a spreadsheet, I put each task at the head of a column and each of the five users at the head of a row. I then used the spreadsheet to note down the tasks each user was able to complete, making a note anywhere they stumbled. The users collectively completed 14 out of 15 tasks successfully, giving a success rate of 93%.

REFINE UI & PROTOTYPE

After conducting a few rounds of testing, it was time to refine the app’s UI. (This included designing a simple logo.)

I decided to use red as the main colour throughout. This is due to its eye-grabbing nature and its association with courage, passion and joy. The subtle red gradients are used to add depth and intrigue to the background and give a shiny, metallic like feel. I used a variety of fades and shadows to accentuate hierarchy and depth. Space and font colour, size and weight were similarly chosen to establish hierarchy. Helvetica Neue was used to keep the font plain and easy to read, whilst having the modern look that sans serif fonts offer. The Money Amount Needed and Donate (call to action) buttons are the largest components of the app, this is simply because they are the most important features in the app, as established by the users needs.

For usability purposes it was important to insure that the user could quickly identify where they need to look and how to interact with the interface; using contrast, colour and spacing as visual cues. I included clear call to actions in every necessary situation, the most important was to call users to donate. It is always important to have the UI large enough for those with difficulty seeing, especially when a large portion of users are expected to be on the older side.

STYLE GUIDE

View PDF

CLICKABLE PROTOTYPE

View Prototype

Please test the prototype for yourself by either clicking the link above or by clicking on the image below. Note: when your cursor arrow turns to a finger, you’ll know the interface is clickable. Start by trying to login!

AFTERTHOUGHTS

After further testing it became clear that an introductory page in the app explaining what exactly RestoCred does, how it works and who it is for, would have been helpful for first time users. This step was bypassed in previous testing because I made the mistake of explaining the concept of the app to users before testing. So, for users with no prior knowledge, an explanatory page should be developed. 

Many users gave the feedback that they would like the option to simply donate, or donate a percentage of their money that wouldn’t be needed to be paid back. I hadn’t foreseen this level of generosity in people, so in further developments of the app a percentage donation/percentage credit option should be added.

Overall, given the app’s goal to provide restaurants financial support, I’m pleased with how the app turned out. I did not design the app from the restaurants point of view, so work is still to be done from their perspective. But, after completing that, as long as the right marketing was put in place to reach both restaurants and willing donors, I’m confident RestoCred would do a great deal to help struggling restaurants through the quarantine shut downs. However, I must approach this conclusion with humility given I’m not fully aware of the variety of issues facing the restaurants across the US.