Interactive Hi-Fi Prototype Report

Value Proposition The driver and business ecosystem

Mission Statement Our goal is to help drivers find the resources they need while driving while also empowering local businesses with a new way to increase traffic through their facilities.

Problem/Solution Overview Gig-economy drivers have great difficulty finding amenities (bathrooms, showers, parking, etc.) while working in highly populated areas. Coral connects drivers and businesses, allowing businesses to publicize their amenities to drivers and enabling drivers to find the facilities they need with ease.

Meet the Team

CS 147 - LOCAL COMMUNITY STUDIO

Alec D.Tyler V.Edward John H.

INTRODUCTION

Problem and Solution Overview Out of the 55 million gig-economy workers in the US, many face difficulties finding necessary amenities such as bathrooms while working. Their current solutions include finding gas stations, using the side of the road, or sometimes even using a bottle in their own car. Similarly to how coral reefs provide sanctuary and resources to passing fish, our mobile app coral seeks to unite these workers with their necessary amenities provided by small businesses, which in return will benefit from the increase in customers. On coral, drivers can set preferences for what kind of amenities they would like to see on their map, as well as route and rate amenities. We’ve designed in parallel, a Business version of coral, geared towards the providers of these amenities. On the business version, we have a single workflow of adding an amenity to the reef. We believe coral has the ability to dramatically improve the quality of life for this underserved community.

Figure 1: coral main map interface

TASKS

Simple Task: Personalize Experience If logging in for the first time, users will be prompted to select, from a list of five precurated amenities, which ones they would like to see in their version of the app. We learned from our user research that the needs of these workers are extremely varied and our app needed to be flexible to accomodate that.

Figure 2: Personalize Experience Taskflow

Medium Task: Rate an Amenity After successfully routing users to an amenity, coral will prompt the user to potentially leave a review of the amenity. There is an initial screen of general positive or negative experience, followed by preset responses and an optional self composed review. We wanted this task to be as smooth and fast as possible as many of these drivers will not want to spend a lot of time on this. This will allow drivers to better decide which amenities to route to in the future, and for the businesses to understand where they are excelling and where they could use improvement.

Figure 3: Rate an Amenity Taskflow

Complex Task: Route to Amenity This is the most essential task of coral, to get our users to their desired destinations. While on the main map screen, tapping any of the amenities (colored pins) will pull up a short rundown of that amenity. Users can directly route from that screen, or drag the screen up for additional information. We believe this is the most complex task due to needing to the choice that the user has to make in deciding which amenities to reach.

Figure 4: Route to Amenity Taskflow

DESIGN EVOLUTION

Initial UI Sketch

Medium Fidelity Prototype Through testing with actual users, we noticed that they were less technologically inclined, and they found it difficult, embarassing, and frustrating to interact with this unfamiliar UI and format. To give them the most seamless transition from their existing apps, we drew inspiration from rideshare apps and Google Maps interfaces for our Medium fidelity prototype.

High Fidelity Prototype Through the heuristic evaluation and peer review, we refined our UI to be more cohesive, more minimalistic, and easier to navigate.

MAJOR USABILITY PROBLEMS ADDRESSED

6. [H2-7. Flexibility and efficiency of use] / 3 / Found by: B (Not addressed)

On the map interface, you can see a specific location’s nearby amenities by using the zooming in and out feature. It might be frustrating and time-consuming for the user to visually search for a certain location on the map. For efficiency of use, I would also allow the user to type in a location(address or name of the place) for which they are looking for nearby amenities.

Rationale: I completely disagree with this comment. Our users are often in areas they haven’t been to or not familiar with, and they would not know the exact location they would want to go to. They would want to find the nearest amenity of their need or an amenity that is along the way of the user’s travel. Inserting a “search” option will not improve the user experience. The user can use Google Maps for that. 

9. [H2-1. Visibility of system status] / 3 / Found by: B FIXED

The “check-in” button on the “arrival” pop up is not reflective of the status of the user after the button is clicked. Rather than checking in, they are giving a review of the amenity which might not be intuitive for the user. I would recommend switching this to a “leave a review”.

So I disagree with this because it’s pretty obvious that the user checked in and is directed to a review option. I don’t want to add a new button because that’s more friction. I made it a bit more obvious that there’s a difference between checking in and leaving a review by adding a line between sections and changing the text of the review section to “Leave a review”

13. [H2-8. Aesthetic and minimalist design] / 3 / Found by: B FIXED

When a user signs up they are sent to a preferences page where they can choose amenities they want. Upon clicking multiple amenity preferences, additional preference options are presented below the “Additional Preferences” in no particular organization. It’s unnecessary work for the user to recategorize the additional preferences with a specific amenity preference. I would recommend creating a drop-down bar for every amenity. If the user preferences an amenity, a drop-down appears with additional preferences(specific to that amenity).

Implemented a drop down bar for additional preferences specific to that amenity.

15. [H2-3 User control and freedom] / 3 / Found by: A, D (Not addressed)

Currently there isn’t a way for users to change business information (name of the establishment and tagline) upon onboarding. Allow users to delete or update those information.

