Random Restaurant

Random Restaurant header image

The Idea

Studying and working in the city centre for the last several years, I would occasionally dine out. Dublin provided me with a wide range of choices of places to eat, but a reoccurring issue I faced, along with my friends and colleagues, was deciding on where to eat. Random Restaurant tackles this issue, and improves and innovates on the products currently available on the mobile application market. The app provides the user with the ability to search and discover restaurants that are currently open and fit their unique requirements, such as diet restriction, distance, rating, price and their preferred food. As the application is used more often over time, it’ll also use the data from restaurants they have visited, and also restaurants they have favourited. With all this data combined it’ll be able to suggest a restaurant best suited for the user. If the restaurant selected isn’t what the user is currently in the mood for, they’ll have the functionality to tell us what they don’t like about the restaurant, for example the type of food served, and the app will find a better alternative place to eat. This will put an end to prolonged decision making when choosing a restaurant for dining out.

My Role

UI/UX Designer
Visual/Graphic Designer
Software Developer
QA Tester

My Tools

Adobe CC
InVision
Ionic 4
HTML5
CSS3
Firebase

Development

Random Restaurant was a self-directed solo project built for my MSc in Creative Digital Media and UX. The project took 6 months to develop from the inception of the idea to live release on to the App Store on 10th December 2019. The following are a summary of the main steps of development I followed in those 6 months.

User Needs Analysis

My first steps was to establish the user’s needs. Doing this I would gain a broad view on the market and benefit from further insights from individuals/groups. This research was done by conducting a focus-group, survey and concluding with observation of user’s using their mobile devices to find somewhere to dine out.

From this research I was able to establish three distinct user personas. This would help to identify the needs and values of a typical user, and the personas allowed me to put a face to relate to during the stages of the project’s development.

User Persona of Charlie
User Persona of Diarmaid
User Persona of Michael

All of the data obtained thus far was then used to design the mental model see below. The mental model maps out the user’s process of deciding where to eat out. The top towers represent the decisions that influence the user, with the heights representative of their respective importance, i.e. taller towers = more important. The stacks below are the variables associated with the tower above. Some of the stages in the decision making for dining out, e.g. “Arrive at the restaurant”, would go beyond the means of the application, but are still important to note for potential growth of the application through updates.

The model served as a visual reminder of the issues highlighted and methods used to find the right place to eat.

Mental Model for deciding where to dine out

Background Research

Understanding what the user’s needs are, I began looking at other mobile application and websites that I believe to be the most popular in regards to restaurant finding. By doing this I was able to see what has been accomplished by competitors to either replicate what they have successfully accomplished and potentially improve on.

Having a better understand of what my application will do and what the user needs are, I began looking at what tools/technologies I will use to accomplish my goal. Some tools I was previously exposed to (Adobe CC, InVision, HTML5, CSS3)  from previous projects but some were new to me (Ionic 4, Firebase) and required more time for research and testing to confirm they would be successful in accomplishing my goal.

Deciding where I would get my data was important, and required testing of several APIs to see what restaurant data would be shared with me. I settled on using the Yelp Fusion API as it granted me the most amount of valuable data on individual restaurants around the world.

Treatment And Solution

Following on from my user need analysis and background research, I had a rough idea of what my application was and how it would function. I began to put these down on paper so I could figure out what was MVP of the application. The techniques I used to help were mind map, crazy 8’s and storyboards. These techniques went through a number of a/b testing phases to refine the low fidelity prototype for the next stage of testing. The highlight of this stage of testing was allowing me to experiment with irregular designs, not inherently associated with restaurant finding applications, such as a music player shuffle composition.

Next I moved onto low-Fidelity paper prototype and also developing a simple sitemap to generate a visual for the proposed web apps structure. The paper prototypes were transferred onto InVision. Through these interactive paper prototypes I could get user to test certain use cases to see if they could reach their goal, this would also show me if the sitemap I have developed was suitable for the user reaching their goal in as less screens as possible. The final note was to confirm if the important information required by the user to decide on a restaurant to go to was being displayed.

Paper prototype of Random Restaurant for InVision
Original site map of Random Restaurant iOS app

Continuing on I began testing high-fidelity prototypes on Adobe XD. This stage of  prototypes was probably the longest stage of prototype testing, and contained numerous trials rounds. This was to prevent any huge changes to the final product which would require additional time for changes to the coding implementation. Each round of this prototype testing required adjustments to elements of design such as font sizing, spacing, icons etc. based on the user feedback.

High fidelity prototype of Random Restaurant map page from Adobe XD
High fidelity prototype of Random Restaurant list page from Adobe XD
High fidelity prototype of Random Restaurant details page from Adobe XD
High fidelity prototype of Random Restaurant profile page from Adobe XD

With the high-fidelity prototype testing confirming the feel and look of the application I moved on to the coding implementation. Certain changes and additions had to be made based on user feedback from real world testing. In addition, due to unforeseen technical and/or time limitations changed had to be made, but overall kept the feel and look set by the high-fidelity testing.

screenshot of Random Restaurant's map page
screenshot of Random Restaurant's list page
screenshot of Random Restaurant's details page for The Riddler
screenshot of Random Restaurant's details page with map
screenshot of Random Restaurant's user profile page
screenshot of Random Restaurant's favourites page
screenshot of Random Restaurant's recently visited page
User Testing

As you can see from early in development there was informal and formal testing performed, I made it a priority to test early and test often to make sure the application was a success. The frequent testing brought me to an iterative approach for development allowing for planning, design, implementation, testing and evaluation, then repeat.

Most successful round of testing was performed through Test-flight as I could reach a wide audience of users and get real world experiences with the application in several countries around Europe. At this stage most of the issues that were highlighted were minor and easily addressed, as a result it didn’t delay the set date of the live release of the app. The major and final update to the application was on-boarding, this was anticipated and scheduled. The reason was to see what a large audience of users didn’t understand about the application. This made it so only the essential on-boarding instructions were implemented to improve the user experience by preventing any overbearing tutorials for any new users.

Onboarding for map markers of Random Restaurant
Onboarding for finding the next restaurant of Random Restaurant
Onboarding for adding to your favourites list of Random Restaurant
Onboarding for adding to your history list for Random Restaurant
Final Thoughts

This summarises the development of Random Restaurant, from the focus group in user research till the final days of TestFlight before release. By reading this through this development you can see the journey of how the inception of a simple restaurant finding app evolved over time, to Random Restaurant, an application made for assisting users that agonise over decisions, specifically on deciding where to dine out.

On a personal level looking back at the beginning of development I didn’t think I would achieve as much as I did. There was a lot to learn over the course of development and  there was a steep learning curve when it came to learning new technologies such as Ionic and Firebase. In the end I’m very happy with the final product and gained a new confidence in design and coding from the development of Random Restaurant.

Evolution of Random Restaurant through development

Random Restaurant is available for iOS 11 devices or later and can be downloaded here.

This is a unique website which will require a more modern browser to work!

Please upgrade today!