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.
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).
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:
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, Guy Mann. 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. We then created a storyboard to further explore how Guy Mann might find and interact with the site, so we could find main pain points and move on to the redesign process!
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.
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! ✨
