Phil's Fish Market for iOS

My role: UI Design + Interactive Prototypes + Build and ship iOS app

My work contracting with clients

My role in this project was to create an experience for customers visiting Phil’s Fish Market, a popular restaurant in my area. My responsibilities in this project were to design the app, create interactive prototypes to test various design ideas and build the app. The goal of the client was to integrate the menu, make it easy for people to arrive at the restaurant and include promotional material.

Menu

Designing the menu brought a set of challenges. There’s a lot of items and a decent amount of categories. One of the original ideas was to introduce a card UI, similar to that of the home tab. This has a few problems: the home view presents the signature dishes in a card view and this conveys a sense of importance, conveying that across the entire app would cause signature dishes to lose their value. There’s two other big problems: it’s very hard to categorize items in a card view and browsing proves difficult, as reinforced by earlier prototypes. Another problem is the physical location of the restaurant. The restaurant is near the sea and high frequency LTE bands fail to penetrate the building well. Connectivity is good enough to stream a single photo but the experience gets rough with multiple photos. On occasion, LTE drops to HSPA+ or even EDGE, this physical technicality dictated aspects of the app and how they were designed. Understanding users’ connection is very important because products designed for countries like India or Pakistan, where LTE is scarce and EDGE is the main connection have to be designed and engineered differently to accommodate to the technical limitations.

Detail View

In the detail view, we wanted to be very clear about its objective: be transparent to customers about what they’re buying and the cost of items. In our case, it was important to incorporate a table view to display this information for a few different reasons: One reason, it’s very simple for users to understand and it’s well organized. The other reason for using a table view in this case was a technical reason. With the introduction of different screen sizes on iOS, it’s important to incorporate auto-layout and size classes

Location View

One of the goals was to make it easy for people to discover the restaurant. The location view incorporates a map view to give people a general idea of where it is, as well as additional information and directions using Apple Maps. The reason behind using a table view in this UI traces back to the implementation and the organization. In today’s iOS atmosphere, adopting auto-layout and size classes is very important. When new devices are released with larger displays, the UI adapts to the new larger screen size.

Promotional Material

When designing the view where people access promotional video, I wanted to convey a feeling of featured or importance, similar to the way the home tab highlights the signature dishes. The logic behind including the size of the video was because it’s important to respect people’s time and data and more importantly understand the exchange in value. Users don’t gain much value form watching promotional material and it’s a cost to users in terms of data. When people watch a YouTube video, it’s usually not promotional material, they’re seeking to see a video about a subject they’re interested in and they understand the cost.