UX/UI Case Study: ALOE Rebranding
--
Desktop Prototype
Another Level of Excellence (ALOE), an Atlanta-based STEM nonprofit, decided to pivot from hosting STEM events to providing STEM volunteers for other nonprofits’ events. I joined as a volunteer to lead their rebranding initiative, which includes a new logo, design documents, and website. This is the story of how the website and logo came about.
Project Details
Goal: To create a website that increases online volunteer signups
Target Users: College students and young professionals in STEM
Timeline:
- Logo & Web Design: Jan. — Mar. 2017
- Development: Mar.— Apr. 2017
Remote* Team:
- Candice (founder & client)
- Myself (UX/UI designer)
- Sasimon (lead developer who joined in March)
Since UX/UI design is my focus and there are other branding and design things to work on, I roped in a developer friend to lead the development of the site. This doesn’t mean I’m not coding, though.
Tools: Sketch, Invision, WordPress (for its ease of set up and use for non-technical client), Git
*Since I am in Austin and this work can be done remotely, we became a disbursed team.
Context
Before embarking on this adventure, I wanted to learn more about the business and why they were pivoting. So, I met with the ALOE founder Candice White to discuss their history, future, and needs.
ALOE is a young nonprofit company that was hosting events to expose underprivileged kids to STEM opportunities. However, after a few years of running their own events, Candice saw the need for an online space for volunteers to connect, gain training, and find opportunities. Logically, Candice decided to pivot ALOE to fill that gap and become the STEM volunteer community of Atlanta.
But, Candice didn’t have a STEM background and needed outside help to pivot. Thus, she reached out to me. Why am I a great fit? I have:
- a STEM+Design background (precisely a BS from Georgia Tech in Computational Media, an interdisciplinary field of computer science and design, and a minor in Leadership Studies)
- STEM volunteering experience with kids and volunteers as a Google Code Corps member. (I played a critical part in the success of many past and current computer science programs at the Boys & Girls Clubs of King County in Seattle, WA. We were the only one out of 7 states self-sustaining after a year!)
- helped Points of Light, the volunteering giant and leader, scale their civic accelerator with a detailed landscape analysis
- people in my network who are our target users, because, aside from not currently residing in Atlanta, I am a member of our target demographic
Getting a lay of the land
One of my key principles is to not reinvent the wheel unless I have to. Therefore, I need to understand what I’m working with and where to start from. What better way to accomplish that then look at their current presence on the web through the eyes of a new visitor? Here’s a screenshot of the original site.
Looking at their old site, the first thing that stuck out to me was the logo. Logos are often the key & first ambassador of a brand, but that logo of an aloe plant does not convey STEM, education, or anything related to the mission. For this reason, I knew my work would start with the design of a new logo that will tell visitors, at first glance, that ALOE is a place for STEM.
The new logo
I talk about my logo design process here if you’re interested.
Further dissection of the old website
The site had too many things going on.
- Too many colors: Most sites have a main color and 1–2 accent or secondary brand colors. This site used all the colors from the logo.
- Too distinct font for too many things: The main font, ITC American Typewriter, is not that readable, but is used for many things (i.e. title, header, link, and body text). It might fit a writer’s blog, but doesn’t exude the spirit of a STEM nonprofit.
Discovering the meaning of the work
All of this resulted in a poor visual and information hierarchy with more than one thing fighting for attention and leaving users confused about what to do.
As a remedy, I concluded that the new site should have a clear goal (to get volunteers to sign up) and be very simple and easy to use.
Field Research
From conversations with Candice, I learned that ALOE’s target demographic is college students and young professionals with careers in STEM.
I am one of the target users as a recent STEM college grad who does a lot of volunteering (as a designer (Intentional Insights and GiveCamp), tutor (Coder Dojo), and strategist (ALOE)). However, I know that my perspective is not the only one. Thus, I did some field research to develop a diverse understanding of our users.
Speak to actual users, even if you identify as a user.
To understand our users as a diverse collective, I attended a local Meetup’s hack night where technical and non-technical volunteers gathered to work on nonprofit projects. The Design Sprint book and other research indicated that you don’t learn more from talking to more than 5 users, so I moved on to synthesizing my findings after speaking with 5 people, including organizers doing similar research.
Insights
My main insights were that volunteers look for opportunities that are easy for them to give back and easy to get to.
Easy to give back:
- people prioritized whether a project needed their skills more than whether they can identify with a nonprofit’s mission
- they feel valued and listened to
- they like to be able to lead or own a part of the project
Easy to get to:
- convenient location near home/work/school
- parking is free or available
Results
As a result, I created location and skill filters. The other filters come from Candice’s insights with nonprofit opportunities.
The location and skills are listed first due to their importance in the user story and information hierarchy. We later changed the actual locations to better reflect the opportunities.
After getting a better understanding of who I was building for and what they want/need, I started fleshing out sketches.
Solicit feedback early and often
I don’t believe in building in isolation and hate to be ineffective. Therefore, to make sure the team was okay with my vision, I walked the team through my sketch and solicited feedback.
What to do when the feedback isn’t useful
The feedback was generally positive, which was good, but it is not very helpful.
Option 1: Understand how your team communicate
Candice has a hard time discussing elements unless she see it visually. So when she sent a draft of the website she created in Wix, I went over it with her. We talked about what we liked and didn’t like about it. I pointed out the many similarities to my design, things I could incorporate from her design, and reasons why some things didn’t make sense for us.
Option 2: Do-it-yourself
As the only designer, I would think that things could be better, but everyone else would just say it was fine. Therefore, I ended up sending my mockups without much expectations in terms of critical design feedback. However, I would self-critique by stepping away from the design for days and returning to it later with a fresher perspective and critical eye.
Creating mockups
I didn’t know of any well-known online STEM volunteer communities, so I drew inspiration from event sites, job boards, and volunteer websites (e.g. Meetup.com, Remoteok.io, VolunteerMatch, Google’s calendar and job pages).
Progression screenshots
The left was one of the first designs. I wanted to focus on content and layout first; therefore, it is more monotoned. The second is a cleaner version with more final touches. Some helpful feedback about the colors and personal insights led to the last screenshot. The partners section is removed until we secure big name partners.
A shrinking calendar
Candice originally wanted a big calendar of events on the front page. However, practically none of the websites I looked at used one. I wanted to find out why. So, I opened up Google calendar and realized it wasn’t easy to browse, and ineligible on mobile devices (so it switches to agenda mode with events stacked). However, a list would provide that information easily.
Status
Our current timeline is to be live by end of the summer, but the founder gave me permission to share this story, so you get an exclusive sneak peek!
I made another design since we decided to use TimeCounts to track volunteers and events. You can compare the difference from the first design to the final one below.
Other pages
About Page
Donate Page