We wanted to keep an add business tab just in case the owner of a chain restaurant  or amenities wanted to list multiple locations at a time. We envisioned business information to be modifiable in the settings page on the right of the bottom bar. 

20. [H2-5: Error prevention] / 3 / Found by: D FIXED

In the scheduling screen, the “Apply to Monday,”, “Apply to weekdays” and “Apply to all days” buttons are very close together but have drastically different effects. If I mean to set my schedule for one day but accidentally press apply to all days, I now have to go through seven days and change things one by one. Perhaps pressing either of the “apply to all” buttons should have a confirmation window to make sure I don’t hit it by mistake.

Reworked the scheduling screen for the business app.

21. [H2-10: Help & Documentation] / 3 / Found by: C, B FIXED

When clicking the charts icon, it shows a visualization of how the restaurant is doing overall. Because of the lack of labeling and titles, it is challenging to understand what the visualization is supposed to represent and how a user should interpret it. I would recommend adding a title and labeling the x-axis and y-axis or adding a help button that explains the visualization so the user isn’t confused and understands how to read the visualization.

Changed the graph to give more relevant information and to make the time scale variable and adjustable by the user.

24. [H2-3: User control and freedom] / 3 / Found by: D FIXED

I don’t see any way in the analytics page to view the data from past days, either by seeing the

hourly chart for previous days or getting an aggregated summary of overall data. I think the best way would be to add navigation arrows above the graph but below the header to move between days, and maybe have a different tab at the bottom for overall analytics.

See above fix.

34. [H2-5 Error prevention + H2-10 Help and documentation] / 4 / Found by: A FIXED

It is unclear whether this is a toggle switch between Restaurants and Bathrooms or just two seperate buttons; users may try to toggle between two options when they are actually buttons or vice versa.

Also, what do “Restaurants” and “Bathrooms” represent? Does toggle switching to “Bathrooms” show statistics of bathroom use at Pho Kim Ahn? Some user education and explanation on what this feature represents would be helpful for user’s understanding of this feature.

Changed the toggle to between graphs and reviews.

38. [H2-8 Aesthetic and minimalist design] / 3 / Found by: A, D FIXED

Why is there a need for a map in the Coral Business app? Only the user’s business will be shown on the map which is rather unnecessary as the user already knows where his or her business is located.

Map removed from coral Business.

PROTOTYPE IMPLEMENTATION

For the low-fi prototype we used paper, color pencil, and 3D printed phone. As for the medium-fi prototype, we built that with Figma. The final hi-fi prototype was built using React Native on Expo and Google Maps API.

Tools Paper, color, pencil, and 3D Printed phone

These tools were great in quickly developing simple mockups of our ideas. Specifically, as we were generating ideas for the product interface, the tools allowed us to swiftly get feedback.

The tools were not effective in being completely reflective of the actual UI design and it was difficult to show live animations.

Figma

Figma was an incredibly useful tool in generating user interfaces that would reflect the actual final design. Figma allowed our team to experiment with different color pallets, layout designs, and typographic decisions. Additionally, the tooled allowed us to produce the actual assets that would be used in the final designs. Figma also allowed us to prototype basic functions such as pressing a button and switching pages

A major drawback of Figma is that it doesn’t allow the user to have a full testing experience because of its limitations in zooming in and out and typing in inputs. Figma also limited us to the design at a specific location and a specific amenity.

React Native on Expo and Google Maps API

These development frameworks provided us with flexibility to actually develop the app with interactive features and real data. Google Maps API made it incredibly easy to customize an actual map with real locations.

An issue with working with these tools is that it was pretty slow in comparison to developing these applications on Swift. Additionally, the complexity of the frameworks was extremely overwhelming to learn initially.

Wizard of Oz The Wizard of Oz features are described below:

• Logging in and Signing Out: users will magically access the map interface without actually inputting private information in the text fields

• Getting Directions to a Location: users will be given directions that was already precomputed

• The Map: the map itself is a precomputed rendering of a set location, not the actual location of a person

• Users Traveling to the Location: users will be simulated to travel to a location

• Users Submitting a Review: users will submit a review in the guise that it was actually sent but nothing really happens

Hard Coded Features The Hard Coded features are described below:

• The Map and all of the Amenities: all of the amenities were hard coded onto the map

• The Amenity Information: all of the amenity information were artificially generated and hard coded onto the amenity information page

Missing and Future Features The missing and future features are described below:

• When building this we would want actual amenities with real information all across the world, not just San Francisco

• We would want a live database that dynamically changes based on submitted reviews / locations

• We would want build out the settings (hamburger button) so that it would provide information on previous amenities visited, reviews written, and a rating given

• We would want to build out a favorite feature part for each amenity

SUMMARY

Hearing the shocking and deeply emotional stories of Uber and Lyft drivers peeing in plastic bottles and sleeping in their car for days on end motivated our team to build Coral. Our productive need-finding process led us to develop an ecosystem of small businesses and drivers. By providing drivers with accessible amenities and partnering with small business, Coral aims to stimulate local economies while also providing a livable work environment for gig-economy drivers. Our team is excited to have our hi-fi prototype that realistically provides users with a complete UI experience. After iterating our design numerous times, we were able to finally produce an intuitive and simple interface for our hi-fi prototype.