Refresh & Reuse
Branding, Research, Prototyping, UI and 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.
The founders of Refresh & Reuse are interested in launching their first website.
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.
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!
Define the goal/problem ✅
Competitive Analysis & Research
Submit for feedback (2x’s)
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.
Their motto, "We help you cultivate a life well-lived through indoor plants and elements of biophilic design."
"Backed by 5 generations of Grow-How™. Get bigger, better, leafier plants delivered from our greenhouse to your home."
"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. ✍️
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.
Mobile First Approach
I followed this approach to work from the smallest screen, and work my way up to larger screens.
The desktop view has more icons are larger place holders because there is more white space too design around.
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.
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
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.
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.
The search bar has been left blank as the client is working on securing the domain name.
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.
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!