SOW

2020
  • Brand Refresh
  • Website Design
  • Custom Illustrations
Bumped Inc. Logo

The Scope

Bumped Inc., a Portland fintech company that enables brands to reward their loyal customers with fractional stocks. Their website encouraged customers to download an app to start earning ownership. 

Bumped came to Weird Wonderful looking for a website refresh and an updated brand to match their partner objectives so their sales team could paint a clearer picture of what Bumped is and how it works. The problem however, Bumped.com looked and read like a B2C company but they aren’t. Not really. Their growth strategy focus is attracting brand partners who are looking for an innovative rewards program, not necessarily attracting individual users.

The Results

TBD: Post COVID 19 data is being collected and analyzed.

Deliverables

  • Wireframes & Finished Website
  • New Color Palette
  • Custom Illustrations

Information & Wireframes

Following an initial meeting with their internal stakeholders, I took notes and wrote down the objectives for each person, what they wanted at the end of the redesign. Those that stood out were:
  • Clear Navigation For Their Three Main Audiences
  • Don’t Want Existing Users To Feel Abandoned
  • Keep The Colors Neutral And Use Photography To Set The Tone
  • Flexible Grids
I started by taking their updated content and building a comprehensive wireframe that showed how I would break down the information on screen and broadly leave the design open to further collaboration and extrapolation.

Tone & Mood Boards

Following the approval of the wireframes I moved on to gathering more information from the team regarding the broad emotional tones they wanted to see reflected in the website.
  • Human/Humble
  • Educational
  • Approachable
  • Friendly
  • Humor To Disarm And Engage
  • Takes The Job Seriously But We’re Not That Seriously
  • Relationships Are King
  • Ownership Is What Bumped SellingFriendly
  • Accessibility
  • Neutrality
The next thing I delivered were several mood boards, each capturing a different and distinct direction the website’s visual presence could take. 

Color Refresh & Blocking

The team had expressed exploring options to expand their color palette. Previously they were using a dark greyscale and a single brand blue which is reflected in their product interface. Much like my approach to the visual tone, I explored several color combinations that could be added to the brand’s web presence and arranged them as a presentation for the team to react to.

Initially, the team and the stakeholders liked the idea of integrating a second brand color outside of their greyscale. With this addition the team wanted the website to be as fun as some of their other tech competitors. 

My next iteration to their website involved integrating the new color palette into the wireframes and using color to further distinguish where the information needed to be separated.

Illustrations

Based on the reactions to my moodboards, the team was loving the illustration examples labeled as “fun” so my next iteration that I presented included several low fidelity sketches of the visual metaphors I was planning on creating and after I received feedback I got busy developing their visual style.

Stakeholder Feedback & Reintroducing Photography

Upon seeing the progress of the website design, Bumped’s CEO realized that the only other color gradient he was comfortable was a blue one and asked that we use a different color palette from my previous exploration.

Details

By this point in the process all the major concerns and feedback have been addressed, and I like to make space for the team and their stakeholders to nitpick the website. Font size, bkg elements, header collaboration, I just want to make sure that if anything feels out of place or off, that it gets addressed and talked through before the design goes to the dev team. 

The only ask from the team was to refine the photography. The color overlays were a great solution when we needed legible text over an image but it was removing too much of the humanity for the brand. 

My solution was to make header images that were large solid blocks of color and use overlaying strips of color to transition into a full color image. The team was very excited for this solution and the website as a whole felt ready to build.

Dev Collaboration

My favorite part of working with the dev team at Bumped, besides great communication, was the openness and flexibility.

I started the project having designed digital experiences in Photoshop, Illustrator, Sketch, but I had yet to experiment with Adobe XD which at the time of this case study, surpassed Sketch as a preferred product design tool. I asked if I could work in XD so it would give me the opportunity to learn the program through a practical application. They saw no reason to object and also found mutual benefits to see how the program worked. 

I was able to learn and update my workflow to make my illustrations easier for development. Since there was no animation, I learned how to optimize my SVGs. 

Together with the team were made detailed feedback loops and collectively QA’d the website across a variety of browsers and devices. This seemed like the busiest time in my workflow now that I was a person nitpicking and starting dialogue over every pixel. 

Launch!

The couple of days leading up to the launch were relatively quiet for me, though I remained in a state of “on-call” for quick SVG adjustments and additional graphics.

Odds ’n Ends

Working with the team at Bumped was an amazing experience. 12/10 would work with them again. We enjoyed lots of dog-related Zoom banter and collaborated effortlessly.

Testimonial

Simon was a great extension to the team when our business needed an entire website redesign with a tight deadline. Her willingness to work collaboratively with development in order to produce an accessible and responsive website made her a delight to work with.

We appreciated her active communication, ability to adapt to quick strategic changes, and integration of feedback.

Simon’s creative illustrations effectively communicated even the most complex ideas, which proved foundational in establishing our refreshed brand presence and website.

- Bumped Team