Design Document — Yippy!

Prior to this reading, I encourage you to check out my partner’s article on our team dynamics: https://medium.com/@ryan.dphu.nguyen/hitting-the-control-key-developing-yippy-e2d6ff39e954

App name: Yippy!
​View where your friends have been to and how they liked it!

Audience:
Everyone looking for recommendations to go to a place.

Think back of a time you travel ​to a new city. You are planning your trip and thinking about where to go. You would probably look on Yelp for people's reviews, but you will more likely go to a place that your friend recommended over those highly reviewed places on yelp since you and your friends have common interests/common taste and you would trust your friends' recommendations over strangers' reviews on Yelp. This app mainly focuses on presenting where your friends have been, what they have reviewed on that place to give you a better sense of where to go.

Experience:
A user opens the app and sees options to view Friends’ reviews or the user’s own reviews. When clicked on Friends’ reviews, it opens up a list of places that the user’s friends have reviewed on and shows the detail of the review and star scale of recommendation. The user can also add a review to that list.

App Design Screenshots:

Color:

We chose a complementary color template to create a relaxed, hungry, not too contrasted theme and vibe.

Typography:

We used two different typography types. Chalkboard SE for our logo to create a playful sense since it is an app that you associate with friends and finding fun/nice places; Optima for all the other pages to be a little playful with the little round effects but still maintained the professional look.

Visual hierarchy: — what is information hierarchy and how does your app use information hierarchy to guide user attention and action? How does your choice of app layout and grid system also guide user attention and action?

Since our app is still a minimum viable product, and everything is sweet and simple by being really straightforward, the main functionalities are seeing reviews, viewing specific reviews, and adding reviews. These are all equally important thus not having many visual hierarchies. However, it is implemented in the profile page where the user can more visibly see the two options to either go to “My Reviews” or “Friends’ Reviews” whereas “Sign Out” button is less visible.

Product commercial:

Technical:

Designing coding architecture is another important part of building a product. Instead of having all of the big chunks of code in the same file, we decided to follow MVC architecture in coding, split them into folders and files.

Models
[What data are we dealing with? What classes will we create for that data?]
Review Model which takes in user inputs such as the title, location, content; and modification date.
​
Views
[What custom views do we need to create? Include pictures of your prototypes/sketches!]
Buttons, Labels, Image View, and List Review Table View Cell​ (each separate review on the reviews table view list is a view cell).

Controllers
​Profile View Controller — guides to either see the user’s own reviews or their friends’ Reviews

Reviews Table View Controller — Displays a table view list of reviews and gives a quick glimpse of the place name and rating.

Display Review View Controller — Displays details of a specific review which includes: title, location, comments, rating, time.

Other
[Any other frameworks /things we will need? Helpers? Services?]
​Firebase Database
Firebase Authentication with Google Sign in