Ambi

Find Your Perfect Workspace | January ~ March 2020 (10 weeks)

My Role

I was the lead designer and UI/UX designer of Ambi as part of Stanford’s User Interface Design Project (CS194H) course, where my team and I developed an Android mobile app for 10 weeks.

I iteratively designed 3 high-fidelity prototypes of the app, updating features and designs based on the qualitative and quantitative data gathered from usability testings. My team and I used Figma, Android Studio, Google Places API, and Firebase’s Cloud Firestore to design and develop our app.

Overview

Cafes are popular workspaces for many people. Those who work outside often have an ideal workspace in mind. However, finding the ideal workspace is difficult; even the go-to places may not fit people’s needs at times. Yelp and Google Maps provide a variety of choices, but they don’t provide information helpful for choosing workspaces such as the number of outlets and noise level.

Ambi finds people the optimal workspaces tailored towards their preferences; Ambi considers the amenities and ambiences users would like to see at a workspace and provides them with a list of locations and information about the offered amenities and current ambience.

Discovering Issues With The Existing Design

We conducted our first usability testing with a high-fidelity prototype designed before I joined the team. Users could perform 3 tasks with this prototype; setting preferences, finding a location, and suggesting a change in the current environment.

We wanted to see how people would navigate within the app and wanted to find rooms for improvement. We gathered clickstream data to measure the success rate of the task completions, conduct in-depth interviews, and recorded people’s thought processes while using the app.

We went to cafes at University Avenue, Palo Alto to conduct the usability testings.

Usability Testing Result

We conducted usability testings on 3 people in the age range of 20 to 30:

After studying the results, we realized that our app fails to clearly deliver our value proposition to the users. Users often requested clarification on what they were supposed to do and expressed confusion on several user interface elements.

One of the biggest problems we had to fix was the display of locations. User 1 and the CS194H class commented that the current list view of locations reminded them of Yelp and Google Maps. This had to be addressed because even the information shown for each location was the same as that of Google Maps.

We learned that we not only have to improve the aesthetics and usability of the app but also make it clear what our value proposition is and reflect that in our design.

Redesigned High-Fidelity Prototype

In response to the usability testing results, we took a step back and clearly defined our value proposition.

Value Proposition

We find users the perfect workspace based on the amenities and ambience they would like to see at a workspace. We also allow users to request a change in the environment of their workspace.

Rebranding

We then realized that the current name of our app, Jukebox, did not reflect our value proposition very well. Since our app essentially helps people find workspaces with the perfect ambiences, we decided to call our app Ambi, short for ambience. We also changed the logo from a jukebox to a pair of binoculars, as users can “see” from afar what the workspace is like.

Onboarding

We grouped similar preferences and separated the groups into different screens. We also added clear instructions on each screen, designing a much clearer and more straightforward onboarding experience. 

This design change was proved to be effective after our second usability testing, the error rate resulting in 0%. Therefore, we did not make further design changes for the onboarding screens.

Landing Page (List View of Workspaces)

We changed our main screen from a Yelp-like list view to a unique interface where locations are separated by cards as shown below. The information shown on the cards are personalized for the users from the onboarding stage. 

To solve the problem of users not knowing locations are clickable, we removed the directions button and added a shadow effect to the cards. As Ambi’s mission is to allow users to visualize a workspace, we designed our interface so that the information of the amenities and ambiences stand out most.

Details & Directions

We changed our main screen from a Yelp-like list view to a unique interface where locations are separated by cards as shown below. The information shown on the cards are personalized for the users from the onboarding stage. 

Report Current Environment & Suggest Change

The average time taken to complete the task below in the first usability testing was 40 seconds, a rather long time for a task with only 3 screens. Users were unsure if they were able to make additional suggestions after the initial one, and the check-in task was not very accessible.

As users had difficulty locating the request screen, we created a bottom navigation bar where Request can be accessed in the bottom right, along with Discover and Favorites.

Testing The Redesigned Prototype

With our high fidelity prototype #3, we went out to University Avenue, Palo Alto again to conduct usability testings. This time, we wanted to see if we were able to successfully address all the problems that we found out during usability testing #1. We also wanted to see what problems people may experience with this prototype. So, we tested our prototype on 5 people at different cafes, using a very similar structure to the first testing. Also, we used Amplitude for click logging this time.

After studying the results, we were happy to see that all the issues raised during usability testing #1 were successfully addressed. All of the users were able to go through the onboarding process without any confusion, clearly understand the list of workspaces and visualize the workspaces, and easily locate the request feature and submit a suggestion for a change in the environment.

Final Prototype

After going through more than 6 design iterations for 20 weeks, we settled on our final UI design. We used Figma to design the visuals and interactions, then used Android Studio, Google Places API, and Firebase’s Cloud Firestore to create the functional prototype.

As there were no initial users who could upload the amenities and ambience data, I went to every single cafe and workspace in University Avenue, Palo Alto to record the number of amenities; we made the app so that it would be usable for people working in the Palo Alto area.

Concept Video

We also made a concept video based on our final prototype. Check it out below!

Reflection

Over the 10-week-long journey of conducting usability testings and designing several high fidelity prototypes, my team and I overcame many design challenges and made a functional mobile application. I also learned some lessons along the way.

I learned the importance of conducting usability testings to improve design; analyzing the clickstream data after the usability testings helped me discover exactly where users were experiencing difficulties and which user flows were taking more time than it should. Listening to the users speak their thought processes out loud while using the app helped me understand user behavior that couldn’t be explained only with the quantitative data. Examining the critical incidents during the testing also helped me better understand the users’ needs.

I also learned the importance of hierarchy in design. Redesigning the prototype several times and testing them on real people helped me understand how the arbitrary hierarchy of information and inconsistent use of color can affect the user experience. By being very intentional with the hierarchy of information and color usage, I was able to make a user interface that helps users easily visualize a workspace.

Overall, working on Ambi helped me become a better designer and an effective team player. Although we didn’t end up publicly launching the app, I enjoyed every single part of working on this app. I feel better prepared now to tackle challenging design problems and work with developers to make a functioning mobile app.