Refresh & Reuse

Branding, Research, Prototyping, UI and Visual Design

Visual Design

Project Scope: 1.5 weeks

Project Type: Contract

Role: Branding, Sketching, Ideation, Wire-framing, Prototyping, Web Design, Mobile Design, Competitive Analysis & Research

Tools: Paper, Pencil, Figma, Adobe XD, Adobe Photoshop

Outcome: Expanded the brand color scheme, introduced new icons and mock up for a splash page.

Overview

The founders of Refresh & Reuse are interested in launching their first website.

Goal

Create a single paged site that has an about section, contact section and a call to action for their newsletter.

Scope & Constraints

The main constraint here are: timeframe, using the existing branding guide while trying to find a balance between the clients inspiration sites.

Storytime 👀 —

The founders of Refresh & Reuse are a group of old college room-mates who bonded over their love of "The Bachelor" and wine. They Face-time regularly to watch together, and try out a new bottle of wine.

Together they wanted to find a way to "reuse" the bottle, and how to keep their plants🪴 alive and thriving for weeks!

Visual Design

My approach,

  • Define the goal/problem ✅

  • Competitive Analysis & Research

  • Sketches

  • Prototype

  • Design

  • Submit for feedback (2x’s) 

  • ReDesign

  • Final design 

Competitive Analysis & Research👩‍🔬

The client shared their favorite inspiration websites and they really wanted to see a similar layout in their on site as well.

The Sill

Their motto, "We help you cultivate a life well-lived through indoor plants and elements of biophilic design."

Bloomscape

"Backed by 5 generations of Grow-How™. Get bigger, better, leafier plants delivered from our greenhouse to your home."

Pistils Nursery

"We believe that plants are transformative. They enrich our daily experience, bringing life to spaces inside and out."

After having having a clear idea of what inspires the team at "Refresh and Reuse," I opened up my sketch book. ✍️

Sketches

I usually started the design process with low fidelity wireframes. This way, when I jump into Figma I can quickly piece them together.

The main purpose behind sketching my thoughts was to brainstorm what the mobile design would look like, and then the desktop version. This impacted my decision around which sketches I decided to workout in Figma because users use different devices for different reasons. I wanted to make the design minimalistic, but somewhat fun with the icons! Overall I worked out about 6 sketches.

Prototype

Mobile First Approach

I followed this approach to work from the smallest screen, and work my way up to larger screens. 

Desktop

The desktop view has more icons are larger place holders because there is more white space too design around.

Incorporating the Branding Guide📗

Mid-High Fidelity Designs

Following the Branding Guidelines above, implementing the color scheme, typography, logo and iconography provided. I also included a smaller color palette to show the client a visual representation of the color constraints.

Visual Design

Desktop

This is the first draft submitted to the client that also included a pitch to —

  • Expand the brand colors

  • Design another logo

  • Design a few more icons

Pitch Approval

I started to sketch out new logo ideas with both the full name, "Refresh & Reuse," and just the initials. I thought about the colors and what might be darker vs. lighter.

Visual Design

How things changed ...

Starting with the original logo "Refresh & Reuse." Then what I created for the first draft submission which also including the original icon.

Then I followed a bit more of a minimalistic train of thought "Refresh & Reuse" for both mobile and desktop.

Deliverables

High Fidelity

The search bar has been left blank as the client is working on securing the domain name.

UI Design

For this design I followed an iOS style. I designed for mobile, desktop and a splash page for an app.

I also really focused on incorporating recognizable UI elements in my navigational components, like the hamburger menu. As well as in the input fields for the contact section and including the sliding bar to the right to indicate that the user can scroll on this screen.

I think the final design stays true to the clients inspiration and vision with the brand guide. Showing that a "high-end," and a "luxury" style can be accomplished with illustrations.

Visual Design

Takeaways 💭

Don't be afraid to share a new idea with a client, they might just love it!

This pitch did make this project a bit more challenging for me because a brand is so special for each company. It's what helps people identify and connect the product and I really wanted to stay true to this.

I learned even more about color theory and psychology behind it. I also had a lot of fun putting together color palettes to show the added depth to not only the icons but the brand overall.

Towards the end of the project the client also asked for a splash page mockup to see if they might launch an app in the future!

32
Iterations
13
Screens
8
cups of matcha