Bake Back Better

This fundraising org for progressive causes rewards donors with homemade cupcakes. All donations come through the website, which had gone majorly stale.

The goal

Redesign the mobile and desktop experiences to be intuitive, beautiful, and put users first. Reach new audiences by adding mobile functionality.

The big changes

1

The original site was entirely one page. I built it out into multiple pages making navigation easy.

2

Spacing and typography were a mess. The redesign makes consistency a priority.

3

The mission of the organization was originally buried. Now it's front and center.

home page before

after

campaigns page before

after

My process

First, user research to identify pain points

User research summary

Multiple users were observed interacting with the site to identify pain points.

User pain points

1

Page layout

Single page format confused users.

2

Mobile

The original site wasn't optimized for mobile.

3

Navigation

Users couldn't find what they were looking for.

Designing

Paper wireframes
Digital wireframes
Low-fidelity prototype
Usability study

Paper wireframes

Using Adobe Fresco, I first sketched a few possible options. I took a mobile-first approach and worked quickly to keep the ideas flowing.

Digital wireframes

Next, I considered which elements were most effective and incorporated them into my first digital wireframe.

...and the mission statement above the fold.

I wanted the donate button to be prominent...

Low-fidelity prototype

To test the design, I built out wireframes and a prototype for the donation flow.

Usability study findings

Next I used the lo-fi prototype to conduct a study among five participants. They were of varying ages and had different levels of tech savvy. The study gave great insight.

1

Crowded home page

60% of users felt it was cluttered and too complex.

2

Buttons not intuitive

80% of users said the placement didn't make sense.

3

Lack of navigation

80% of users wanted some kind of menu.

After testing

To address user feedback, I built the site out into multiple pages including a new campaigns page and connected them all with a hamburger menu.

Refining
the design

Mockups
High-fidelity prototype
Accessibility

Mockups

To turn the lo-fi frames into a hi-fi mockup, I pulled the color palate from the original site and selected a hero image. Supporting imagery was moved to a carousel and all copy was changed to Poppins, a more legible sans serif font.

Hi-fi prototype

With the home page finished, I refined the remaining pages and connected them.

See the prototype

Accessibility considerations

While designing, visual accessibility played a major role in my decision making.

1

Color choice

Used contrasting colors to assist users.

2

Consistent navigation

Crafted a predictable interface.

3

Easy to see buttons

Increased overall size and legibility.

Designing for desktop

Sitemap
Desktop mockups

Starting with the sitemap

To better understand the structure I had set up on mobile, I created a sitemap. This helped me visualize the mobile user flow and translate it over to desktop.

Desktop mockup

For the desktop the hero image was changed, a header and footer were added, and the hamburger menu was replaced with a topline navigation bar.

home

campaigns

Bringing the site to life

Landing the client
What I learned

Landing the client

After completing the project for my Google certificate program, I took it a step further by pitching it to the Bake Back Better founder — and landed a new client.

It was super fulfilling to bring this project to life.

"Ethan overhauled a functional, but unexciting web site into something that truly excites visitors. He implemented better navigation, improved the mobile experience and helped increase donations overall. The site is much cleaner and more professional looking. He was great to work with, understood client needs, developed a schedule and communicated throughout. He's also a lot of fun and very personable. I highly recommend him."
Dina Jacobson
Founder, Bake Back Better

What I learned

Even the best ideas have to be pitched and sold.
My vision for the site won't always be the same as the client's.
Communication is key, especially when explaining UX thinking to non-designers.
A client relationship built on empathy will build trust over time.
It pays to put yourself out there. And it's good to be paid.

Bake Back Better

This fundraising org for progressive causes rewards donors with homemade cupcakes. All donations come through the website, which had gone majorly stale.

The goal

Redesign the mobile and desktop experiences to be intuitive, beautiful, and put users first. Reach new audiences by adding mobile functionality.

The big changes

1

The original site was entirely one page. I built it out into multiple pages making navigation easy.

2

Spacing and typography were a mess. The redesign makes consistency a priority.

3

The mission of the organization was originally buried. Now it's front and center.

home page before

after

campaigns page before

after

My process

First, user research to identify pain points

User research summary

Multiple users were observed interacting with the site to identify pain points.

User pain points

1

Page layout

Single page format confused users.

2

Mobile

The original site wasn't optimized for mobile.

3

Navigation

Users couldn't find what they were looking for.

Designing

Paper wireframes

Digital wireframes

Low-fidelity prototype

Usability study

Paper wireframes

Using Adobe Fresco, I first sketched a few possible options. I took a mobile-first approach and worked quickly to keep the ideas flowing.

Digital wireframes

Next, I considered which elements were most effective and incorporated them into my first digital wireframe.

...and the mission statement above the fold.

I wanted the donate button to be prominent...

Low-fidelity prototype

To test the design, I built out wireframes and a prototype for the donation flow.

Usability study findings

Next I used the lo-fi prototype to conduct a study among five participants. They were of varying ages and had different levels of tech savvy. The study gave great insight.

1

Crowded home page

60% of users felt it was cluttered and too complex.

2

Buttons not intuitive

80% of users said the placement didn't make sense.

3

Lack of navigation

80% of users wanted some kind of menu.

After testing

To address user feedback, I built the site out into multiple pages including a new campaigns page and connected them all with a hamburger menu.

Refining the design

Mockups

High-fidelity prototype

Accessibility

Mockups

To turn the lo-fi frames into a hi-fi mockup, I pulled the color palate from the original site and selected a hero image. Supporting imagery was moved to a carousel and all copy was changed to Poppins, a more legible sans serif font.

Hi-fi prototype

With the home page finished, I refined the remaining pages and connected them.

See the prototype

Accessibility considerations

While designing, visual accessibility played a major role in my decision making.

1

Color choice

Used contrasting colors to assist users.

2

Consistent navigation

Crafted a predictable interface.

3

Easy to see buttons

Increased overall size and legibility.

Designing for desktop

Sitemap

Desktop mockups

Starting with the sitemap

To better understand the structure I had set up on mobile, I created a sitemap. This helped me visualize the mobile user flow and translate it over to desktop.

Refining
the design

Even the best ideas have to be pitched and sold.