somali bantu association hero image

My Role

  • UX Designer

Process

  • Domain Research
  • Use Cases
  • Personas
  • Information Architecture
  • Wireframing
  • Usability Testing
  • Design Strategy

Client

Timeline

  • 3 months
  • Feb - April 2015

About the Somali Bantu Association's Website Redesign

I partnered with the passionate people of the Somali Bantu Association of America to redesign their website into a more engaging experience for visitors. The Somali Bantu Association is a non-profit organization that works with Somali Bantu and other African refugees to help them with their transition into western culture. After conducting research into what they do, I redesigned their website and provided mid-fidelity wireframes to their team.

Design Details

After outlining the goals for the redesign with stakeholders in the organization, I redesigned the new website to address each of the specified goals.

  1. Make the website more engaging by using more images and stories of the Somali Bantu, and the people who work at the SBAOA.
    • Design implications: I added a hero image to every main page of the website. I also integrated pictures and videos into the content and used visuals where appropriate to help tell stories. For example, on the donate page, we use a pie chart to communicate how donation money is used. I also designed a more dynamic “About Us” page to highlight the hard-working people in the organization who make it all run smoothly.
  2. Make donating easy and highly accessible.
    • Design implications: I gave the donate link in the navigation bar more focus. Encouraged more of the workflow to be within the SBAOA website before transferring the user to PayPal.
  3. Encourage users to sign up for the newsletter and remain engaged with the organization after they leave the site.
    • Design implications: I created a new page called “Get Involved” to give people who couldn’t donate money an opportunity to contribute to the organization. I kept the form to sign up for the newsletter in the footer, but also added it to a lot of other places in the site as appropriate.
  4. Help users understand the SBAOA's role in the community--Have users be able to answer what services does this organization provide?
    • Design implications: I interviewed stakeholders at the SBAOA to learn more about their services. Then, I reorganized how the website talks about these services and provided copy that explains each in more detail.
  5. Build empathy by explaining why Somali Bantu refugees need aid when coming to America.
    • Design implications: I created an “About the Somali Bantu” page that provides a brief history about the Bantu’s history, visualizes where they are from, and provides success stories of refugees the SBAOA has helped.
  6. Make the site skimmable.
    • Design implications: I edited all of the content on the website to be more concise. I used headers and subheaders as an opportunity to describe the content below, rather than label sections.
  7. Design a simple, clear and concise navigation system that enables users to find content easily.
    • Design implications: I used a bottom up approach to organize the new and existing content on the website by affinity. The affinities became the new nav bar.
  8. Revamp the website's aesthetic.
    • Design implications: More visuals. Less text. A clear, flexible grid.

Process

Define Goals for the Redesign

The first thing I did was learn about the organization and outline goals for the redesign with the Somali Bantu Association. (See above.)

Literature Review and Guerilla Interviews

I did a bit of research to learn about the non-profit space, and what people want to do on non profit websites. I did this by 1. Reading up online and 2. Quick guerilla interviews with people who I knew.

2 Key Use Cases

I created 2 use cases based on what I found during my research to help me organize the information on the site based on users' needs. For each use case, I defined the tasks a user would need to complete to be successful.

Someone who knows the SBAOA visits the website to donate.
  1. Go to the SBAOA website.
  2. Read up on current and recent events that the SBAOA has organized to understand what her donation has helped accomplish.
  3. Donate money to the SBAOA.
Someone who has heard of the SBAOA visits the website to find out more.
  1. Google organization and visit the SBAOA website.
  2. Learn about the organization’s mission, programs and people involved.
  3. Sign up for the newsletter to stay informed about events to potentially get involved in.

Information Design

The first thing I wanted to design was the website’s content. I went through every word of the website and edited it to be more concise, and better organized. I used a bottom up approach to create a navigation plan for existing and new content.

info architecture from postits

Low-fidelity Concept Sketches

Then I moved onto creating sketches and concepts for the website.

website sketch 1
website sketch 2

Mockups, Testing, and UI Specs

I digitized the sketches and tested those wireframes with 2 potential users, made a few changes to the naming in the navigation, and then created mid-fidelity wireframes for the SBAOA.

prev / next

back to projects