Wanna Pixel

CiviCRM, Fundraising and Web Solutions for Nonprofits

  • News
  • Team
  • Client Work
  • Contact Us
  • About

powering nonprofits for social good

design, web design, wordpress, nonprofit, social good, pixel perfect, new website, re-design,

Website Redesign Process: Breaking Through the Noise to Find the Vision

Meg Delagrange - August 5, 2015

Every website makes an impression on its visitors. Studies show that first impressions are 94% design-related since visuals are processed 60,000 times faster in the brain than text. A website’s first impression either informs and invites a visitor into its purpose, or it drives them away.

We recently took on the exciting project of reintroducing Bangla Ministries Worldwide’s website. Take a look.

Before:

before website design, redesign, wordpress website

The first time I met Bangla Ministries Wordwide’s original website, my curiosity assaulted me with questions.

  • Did I type in the wrong address?
  • How did I arrive at an alternative medicine website?
  • Or is this a foreign weather information center?
  • Wait, is this a spa?
  • Does anyone use this website?
  • Am I supposed to be here?

I was confused. I was distracted by a rainbow of colors, the large logo that clashed with every other element on the page, and the flower that was floating through the sky like the baby sun on Teletubbies. My first impression did not tell me anything about the mission of Bangla Ministries Worldwide.

As you may have noticed, this website design was not mobile responsive, limiting its use significantly since statistics tell us that 60% of people are now accessing websites from tablets and smartphones vs. desktop computers.

Our Denver web development firm was immediately excited to have the chance to break through the chaos of what was going on in this website and give it a clear purpose.

After:

wordpress website, after redesign, denver, bangla ministries, mission, organization, nonprofit website design,

By journeying through ideation methods in this website redesign process, we carefully chose key elements that would express the mission of Bangla Ministries Worldwide in one beautiful impression.

  • A Clear Headline and Subtext. Through a clear headline and thought-provoking subtext, the curiosity of visitors is now directed to knowing more about the organization.
  • Quality Imagery. Choosing vibrant, powerful images of real human beings brought mission-centered passion to the design without making visitors feel any pressure from the organization.
  • Simple Color Scheme. The combination of the two chosen colors in this redesign are bold, without being distracting, while also communicating the beautiful, royal essence of the culture this organization is reaching.
  • Mobile First Design. Every part of the design stacks seamlessly on smaller screen sizes. The chosen text sizes work for both desktop and mobile devices.

The design of this website now communicates the passion and mission that is so important to this organization.

 

Building thoughtful websites with clear intentions shows that you care, makes choices more comfortable, and leads to a better overall experience. —Clark Wimberly

 

The Website Redesign Process

 

Marisa talks about implementation: First, Bravo to Meg for the amazing job she did on the UX design of this site. One of her most mobile-friendly and impactful designs, it’s gotten rave reviews from other clients and fans of Wanna Pixel. I know it deserves them.

Developers and designers have almost been trained to accept that finished websites can never match the design. As a designer-turned-coder, my goal is to completely defy this assumption. There is a reason it exists, though. This can partly be because of the science of web and its limitations, and partly (and often even more limiting) can be the client’s misunderstanding what is important to a user, or wanting to cram non-fitting content into the design (we still love you, clients!). I’m proud to say that this website is about 99% true to the original design, and therefore, effective in delivering that initial invitation to hang around and see what the website is about.

To give an example of something that was lost, Meg did a beautiful job of wrapping the text around the veil on the Bengali lady’s head in the original design. It’s a calming, reassuring design trick. Like many well-designed elements, you don’t know it’s there, but you feel it. Design is all about balancing elements to all work together in one cohesive whole.

Bangla-after-web-2

But there were two problems.

The correct way of saying “The State of Bengali” is “The State of the Bengali.” Fair enough.

Two additional words were added after the build to the paragraph below the main heading.

So in the final live design, these edits to the verbiage created orphans on the main paragraph in some devices and made the title too long.

orphan

To fix the orphans, I had to limit the maximum width of the text box. With the width of the text box limited, the heading to paragraph balance was thrown way off, and looked rather silly. To balance the width between the two, and since the beautiful wrap was already lost, I broke the heading into two lines. This kept it from overflowing into the veil and it more closely matched the length of the paragraph. The two pieces looked balanced together, but not as balanced in relationship to the image. This is a great example of how what a client views as a “minor” text edit can completely throw a design off balance. Many hours are spent by a designer balancing the written word in a beautiful, designed way. (Of course, one of those edits was completely necessary.)

Final result:

 

beautiful web design

What do you think about this website design? Let us know in the comments.

Have a website project that you need help with? Reach out to us using the project form here.

print

  • About the Author
  • Latest Posts

About Meg Delagrange

With over 22 moves between New York and Tokyo, Meg finally found her home with Wanna Pixel. Meg takes the ideas and mismatched puzzle pieces of information from clients and turns them into beautiful, interactive, accessible, and modern user experiences. Her role is to understand the brand and values that you need to communicate and put that into a visual language your clients will understand. After hours, you may find her painting in her studio or Instagramming inspirational scribbles. She currently lives in the always-beautiful Denver, Colorado.

  • Nonprofit Engagement: Creating a Unified Experience - July 18, 2016
  • Nonprofit Websites: 10 Engaging Donation Page Solutions - July 6, 2016
  • Will you be giving away 60% of your year-end fundraising potential? - September 11, 2015
View All Posts
Tweet
Share11
Pin
Share3
14 Shares
← Previous Next →

Copyright © 2021 · Wanna Pixel Inc. ·

PRIVACY POLICY

What are you looking for today?

our top 3 requests

A New Website

Help with CiviCRM

Ongoing Support