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:
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:
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.
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.
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:
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.
