overview

I worked with a group of designers to design an interface for an emerging startup. We accomplished this in three stages: first by sketching ideas for the interface, then converging our ideas into an interactive, hi-fi prototype, and finally running user tests to evaluate our design and inform future development. We chose to design a mobile app for CocuSocial - a startup that connects users with local cooking classes.

 CocuSocial managed to build the largest marketplace for cooking classes in New York City in just a year of operation. With that as a starting point, the company hopes to spread across the country providing wine tasting, painting classes, dance classes and floral design instruction. Swallowing the entirety of the $27 billion market opportunity might not be feasible in the short term but the team is taking in what it can manage with $21,000 in monthly net revenue on 58 percent month over month growth.

-TechCrunch

Team Members: David Walden, Lauren Hung, Julia Lemle and Jennifer Spatz

 

part I: Sketching

Figure 1

Figure 1

Figure 2

Figure 2

Figure 3

Figure 3

Figure 4

Figure 4

 

Part ii: Mockups

Design Choices

Overall, our intention with this app was to provide the user with a variety of search tools so that they could easily find the classes that interest them. Our design forces the user to decide what types of filters are important to them, and then explore options based on those filters. For example, on the home/search page, the user could browse by class type (first section) or location on a map (second section). We also incorporated a social element to the app, such that the user could track favorite classes, collectively plan experiences, and create a shared history of activities. Graphically, we aimed for a simple and clean aesthetic, anticipating that most of the graphic excitement would come from imagery (which would also largely be out of Cocusocial’s control).

During a group critique session, a lot of feedback focused on confusion over the home button/feed on the bottom toolbar (Figures 5-6). Our classmates were not sure what a home icon would mean in the context of this app, and questioned whether a feed would be useful. In our final version (Figures 7-19), we replaced the home button with a Favorites page, where users could save classes that they were interested in. (We maintained the rest of the original design in the refined version.)

Original interactive version: https://www.figma.com/proto/Yo9LElfTnZEQLMYkuELyjr8W/cocu-mobile?scaling=contain&redirected=1&node-id=0%3A910

Refined interactive version: https://www.figma.com/proto/S8NDSyw9nVxYXyn0OR34sH8a/cocu-mobile-new?scaling=contain&redirected=1&node-id=0%3A1069

 

Original Prototype

Figures 5-6

Figures 5-6

 

Revised Prototype

Screen Shot 2017-12-07 at 5.34.37 PM.png
Screen Shot 2017-12-07 at 5.34.49 PM.png
Screen Shot 2017-12-07 at 5.35.05 PM.png
Screen Shot 2017-12-07 at 5.35.15 PM.png
Figures 7-19

Figures 7-19

 

Part iii: user testing

Hypothesis

We expect the user to explore the home page, explore filter options, explore class options, and then finally choose one to sign up for and click through the purchase process. We expect that the user will spend the most time on the home page and class type page, as those pages contain the most information and the most options. We also anticipate that the user might explore multiple specific classes before selecting one. We imagine that some confusion will come from the fact that this is not a fully functional prototype, and therefore not every link is clickable.

 

Testing Instructions

Introduction: Imagine that you are visiting the Cocusocial app in order to find a nearby cooking class. Keep in mind that this is an early-stage prototype; not everything that looks like a link is a link but there will be a way to proceed to a new page and to go back to a previous page at every stage.

  1. Without leaving the home/search page, describe what you think you can do on this page. What do you imagine will happen if you click on the icons or images?

  2. Now imagine that you would like to sign up for a cooking class (type, location, date, etc. do not matter). Please show how you would interact with the app in order to achieve this task. Don’t worry if a link is not clickable; there will be at least one way forward on each page.

  3. Now, explore any remaining pages of the app that you might not have seen (be sure to look at the options on the bottom menu bar). Talk through how you would imagine using each of these additional pages, and what you might expect to find on each. Is there anything missing that you would like to see? Is anything unnecessary?

  4. Please reflect on the overall visual tone and feel of the app.

  5. Was the overall experience consistent with your expectations?

 

Feedback Summary

Overall users responded positively to the style and structure of the application. True to our hypothesis, we noticed our participants lingering on the homepage and returning to it most frequently. The variety of search options available here seemed both easy to understand and pleasant to interact with. Two users suggested that, at a high level, their search journeys would be defined by either a desire to find a particular class, or a desire to explore a variety of class options. 

None of the users initially interpreted the application as a social service. The profile and messaging features located in the bottom-bound taskbar proved somewhat unexpected to users at first glance — not necessarily fitting in with the subject matter of the application as evidenced by the imagery on the home screen.

Users consistently responded positively to the visual language of the application. They all reported that the crisp, minimal tone made for intuitive navigation. The layout was repeatedly compared to that of Instagram.

 

Potential Changes

The social aspects of the application seem to warrant the most reconsideration. User feedback indicated that messaging sits too high within the hierarchy of app functionality and perhaps reads as an unnecessary reiteration of Instagram. We might address this by removing the messaging feature from the bottom-bound task bar and repositioning it within the user profile. Another possibility would be to remove the “friend collecting” aspect of the application, instead using a “search people” feature similar to that of Venmo.

 

Testing Experience

Overall, witnessing users interact with our design was very informative. It quickly became clear that much of experiencing an unfamiliar application is simply drawing connections between it and other known apps. We were surprised by the consistency of the responses we received. We recognized, however, that had there been an outlier, it might have been difficult to assess the importance of making design changes based on his or her reactions (given the small sample size). Finally, while all users were able to successfully interact with the app, we now recognize that having 3+ clickable links on each page would have likely improved their testing experience.