My Summer as a UX/UI Design Intern at CariClub

Emily Chan
Sep 24, 2018 · 10 min read

This summer, I had the amazing opportunity to spend the summer in New York City interning as a UX/UI Designer at CariClub. I was lucky enough to work with the product team which consisted of 4 developers and a product management/design intern, Carmen Lau, who helped me tremendously in creating deliverables for the platform.

What is CariClub?

In short:

CariClub is a free, digital platform for nonprofits to connect with talented young professionals interested in getting involved, especially at a leadership level. We partner with top tier companies to help their employees connect with causes they are uniquely passionate about.

Essentially, CariClub is a professional network that helps young employees at big companies like Morgan Stanley, Citigroup, and Deloitte (among many others) connect with nonprofit organizations to become associate board members.

Associate board members are a step up from just regular volunteers at a NPO (although users of CariClub can also use the platform to find general volunteering opportunities) in that they often need to apply for the position, have a a great fit with the nonprofit, and have higher responsibilities like planning/executing events and reaching specific fundraising goals.

Most young people want to feel more fulfilled by dedicating their free time to causes that they are passionate about but are often intimidated by the process of applying to boards. CariClub solves this issue by allowing users to easily discover what their passionate about, apply to board positions, and connect with the people who share the same philanthropic passions as them.



What did I do?

Carmen (my co-designer), Pablo Escobear, and me on my first day in the office!

Over the course of two months, I wore many hats at the startup which can be divided into three areas.

  • UX/UI Design: I worked extensively on improving the existing online platform by conducting a full-scale UX audit, ideating improvements, and then mocking up these redesigns for implementation by the developers. I also collaborated with my co-designer Carmen, to create a brand new site to aid nonprofit organizations, www.associateboards.com.
  • User Research: In addition to organizing and analyzing feedback for the existing CariClub platform, I led an end-to-end user research study for www.associateboards.com.
  • Graphic Design: In addition to working on the digital product, I worked on redesigning and creating new marketing materials in Adobe Illustrator.

Improving the User Experience of CariClub

The first project I was assigned was completing a UX audit of the entire platform. All interns were asked to go through the platform and note any pain points they experienced on the website. In addition to my own comments, Carmen and I created a master document of all of the jottings.

What the user sees when they first log in to CariClub.

From these comments, we compiled a series of activity notes (consolidated statements that each communicated a single idea). Next, we used a table to affinity diagram comments and pain points. The comments that came up the most were noted and evaluated. From each comment, we knew what users were having trouble with or saying. Our job was to identify why they were saying these things. From there, we had to turn these problem statements into actionable design solutions.

An affinity-style diagram that helped us organize comments, problems, solutions, and priority.

After analyzing problems and brainstorming multiple solutions, we went to the drawing board and begin implementing our solution(s). Some issues were actual bugs in the program while others were full-scale shortcomings in the original design that required entire redesigns. We specified our design solutions on a Trello board and held weekly meetings to assign tasks to the developers.

A Trello board helped us manage our workflow.

Ultimately, we identified 78 unique problems from our user research and with it, 78 unique design solutions.

Selected examples of redesigned screens:


Problem: Interests section on company profiles did not accurately show employee engagement.

Solution: Make “gauges” more transparent in meaning and include more descriptive copy.

Before (left) and After (right).

Problem: Users are not completing their profiles because the notifications are not apparent enough nor do they inform users on what actions they have to do. (The 80% wheel on the left isn’t clickable in the Before photo below!)

Solution: Allow users to see and check off all of the steps they need to complete their profile.

Before (left) and After (right).

Problem: After CariClub users get onto a nonprofit board, how can they continue to find value in the platform? Public events hosted by nonprofits appear on the platform only on the right-hand side of the screen if they favorite that organization. How might we help users discover events more easily.

Solution: Redesign a new standalone Events Page that effectively engages users and encourages them to give back to the community on a regular basis.

Original event card (left) vs redesigned event card (right).
Screens I designed for the new standalone Events page.

Learning About Our Nonprofit Users

Another big project that I worked on was the creation of www.associateboards.com. This site is intended to be a web tool that allows nonprofits to easily generate charters for their associate boards for free. Carmen worked on the first version of the site based on the CariClub associate board handbook. The handbook was created using the input of more than 16 young philanthropists and data from over 500 nonprofit organizations. Using this as well as heuristic design decisions, Carmen and I collaborated to create the MVP for the site.

