Rebranding the Buddy App into Bambu

Visual design project for a Gardeners Community App

Project brief

During the General Assembly UX Design Immersive, I had a project focused on visual design. I was giving Buddy, a conceptual app for a community of gardeners that would allow them to read and post information about plants. In the 1 week, applying a user-centred design process, I had to come up with:

• A rebrand for Buddy.
• 4 high-fidelity wireframes.

What I had to do

• Competitive and User Research.
• Mind Map.
• Brand Personality, Values and Affinities.
• Mood Boards and Visual Identity.
• Wireframes and Usability Testing.

The software I used

• Sketch, for UX and UI design.
• Miro and Zoom, to exchange feedback and present work.

Starting the design process

For this project, I applied the Double Diamond structure, which is a framework that segments the design process into four stages: discovery, define, develop and deliver. It helped me to organize my work into logical steps.

Discovering and Sinthetising

How do the competitors look?

To kick things off, research had to be done. I focused on similar apps on the market. For that, I compared 6 of them and ran a feature Competitive Analysis, to find trends, common features and the missing ones. Finding that:

• All of them use a lot of white space.
• All of them include green in their colour palette.
• All of them are easy to navigate through.

This already gave me a broad idea for the visual design of the app.

How can I make the app appealing to users?

Afterwards, I decided to ask the targeted audience questions related to the functionality and visuals of similar apps they were using, as well as how they feel towards their values.

From the insights gathered, I establish the brand values of this new app:

• Inclusivity.
• Nature.
• Exploration.
• Community.
• Expertise.

As they liked apps that fostered communities and provided them with plenty of useful information.

Brainstorming ideas to unlock more features

Having enough insights from the market and users, I started to synthesise them into a Mind Map and Mood Board.

A Mind Map, a technique where you create a hierarchical diagram of information, to see how it’s organized and related

What you see here is a mind map, I wanted to know how some of the words that kept coming up in my research, were related, and the level of its importance. Green circled words, the words I put in, raspberry ones, words I found had many correlations.

I understood that in my design, I had to implement concepts such as a forum, posts, colours, taxonomy, resources, etc.

Getting inspiration

A Mood Board is a type of visual presentation consisting of images, text, and samples of objects in a composition.

Here, my main mood board is a visual representation of the aesthetic that I was going for. Those big words over there (top left corner) represent the ideas that I wanted to convey with the aesthetic.

This mood board gave me ideas for the name of the brand, changing Buddy to Bambu. I also used this to create Bambu’s personality:

• Resourceful but not boring.
• Informative but not encyclopedic.
• Edgy but not trendy.
• Refined, but not formal.

Ideation and Delivery

Just before I started to frame my ideas into digital sketches of how the app would look like, I wanted to see some of the brand's interfaces to get inspiration from:

A Mood Board of the interfaces of Starbucks, Monzo Bank, Diesel, Spotify and Pinterest.

With the research done, and these interfaces as inspiration, I felt confident in leaving white space but also structuring the information as in cards, nicely arrange so people wouldn't feel overwhelmed, with the vibrant images.

Low-fidelity wireframes

Having a better idea of how to structure the different elements of the app and the aesthetic I was going for, I decided to create some wireframes, to start designing the app. Here are the screens of:

Wireframes are a visual representation of variant fidelity of how the app would look like.

• Onboarding Page.
• Main categories of plants, Navigation Page.
• A specific plant, Content Heavy Page.
• Profile Page.

Bambu’s Visual Identity

From my main mood board and this one, I started to build my colour palette and chose typography.

Colour Palette exercises for Bambu.

I began experimenting with colours, picking them from the images, then I narrowed them to one colour palette (the one on the left). After that, I started to work on typography.

I went for Amiri, specifically a serif font because I wanted to reflect the natural aspects of plants, for example, a tree, and how they put down their roots. It felt more organic and dynamic.

Checking what’s working and what isn’t

Adding colours, text and images to my previews wireframes made them into high-fidelity. I then conducted 4 Usability Testings, which is a technique where you test a product with the user, to see what's working and what isn't.

From the issues found, the key ones were:

• Left-handed people found the navigation page frustrating, as most of the bottoms are on the right side. So I central aligned the buttons with the text inside.

Iterations in the Navigation Page.

• The colour palette wasn’t working; the colours were clashing with the multiple images. So I reduced the colour palette into:

Updated Colour Palette.

High-fidelity wireframes

I then iterated the feedback received into the final high-fidelity wireframes. Lots of cool, vibrant images, while also keeping the design chill and clean.

Here’s how Bambú would look like.

Enough white space to let people take a moment to internalize the content before moving onto the next step. Easy to scan with a clear hierarchy thanks to the typography.

Final feedback

Using the online platform of Miro, our team was able to post our final projects and give feedback to one another, it glows (things we did amazing) and grows (things we can improve). Here is what I got:

This is some of the feedback my awsome team left me.

Conclusion

I’m really happy with this project outcome, as it was the first project at General Assembly that I had to implement visual design, and me not being the most confident person, I do feel I accomplished the deliverables nicely, by:

• Creating Bambu, a cool and authentic, user-friendly app.
• Tested high-fidelity wireframes that reflect its personality.

What’s next?

If I ever decide to continue to work on this project, and as you can see above with the feedback, there are many things I’d like to change to enhance not only the visual design but the user experience. Some of those changes are:

• Find a way to add more colours, without making them clash with the multiple images.
• Creating an actual logo and repeating the name of the app throughout most of the pages.
• Continue to test it out with users and do more research on similar apps on the field.

The takeaways

Working with such incredible instructors I learned not only the basics of visual design, but to find creative ways to communicate my ideas, influence the user’s mood and to understand accessibility within visual design.

Overall, an amazing opportunity to learn and implement a new set of skills!