Buddy

Concept UI-focused mobile app
Team
Solo
Timeframe
1 week design sprint
Tools
Miro, Zoom, Slack, Figma, Marvel
MY Role
Brief Definition, UX and UI Design

Who are Buddy? 🌻

This was a fun brief that was entirely self-devised within the General Assembly UX Immersive course. The seed was planted to create an app to buy plants!

We only had a week and so were encouraged to focus primarily on the User Interface and how we could employ interactions to delight the user.

What's the Social Good angle?

• I position the plants as social companions for users to accompany them in their new WFH spaces.

• Using Gamification elements I offer a way to quantify the health & wellbeing benefits to users of their new Buddies.

My Opportunity

• To develop a new concept in houseplant sales targeted to 18-35 year olds in urban areas and set against the change in many working environments in response to the Covid-19 pandemic. 

• I want to empower users to make the place they spend more time in feel more lived-in too.

The Buddy Brand

I wanted something really simple and stripped-down, to keep cognitive load to a minimum, and to let the character make the offering compelling.

Seeds of Research

Two sources of inspiration:

Competitors?

Takeaways

  • A very cohesive almost one-note look, suitable for disruption.
  • Punchy copy, and short. No taglines for branding.
  • Primary navigation plays close attention to convention, using colour-block stripes.

The User Grapevine

User 1
  • This one behind me, I got it from X but it was so expensive.
  • And then I thought I was at the end and I had to buy a pot - in different sizes to each other - It was so confusing.
User 2
  • It would be nice to have a tool to help with designing the garden, like with measurements and advice

Takeaways

  • Users might appreciate simplicity in choice.
  • Thinking about integration to the space itself is important: How might the product fit in?

Forming Fronds & Lo-fi Frames

I developed a short flow around a Benefits and Feature-oriented onboarding process:

I personify the plants as a social companion

"Could you use a new buddy in the home?"

I emphasise their health benefits & potential to help the user's work environment

"Studies show one plant can improve air quality 25%"

I showcase the Augmented Reality (AR) feature projecting plants using the phone's camera app

"Use our Buddify AR feature to see your space filled with Buddies"

Mudboard

Going back to the brand I wanted something casual and funky and so looked to street art and cartoons for inspiration.

I looked to my Moodboard for brand colours and sure enough, look what popped out just like in my competitors - aqua/turquoise and oranges for the supporting tones with a nice contrast to the deep green for the main brand colour (circled).

Sprouting Style Guide

Brand

For the Buddy brand I drew parts of vector images together to echo the playful and simple descriptors of the Brand Tone and to express the social companion angle.

Typeface

For the Typeface I echoed the street art of the Moodboard and chose Sirin Stencil for headings (as if that could be sprayed across pots with the brand) and Roboto for the subheadings & body for ease of use.

Graphics

I used pill elements to showcase text and contrast to buttons/body text, with transparency if needed. The radial style to quantify data was inspired by the Research stage and then used in the AR feature.

Components

I made a simple reusable header containing the brand/home button in centre, with hamburger menu on the left and Ecommerce basket/login at the right.

Hi-fi Runthrough 🌱

Landing the Look

Bonus Landing Page on Webflow

As an addition to the week's sprint we were encouraged to think about how we could market our ideas, and what a splash page for the product would look like on a desktop browser view.

This introduced me to the no-code site builder Webflow and showed me the building blocks of designing for the web to complement designing for Figma.

Takeaways

  • I became aware of the relationships between HTML, CSS & Javascript and how these reveal the process of compositing assets in a no-code site builder.
  • CMS management skills such as labelling systems are invaluable to aid in the workflow.
  • Minimising image file sizes has a direct influence on SEO and site page loading times. I got the viewport-wide image seen here down from 10mb to 1mb with no great loss in image quality!

Final Thoughts

Future Features:

Focusing on the UI here was a great opportunity to explore the technical side of a project. I was glad I added in a couple of stages of UX work to get a quick idea of what users wanted and to give it a grounding in a stronger concept.

View Case Study
This will take you to Medium 🙂

Other Projects

Say hi 👋

Please enter your details below and I'll get back to you.

Thanks! Your submission has been received.
Oops! Something went wrong while submitting the form.