The Project
Inception:
I met up with my good friend and Miami blog writer Stephanie one day where she came to me with the idea of a much needed app for tourists visiting Miami. She had done some research and one of the most common needs was a centralized app to find the hottest and highly rated restaurants Miami has to offer.
I immediately thought this was a fantastic idea because Miami has so many places to eat and having everything in one place would be fantastic for those visiting to make sure they get the best out of their food experience on their visit. Thus begun our journey.
Duration: 5 Months
Tools: Adobe XD, Figma, Optimal sort, UserTesting.com, Zeplin
Context
Whether one is visiting Miami, Florida or has lived there their whole life, searching for fine dining in a sea of endless options can often be chaotic. The worse part is that the reliability of the resources can vary greatly from application to application.
But what if there was an application specifically tailored to just South Florida and had all the great features of a popular diining app but much simpler and organized for the specific user.
Taste of Miami
My Role
Although UI design wasn't one of my primary strengths at the time, I had designed many graphics for clients before and created animation videos as well. Furthermore, my 3D skills also have enabled me to take things a step further than just 2D graphics etc. So knowing my background and liking my work, Stephanie asked if I did any designs for mobile applications. My initial thought was to say no, but then I realized I kind of already do that and I have even created videos specifically for applications as part of my job at Pro Media Fire. So I took on the challenge and made it my goal to do both the research and design portion of the project. I'm still in the process of my front end development so I made it clear that this would eventually have to go to a developer to implement all the designs I was creating.
To get a better understanding of what the competition was going to look like, I went ahead and conducted analyses on some of the top dining apps available to users. While I did find that some of these competitors did provide adequate information and navigation that would allow the user to meet their goals, I also did find that it was a bit overwhelming because of the bloated interfaces and information. This is understandable as these applications were designed to function pretty much anywhere in the world with any restaurant out there.
Research
The end goal of the application was to really focus on the best of the best that Miami has to offer in terms of dining but we also needed to get some feedback. We began by surveying various users who would soon visit Miami or have visited to get their thoughts on the application and the idea. It was important for me to divide the groups into locals and out of towners to really see who we needed to cater to the most and see how useful would the app even be if we moved forward.
Surveys and Interviews
My client and I really started to understand more for the need versus the want for the application. We would try to understand the needs and frustrations of current users that use other dining applications and this really helped us shape up our project. We narrowed the whole experience down to 3 main focuses for the application.
Key Findings
Easy to Navigate
The main request was for the application was for it to be easy to use. You would think this was obvious but some users were very specific about that and how frustrated they would get when they were lost in an application or couldn't find something they needed.
Reliable Review System
One of the requests that Stephanie and I never really focused on was the ability to review and how users would navigate that section of the app. Often times we get too caught up on the designs and other features that we can often lose sight of the important ones.
Reservations and updates
Users definitely wanted the ability to reserve at the restaurant of their choice without having to navigate to a third party app or that of a restaurant's proprietary one. They also were very vocal about having constant updates incase there were bugs and issues.
Like stated before, we categorized the users into two different personas- locals and visitors. We revisited these personas to make sure we were targeting the correct needs of our potential users.
When we put out the word for user interviews we had a hard time getting hits since most users already had an alternative app installed on their devices that they had normally relied on. As you can imagine, it took a while to set up the interviews with users who were potentially interested in the idea and could really find a use for it. After patiently waiting, we eventually stumbled upon a few who that thought they could really utilize this when they visit or dine out occasionally.
For the example today, I'm going to showcase two out of the 5 users we tested and were very interested to demonstrate their needs, challenges and goals.
User Personas and Stories
David
Age: 28
Location: Miami, Florida
Occupation: Game Designer
Education: University of Miami
Status: Single
Residential Status: Local
Needs
Although David has lived in Miami for 15 years, he still wants to discover more places to eat in Miami that are still great but lesser known to the public. He is technically savvy so he often doesn't find himself lost when navigating through an app.
Goals
David wants to at least visit 10 new restaurants in Miami by the end of the year and keep on discovering new exotic places to eat as well as foods.
Challenges
He feels the need to have an accurate filtering system that allows him to filter by the type of food as oppose to other categories. He also likes the idea of a community forum where he can interact with others and talk about places to eat. This might, or not be a feature depending on the implementation but it's something I need to keep in mind.
PHASES
1.) Download and open app
2.) Optional Sign Up
3.) Optional Create Profile
"I like that it doesn't force me to sign up since I want to get a feel for the app first and see if it offers what I need."
Phase 1
Tasks and Thoughts
1.) Select search bar
2.) Select filter by location, type of food, ratings etc.
3) Select restaurant
"Seems pretty straight forwards, as long as I have the ability to search by food categories I am fine. Always appreciate a really good rating system as well."
Phase 2
Tasks and Thoughts
1.) View Ratings and Reviews
2.) Read condition descriptions (optional)
3.) Make a decision
"Seems easy enough, I like that it has filter options within the filters so I can really get to what I want to get. I also like rating systems."
Phase 3
Tasks and Thoughts
Juan Camilo
Age: 40
Occupation: Chef
Education: Self-Taught
Status: Married
Residential Status: Out of Town
Needs
Juan Camilo has a lot of Family in Miami, but he also has a busy restaurant back home that he has to run so he can only visit every few years and for very little time. His dream is to explore local favorite restaurants in a very easy to use application that has everything laid out in front of him.
Challenges
One of the challenges he faces is with reviews. He doesn't really speak English so he suggested a filtering system in the review section where he can mostly read Spanish reviews so he can better understand the culture and what each place has to offer. He is personally not a fan of google translate.
Goals
To finally access the application and really enjoy cruising through popular local restaurants in Miami, whether it be a hole in the wall etc. and leaving reviews of his experience through the app. He also wants to help bring exposure to lesser known restaurants in the area since his own restaurant struggled during the pandemic and has to constantly compete against the bigger chains.
The Name
My client originally had thought of the name "Destination Miami" which I thought was pretty cool but the first thing that came to my mind was traveling. I asked myself, were we building a travel app here? I knew that wasn't the case and the last thing I wanted to do was confuse our users so I kindly suggested we go with something more food and eating related. I then came up with "Miami Bites" which my client originally liked but after saying it out loud a few times we both noticed it sounded odd and like we were putting down Miami. I then made a list of possible names and the first one on the list was "Taste of Miami" which Stephanie immediately loved since it had a catchiness to it and perfectly describes the eating experience of Miami. The food all over the city is full of flavor and taste and I knew once we had that we really needed to keep this excitement going and move into the next phase.
Ideate
After I dove into Figma, I really wanted to just get a sense of what the app would feel like and present some early navigation ideas to the client. This is where some very rough wireframes came into play and helped the client and I make some good decisions early on.
We really went back in forth on some of the pages and whether they were useful or not. Having plenty of input from others is very useful in these type of cases and also just seeing what already works definitely helped us pin down what potential users would really need.
I definitely learned the hard way that user experience is really about using common sense and often going with the obvious choice since we aren't trying to create anything abstract or conceptual.
After a few iterations we favored the above graphic but we thought it would be more appropriate as a Logo or Header type of deal as oppose to the font used through out the app. We ended up making a last minute change to this but I will get to that later in this case study.
As a result we ended up with the above font and here is why. I wanted to make sure we went with something that felt comfortable and while I am a fan of Serif fonts (in the right context) I felt that going for perhaps a stylish and simple Sans Serif font was more appropriate for the layout of this application. Stephanie agreed and we proceeded with the choice of font and if anything we can always change it down the road.
Item Five
Change the text to include your own content. Adjust the font, size or scale to customize the style.
Item Six
Change the text to include your own content. Adjust the font, size or scale to customize the style.
FONT & LAYOUT
As you can see, we were still in the early stages when we were going over fonts and still had the original name, but this is all part of the process. It's ever changing and ever evolving. Now having done videos and design professionally for several years has taught me how important the choice of font is to a graphic, video or presentation.
Item Title Two
This is a paragraph where you can include any information you’d like. It’s an opportunity to tell a story about the company, describe a special service it offers, or highlight a particular feature that sets it apart from competitors. Make sure it fits the general tone and voice of the brand, then adjust the font, size or scale to customize the style.
Color Schemes
I usually like to get my client's input at pivotal stages of the design process and I really felt the color scheme was going to play a huge part in the way we presented the app. After 8 years of professional graphic and video design, I have come to learn that colors really affect the mental and emotional state of the viewer or in this case the user. So naturally our first thought was that since it's an app specifically for Miami and we wanted to create some hype with it, then we definitely would need a hot color palette to match the general food selections in the area. But ultimately we ended up with the blue and gray hues as it gave more comfort to the overall look of the app and the feel of it.
Testing
After we decided on the design, the sans serif fonts, sitemapping etc. We really wanted to get in and prototype the app. I used figma to create a simple userflow prototype for Stephanie to try out. She also took the liberty of having some of her friends give it a go as well so we can get collective feedback. The results were mostly positive with the exception of maybe some functionality not quite working but that was something we could always iron out down the road.
The main pros were that most users were able to navigate fairly well around the app. The next steps were to meet the requirements of an aggregator model, finalize the major features and then decide on how to hand this off to developers.
Results
After prototyping I went ahead and created some high fidelity finals in Figma. After final approvals I utilized Zeplin to hand it off to the developer so they can take this to the next stage. As of today the application is still in development and will soon be ready to launch in the app store and google play. I've made myself available to her and the developer with any questions or modifications to ensure when the launch date comes that everything is working as smooth as possible.
