Redesigning Yume Gardens — A Case Study
✒️ Overview
Throughout our UI/UX Bootcamp, we had often worked either alone or in pairs on various design projects. This one was a new experience as we were placed in a group of 4 which made things a lot simpler in a way because we could bounce far more ideas off of one another, and strike out in various directions after consulting with one another and regrouping for our findings.
For this project, we re-designed Yume Gardens based in Tucson, AZ. What is Yume Gardens you may ask? It is a non profit organization local to Tucson Arizona. Dedicated to bringing the beauty of Japanese culture to the desert, one may enjoy the beautiful gardens at Yume, or celebrate a myriad of Japanese exclusive holidays such as children’s day. One of the most important things that the gardens offer, however, is an emotional healing program for those suffering from mental illnesses such as anxiety and depression.
I personally had a lot invested in this NPO as someone who has not only lived and worked in Japan, but often volunteered at the garden during their festivals (I was pretty good at origami and enjoyed teaching kids how to make balloons out of paper).
My Role: Researcher, Mobile Designer
Team Members: Julia Kyung (me!), Caro Lagarda, Peggy Pease, Michelle Koglmeier
Tools Used: Figma, Adobe Suite, InVision, Clip Studio PAINT, Google Slides/Docs/Sheets, Miro
📋 Research
At first we conducted an evaluation on the site to see what we needed to fix about it, as well as some things that could be more or less left alone. Here we were able to identify two main problems that we really needed to address:
- While the site had all of the content that was needed for the user to find, it wasn’t clear where exactly said content was, and some extremely important portions of the site were left in hidden nooks and crannies. In a few words, the navigation was not great.
- A bit related to the above, the site focused a lot on one part of the NPO, but left another important aspect of it almost completely neglected. Due to the navigation being difficult, this entire chunk of the NPO felt shoved into the corner, so to speak.
From there we were able to start interviewing people and sending out a survey to get an idea of how we wanted to tackle these problems and get on the road to success. From our interviews and surveys we were able to identify some key points for us to address in our redesign:
This data showed me that users value a convenient and easy site experience above a lot of smaller more complex details. Yume Gardens is beautiful, but the images they showed on the original site didn’t exactly showcase all of the beauty it had to offer. In addition, the color scheme drowned out the menu, which was clunky and at times took up a large part of the screen on desktop versions. As it is, Yume Gardens was in a point where it wasn’t the worst designed site in the world, of course not, but it left a lot to be desired, and having been at the gardens myself, I wanted the site to reflect how incredible of an experience it is.
From here, we took the main points of data, put it into a blender, and created our persona:
Our user persona was Guy Mann, a fantastically named person who will serve as our “ideal user” for the site. We gave him hopes, dreams, pains and frustrations. Also, fantastic hair. Here we could ask ourselves “how would Guy navigate to the Emotional Healing Program?” and “Would Guy be frustrated with how we laid out x, y and z?” — it gave us a way to kind of put ourselves into the user’s shoes. Here we created a storyboard to further explore how Guy Mann might find and interact with the site.
Here we can see Guy Mann being frustrated at his current situation, finding Yume Gardens and their emotional healing program, and then finishing off with an extremely rewarding ending consisting of relaxing and healing. Now having a stronger idea of how to tackle our initial problems, we needed to get right into the action — redesigning the app to meet our solution.
🎨 Design
Following our research, we began our dive into the site’s architecture — since our main problem was the navigation of the site, we wanted to really make sure we were able to target and fix it to the best of our abilities. We first created a sitemap (kind of like a laid out navigation so we can better see what is going where) for the current navigation, and then used Miro to rearrange the navigation to what we wanted it to be instead. From there we created a new sitemap of the navigation we wanted. Here we figured out one of the things we wanted to test — we wanted to see if we needed to split Yume Garden’s “visit us” page into both an “about us” page and “visit us” page, as the content within seemed a bit… confusing.
Next was laying down the foundations of our redesign consisting of a style guide that allowed us to follow the same aesthetic and graphic design patterns while we work individually, and black-and-white versions of our redesign. We wanted to get down the basic shapes and text so that we could rearrange things and figure out the structure before we went all in with colors and whatnot.
For me, I was in charge of making the navigation and stitching things together for the mobile prototype. Honestly, it’s kind of tedious work making everything connect to each other in Figma, but I like it. Then again, I was the kid in school that filed the papers in the office instead of going to the end of the year party, so.
From there, we did another round of testing to see if our designs were working out and what iterations we needed to make. Remember that visit us page? Yeah, we definitely split that into two pages. In addition, we added a floating “register” button on the Path To Emotional Healing page because on mobile that page was incredibly text-heavy and not a lot of people are gonna want to scroll all the way down to the bottom in order to register.
Finally, we were able to put everything together into a final prototype, colors and all! We added colors, applied styles from the style guide, and fine tuned the navigation. We worked immensely hard on it, and I‘m really proud of how far this redesign has come.
Please feel free to play around with this prototype on Figma here: https://www.figma.com/proto/P6Psegh6NX6v354IK6KgCX/Yume-Gardens?node-id=64%3A6&scaling=scale-down&page-id=0%3A1
✔️ Conclusion
In conclusion, working in a group was incredibly fun, with being able to split up the work and the high amount of collaboration it offered. I really enjoy working on mobile prototypes, and I was able to learn a lot about Figma, creating style guides, and testing in different environments. There were some complications, like us not being able to get into contact with the NPO for questions, and in one particularly frustrating moment, an interview gone wrong due to Safari deciding to betray us all, but all in all? It was a valuable project and really rewarding. Thanks for reading! ✨
