A UX Case Study | One-Week Sprint: Website Landing Page and Logo Redesign — Wrapped in Wings, a Non-Profit Organization.
Given the opportunity to select and help an organization listed on Catchafire.com develop visual branding, I chose the non-profit organization Wrapped in Wings based in Hawaii for this one-week design sprint.
This organization sought a logo redesign and visual branding overhaul on its website. Before I dove into designing, I began with research of the current website.
Their Mission:
“Wrapped in Wings improves the quality of lives for families caring for children fighting a serious illness.”
Their Vision:
“All families who have a child with a serious illness will always have basic needs met, quality time as a family, and a support team there when most needed.”
While the cause is very noble, the website lacked call-to-action, content, social media access, images, color, and style to really convey what Wrapped in Wings strives to achieve for families in need. There was hardly any information or evidence of families helped by this organization on their main website. I found more up-to-date posts on their Facebook page where GoFundMe links were shared.
With the general research I gathered, I decided the first task I would tackle was the logo redesign. The original logo has a whimsical and child-like feel to it. My major concern was the use of a bug in place of the “w” in Wings. No one desires to be wrapped in bug wings. Also, the bee shape looks more like an “x” instead of a “w.” When I reflected on the name, Wrapped in Wings, my initial thought was a child wrapped in the safety of angel wings. After a few sketches, I created my redesign of their logo.
Below is the original logo and the redesigned logo:
With the logo complete, my next task was to determine how to capture the viewer’s attention and convey what this website’s call-to-action is with a single glance. With some mind mapping, I was able to sketch out my site map and wireframe for the landing page.
I narrowed down these asks in order: donate, apply for help, 24/7 support, community, and our story. The major focus of this website was the donate button so that is where I wanted to grab the viewer’s eyes.
Below is my first early draft in Figma:
After receiving feedback, my viewers enjoyed the hands but claimed the top hand fading into the background was distracting. It also drew the eyes upward away from the donate button. Another concern was the circle in the top right corner. Viewers wondered why a profile would be necessary. The body paragraph font color was questioned to have low contrast and poor legibility. Also, the lack of images in the cards made it difficult for my viewers to imagine their purpose.
With that feedback in mind, I added the next sections of my wireframe. My goal with the next section was to hit home that this is all about family and the community. I quickly learned the importance of selecting images carefully and why constant feedback is necessary.
Viewer’s Feedback:
“I’m not sure how I feel about those hands. It looks like blood.”
Needless to say, the image of the red-painted hands was scrapped. I wanted to convey that this organization is based in Hawaii. Going forward, I was intentional with images of families on islands and beaches. I used phrases like “Ohana means Family” so that almost anyone can relate to it. I implemented a section for featured fundraising for families in need. Below that, an educational piece about “Our Programs” with a ‘Learn More’ call-to-action button. And finally, a section to signup for the newsletter was added along with a footer.
Below is my final draft:
As seen in my final draft, the hands reaching out have been edited to truly feel like it is a hand coming down from heaven. The bright rays are also aligned with the logo intentionally as if it is Wrapped in Wings’ hand reaching down from heaven. This is to establish what Wrapped in Wings strives to achieve: help those in need.
With the little content I was given to work with, I believe I accomplished the tasks of the logo and visual branding redesign for Wrapped in Wings. The next steps would be making a responsive mobile version of this layout and adding animations to how the cards would interact with the user. Overall, this was an excellent learning experience in UX design and Figma.
