Ruth Bancroft Garden
Role:
Project Co-Lead, UI/UX Designer, App Developer
Duration:
October 2022 - June 2024
Tools:
Figma, React Native, Firebase
Team:
Stacey Lei, Rayna Bhattacharyya, Angela He,
Chetan Goenka
.png)
Project Co-Lead, UI/UX Designer, App Developer
October 2022 - June 2024
Figma, React Native, Firebase
Stacey Lei, Rayna Bhattacharyya, Angela He,
Chetan Goenka
Project Co-Lead, UI/UX Designer, App Developer
October 2022 - June 2024
Figma, React Native, Firebase
Stacey Lei, Rayna Bhattacharyya, Angela He,
Chetan Goenka
.png)
Project Co-Lead, UI/UX Designer, App Developer
October 2022 - June 2024
Figma, React Native, Firebase
Stacey Lei, Rayna Bhattacharyya, Angela He,
Chetan Goenka
.png)
The Ruth Bancroft Garden frequently cycles between a vibrant array of in-season plants. However, the garden's free-form layout and lack of on-site signage could make it challenging for visitors to distinguish between similar-looking plants.
My team and I were given the task to create a virtual self-guided tour to assist patrons in navigating the garden.
Our current design features all of the necessary items for players complete the tasks for winning. However, with only 2 months to implement a fully functional game, we were unable to invest as much time into creating a comprehensive UI as we would've wanted to.
The most prominent UI featured in the game are the inventory, shack (where players research for the cure), and a heads-up display (HUD) with the current time/player health. When the game time hits 10:00pm, the gameplay shifts from healing villagers to survival against infected villagers.
Prior to showcase, we had three separate playtest sessions (~40 testers) for the MVP, alpha build, and beta build of the game.
During game play, players also voiced...
I'm not sure how much time would pass
if I rested and how much of my health I would regain
I can't tell how many villagers are sick
To better understand how a player would interact with the inventory and other UI aspects, I began my redesign process by creating a user flow diagram.
%20(6).png)
(Click to Enlarge)
When creating prototypes for the inventory, I explored different layouts to place the amount collected and plant images closer together to decrease lookup latency. Additionally, key decision-making elements (time and resources) were moved to the top of the Shack UI for clarity.
For the HUD, I iterated through different ways to display the ratio of healthy to infected villagers. Since there were different types of villagers, an additional challenge was conveying the amount of each type that were healthy.
Since the game is set primarily on a forested island, we decided to emulate a woodsy UI. With a great number of components to keep track of in the Shack (top row) and Inventory (bottom row), I played around with the visual hierarchy before testing their ease of use with my teammates and players.
.png)
.png)
To address concerns surrounding the purpose of each component in the shack, descriptions of each action item were made.
The result of these prototypes is a more consistent UI theming with the game's target atmosphere (cutesy, nature) during the daytime and existing art assets. To improve the player experience, our redesign emphasized readability and toggle-able displays.
.png)
(Click to Enlarge)
(Click to Enlarge)
.png)
(Click to Enlarge)
An integral feature of the game is visual shifts in the lighting as time passes. Consequently, final prototypes for various times of the day were created to ensure UI visibility in all aspects of gameplay.
.png)
.png)
(Click to Enlarge)
As the sole artist for the project, I led the visual direction for the game, designed the environment and character assets, and animated all of the character sprites. Below are highlights of the game art assets.
.gif)
This has been one of my favorite projects and has made me critically think about how different games have coordinated their user interface to immerse players into their universe. Switch has given me the opportunity to think more carefully about the accessibility challenges including UI scaling, colorblind-friendly palettes, and effectively convey object interactivity.
As game development is ongoing, I am excited for these UI changes to drop in our next build and to further improve on a seamless gameplay experience.
To gain a better understanding of how college students interacted with flight applications, we sent out a survey to our target audience and conducted 3 user interviews.
"Checking in is always essential for Southwest, but it’s sometimes difficult to find where to do it."
"Feature placement makes navigation more difficult than it needs to be."
With the information we gathered, we began by listing what features were used the most and focused on simplifying the existing design. I started exploring potential layouts and understanding the user flow between different components when booking a flight.
After ideating, I met up with the rest of the team to compile our ideas. Since our schedules frequently conflicted, we placed a greater emphasis on color-coding and commenting to assist with communication.
While prototyping, we made sure to consider the visual hierarchy by emphasizing the most frequently used tools and decluttering by removing least used features.
To avoid clutter, we categorized the main features of the profile screen and added a flight contacts feature for notification convenience of departures, delays, and other flight changes.
.png)
To alleviate navigation stress near flight time, we modified the home screen to place a greater emphasis on check-in 24 hours prior to departure. We also implemented a checklist feature to help users double-check information and remind passengers of TSA guidelines prior to check-in.
We reworded terminology for clarity, added more space to the design, consolidated information, and implemented a filtration system to help users find suitable flights faster.
.png)
.png)
Redesigning the app made me reconsider what features I interacted with the most and how my experience may differ from other passengers. As my first team-based redesign sprint, this project was a valuable learning experience in creating consistent designs among teammates and formulating effective questions for user interviews.
In order to streamline user navigation and development, I created a MVP user flow chart to highlight key interactions and determine which screens would be necessary for a comprehensive experience.
%20(4).png)
When designing screens, we made sure to keep the users and client's vision at the forefront of our decisions: simple, concise, and informative. My co-lead and I began by brainstorming potential layouts and used weekly client meetings to gain feedback on iterations.
.png)
.png)
.png)
When using paper brochures, garden visitors had cited that images were the most helpful for plant identification. As a result, when creating low-fi sketches, we wanted to make sure that the plant screens greatly emphasized plant images alongside their corresponding marker numbers for easy identification.
To match with the garden's existing brand, we used colors similar to those featured either in their logo or existing website. To emulate a more calming experience when interacting with the app, we decided to use cooler tones.
.png)
Gaining client approval to proceed, our team met on a weekly basis and began developing the app using React Native. For user testing in the garden, we would record video walkthroughs of the app and send them to the garden managers.
However, this posed biases when it came to ease of navigation. To gain a more comprehensive understanding of user navigation intuitively, we launched the app internally on TestFlight for internal beta testing.
Image placement was helpful for finding the plants
Descriptions of the next plant's location made it
easier to navigate
Too much information about the plants
Easy to miss that there's multiple pictures for each plant
Taking user feedback into account, we condensed our plant descriptions, added image captions, and implemented image index indicators. Additionally, we improved accessibility by shifting the app's text size to correspond with the user's phone settings.
We also consolidated and varied descriptions (italics, bolding) on our home page and navigation guide.
After these changes, we coordinated with garden managers for another round of user feedback. Responses were positive overall, yet users still found the image numbering easy to miss. Some users also didn't realize that they were able to jump between plant markers, instead of going sequentially.
Some aspects we considered included having a real time location tracker when users were in the garden and a muter tone of orange for the buttons. However, due to the garden's smaller size, location coordinates pose a great risk for inaccuracy and brighter buttons were more favorable when app testers walked around the garden.
For our final improvements before hand-off, we added more contrast for buttons and image numbering, added a back button to the plant listing, and implemented a map as a visual guide between markers.
After rounds of internal testing and opening it up to external testing, we launched the app onto the App Store (iOS) and handed it off to the non-profit organization. Currently, the app is being maintained by garden volunteers.
.jpeg)
When surveyed, almost 70% of users used images in plant markers to distinguish between plants, and 100% of users used the zoomable map between "some of the time" and "always" while navigating. Overall, the app has allowed visitors to identify seasonal plants with improved accuracy and navigate the garden with ease.
The geographical distance between our team's location (Berkeley) and the garden (Walnut Creek) made virtual user testing a challenge, but we overcame it with thorough documentation.