MS7: GUI Implementation - ISIS3510-202410-Team23/Backend GitHub Wiki
Introduction
In this MicroSprint we complemented our previous Value Proposition and completed the implementation of the GUI for both applications.
Table of Contents
Value Proposition
Our application empowers students to effortlessly share and discover new dining spots around campus through authentic reviews. Browsing allows students to swiftly access details like price, distance, and food categories, tailored to their preferences. We simplify your rating experience by categorizing your meal and providing key insights on waiting time, price, cleanliness, and food quality. We expect to provide a platform that will allow members of the university to share their gastronomical experiences near campus with other members of the community. This community-driven approach will allow users to see others' opinions regarding the options around campus and use this as an input to find a place that suits their preferences.
We are aware that there are several apps such as Apparta and Google Maps that also offer users review functionality. On one hand, Apparta is an application that focuses on allowing its users to reserve a table at restaurants with the added value of a discount. Additionally, Google Maps also offers the option to review restaurants that are registered within the app. This feature allows users to rate and leave a comment about the place they will eat. On the other hand, Foodbook wants to provide a complete catalog of the gastronomical offer near campus and allow members of the university to make reviews. The main differentiating factor lies in the contents of the catalog. Apparta and Google Maps usually post locations that are formalized restaurants, but the university is full of informal places and options that deliver food near the campus. These informal options tend to be overlooked or are hard to come by, and our app will be a platform to improve the visibility of several “hidden gems”.
🆕 Our smart feature, a For You page which recommends users spots based on their reviews and ratings, adds value because it personalizes each users experience based on their tastes. It's a feature very common in social media apps today like Instagram and TikTok. We hope this feature encourages users to try new restaurants without feeling like they are going way out of their comfort zone.
🆕 Our context aware feature, which sends a notification when a user is on-campus during lunch time (12-2pm) as a reminder to use the app and review where they ate, adds value because it incites the user to use the app. This feature will keep the app in the mind of users during peak hours of use.
UI/UX
Design
Color Palette
We chose this color palette because of its similarity to the base palette of both design systems. This invokes a sense of calm and familiarly in the user that invites them to use the app.
Fonts
We use Archivo Black as the font for the app name.
All other fonts are the default of the design systems for iOS and Android (SF Pro, Roboto).
Icons & Images
The icon used are the default provided by the respective design systems for iOS and Android.
The image used in our login page is the following:
Below you find the application icon for each of the platforms:
| Android | iOS |
|---|---|
ℹ️ We chose to use the default fonts and icons to make the application evoke familiarity and ease of use.
UI Prototype
The complete prototype (with navigation) can be found here.
Note: the prototype was made using native iOS components but it was discussed internally that each subgroup will use the corresponding native components.
Navigational Patterns
We use the pattern Bottom Navigation Bar pattern to navigate between main views.
Furthermore, we use Route details to navigate between our Browse and the actual details.
Video Demos
Implementation
Below you will find the links to the releases of each respective application:
This is a diagram of the navigation implemented.
Note: if you click on the image you can view a larger version of it.