After development, I was tasked with testing the product with real users and designing the second version of the site. I reached out to professionals in the nonprofit sector across New York City and user-tested the site with them. I had the opportunity to meet with the COO of Philanthropy Management at Morgan Stanley, the Associate Board Director of Yamba Malawi, and the Director of Community Engagement of BUILD NYC, among many others.

Again, i went through the process of conducting a user research study by creating my own targeted interview protocol, recruiting participants, carrying out these interviews, taking field notes, converting them into activity notes, grouping them in an affinity table, and then going through each one and evaluating the core UX problem and ideating an ideal solution.

The biggest takeaways I got from this round of user testing were as follows:

Problem: Almost all of the users I tested with asked me what the purpose of the site was, even if they had looked at the site for over a minute.

Solution: A well-designed website communicates its goal to the user immediately. I redesigned the content hierarchy of the landing page with a focus on making the parts of the page above the fold engaging by adding a Call-to-Action button, larger graphics, and a concise tagline.

Before (left) and After (right).

Problem: From viewing their physical interactions with the site, I discovered that almost all users missed the “Back” button on the page. This was a poor UX decision because if the user hits “Back” on their browser, they leave the web portal and lose all of their progress.

Solution: I designed a ghost button right next to the “Next” button which decreased accidental exits dramatically. I also recommended the developers implement an in-browser warning that tells users their progress will be lost if they leave the page.

Before (left) and After (right).

Problem: Many users felt like there was a lack of transparency on certain screens that asked for specific information. For example, a page asks for information such as the emails of primary and secondary contacts. The PDF charter that is generated at the end of the form is then sent to these addresses. However, this is not communicated to the user (one user I talked with was shocked and even seemed a little anxious at the thought of accidentally sending a rough draft of their charter to the head of their organization!)

Solution: I split up key parts of the form into new pages so that there were no surprises in the user experience. For the email example above, I included an additional page where the user could confirm and edit the address they would like their charter to be sent to.

Initial contact information form page (left) and the added screen for transparency (right).

Designing the Physical and Print Version of the Brand

Throughout the summer, I also periodically worked on various side projects redesigning and creating new print materials for use in stakeholder meetings and marketing promotions. I used Adobe Illustrator to create these mockups based on content from CEO Rhoden and input from business team members, Chris and O’Neill.

Selected examples:

Content requirements (left) and final one-pager designed by me (right).
Old fllyers (left) and new redesigned flyers (right).
Old fllyers (left) and new redesigned flyers (right).

What I Learned

As one of my first professional experiences in the UX Design industry, I learned more than I ever could have imagined from this experience. These two months were definitely an inspiring, fun, and admittedly stressful, but ultimately rewarding. My biggest takeaways were:

  • I learned how to work with a team of developers, business analysts, and project managers. Working with a team is rewarding but it presents challenges in and of itself. One of the biggest and surprising things I learned was how to communicate about my designs more effectively. I learned that spec-ing out design mockups to developers and verbally presenting my screens to a room full of critics was definitely an acquired skill; a skill that I certainly feel more confident about after this summer.
  • I learned how to break down user behavior to the smallest details and use those pieces of evidence to inform my design decisions. UX design decisions should never be arbitrary. Even if it is a heuristic like putting a navbar at the top of the screen, I learned that you must always be prepared to justify your design decisions with evidence found from user research. During my biweekly presentations with the CEO and product team, I quickly learned that “because it looks good” was never an acceptable answer to “Why did you design xxx that way?”. I can now confidently explain my design decisions by pointing to user research findings every time.
  • I learned that design is truly an iterative process. Design is never done. During this internship, I learned to love this idea everyday. Being “married” to a design is never a great move, and I learned this by never settling for the most convenient solutions and constantly thinking outside of the box with every critique session and user test.

Thank you CariClub for a wonderful summer.

I’m happy to announce that I’ll be remotely continuing my internship this Fall! Check my site again later for more updates about what I’m working on!

More From Medium

Top on Medium

Ed Yong
Mar 25 · 22 min read

27K

Top on Medium

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade