Buddy

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

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 to the target users to    accompany them in their new WFH lives.

• Using Gamification elements I offer a way to quantify the health & wellbeing benefits to the User 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.

Brand Sense

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

Research

Two sources of inspiration led me forward from the outset.

Competitive Analysis

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.

User Interviews

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?

Onboarding & Lo-fi Wireframes

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"

Moodboard

Going back to the Brand Tone, 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).

Style Guide

Brand

For the Buddy brand I drew parts of vector images together from The Noun Project 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-Fidelity Prototype

Landing Page

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.

I was also fortunate to have had a go assembling the elements in different format (from Miro to Figma and now to Webflow) to learn what works and what doesn't in different workflows.

View Case Study
This will take you to Medium :)

Other Projects

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.