Mira Financial Quotes Page
A search-and-compare tool that helps people find life insurance policies.
Motivating young professionals to do good in their free time.
August to September 2018 (4 weeks)
Emily Chan, Carmen Lau (PM Intern), Rhoden Monrose (CEO)
Product Thinking, User Experience Design, Visual Design
Sketch, inVision, Illustrator
CariClub is a unique "professional network for social good". A good way to describe it is as a LinkedIn-style site except users are on the platform to find philanthropic opportunities, not jobs. Corporate clients like Deloitte, Goldman Sachs, Morgan Stanley, and Citi pay for yearly membership fees for each of their employees who register for the site. All nonprofit organizations get access to the site for free.The original purpose of the website was to be a "matchmaker" that places qualified young people on the associate boards of nonprofit organizations. In the relatively niche world of nonprofits, there is an emerging issue where the governing boards and leadership of nonprofit organizations are being dominated by only older individuals. CariClub was born to tackle this problem of millennials not taking action.
CariClub has been very successful in matching users with nonprofit organizations for associate board opportunities. This is great for the users and nonprofit organizations, but not for the company and their business. Becoming a board member of a nonprofit is a huge commitment, so once a user does in fact receive a position, they can't realistically join another board. This means that once matched, users no longer have an incentive to use CariClub. From a product perspective, this is a problem because:
To consolidate these concerns, I created a single people problem statement:
To begin brainstorming solutions to this high-level issue, my co-intern, CEO, and I worked together to answer this question:
To tackle this issue, we explored the platform to find potential opportunity areas. We found one in the "Events" space of the website. Currently, nonprofit users can publish "events" on their profile pages. Users who "follow" them can see these events in a feed on their dashboard.
Additionally, nonprofits can also post volunteer opportunities in a separate feed.
To tackle the original problem of boosting conversion and maintaining membership, my solution was to design a centralized feature that allows users to discover, save, and RVSP events and opportunities hosted by nonprofits (including social events like fundraisers, fun runs, social events, volunteer opportunities, etc.)
In addition to achieving the main goal of encouraging users to stay on the platform, this solution also benefits nonprofits and users because in the end, barring business objectives, this feature promotes regular acts of philanthropy.
Due to financial constraints, I could not conduct user research however I used my knowledge of current CariClub users and extensive market research to guide my design process. The CariClub Events feature is essentially a hybrid of sites like Facebook, Meetup, EventBrite, and VolunteerMatch because it features both social events and opportunities for service.
I analyzed these sites and learned the following key takeaways:
Before sketching out designs in pen and paper or opening Sketch, I created a horizontal user flow to map out the user's journey onto this page. I thought about the entry points to this page as well as the intermediate interactions I needed to think about while designing this feature.
Beneath each significant step in the user flow, I created a list of content requirements to make sure I would include all of the relevant information I needed in my final design. This list evolved constantly and I changed the priority of details (in blue) throughout my design process as necessary.
This diagram helped me break down the design process into three parts:
Since the cards and "All Events" view were interdependent on each other, I had to first think abou the "All Events" view before thinking about how to design the card. Using unfinalized mockups from the original designer and my co-intern, I evaluated whether a grid or list layout would be better for this context.
I decided to go with a grid style because I wanted to encourage discovery. A grid-style layout allows more cards to appear above the fold and does not give an implicit hierarchy to the events (I didn't really want one to seem more important or relevant than the other). A list would work well for cases where order and hierarchy matters. I explored some "listing" style feeds as well but I felt the cards fit in best with the existing design patterns on the site and it matched those found on similar event sites.
Next, I focused in on designing the event cards. During this process, I constantly asked myself the following questions regarding the content requirements and various interaction and visual design considerations:
After sketching out rough ideas on paper, I turned my most feasible sketches into wireframes in sketch.
Ultimately, I found that explorations C and D were the most successful wireframes. Each one had their benefits and tradeoffs so I decided to mock up both in high fidelity and show them to my team for critique.
For C (on left): Users liked that the text was easy to read and understand. However, the date and location (the most important details besides the event name) were hard to interpret at first glance. Additionally, users wondered what would happen if the address was way longer than just "110 East 42nd St".
For D (on right): Users liked that the location and date were clearly readable. However, some described that there might be some issues with people with impaired vision having trouble reading the event name.
We ultimately decided on Solution D (on the right) and accounted for the tradeoffs by increasing the drop shadow on the text and the gradient transparency over the bottom of the cover photo to make the event name as readable as possible. In the final solution, further tweaks like the removal of the host organization name and the Share button were also made.
The final event card:
The "Browse All Events" page is the first page a user sees when they click into the Events feature. To think about the design considerations here, I thought about where a user of this feature would be in their journey. I consolidated these two scenarios into two main use cases with persona examples.
To satisfy both of these kinds of users, I knew I needed a way to balance both needs. Again, I sketched out some rough ideas and arrived at the following wireframes:
Since both mockups had tradeoffs in terms of visual design and usability, I created high fidelity mockups of both explorations and user tested them with the team at CariClub.
During a critique session, users liked Exploration C (left) better because it visually "seemed like a better fit" for the CariClub platform with its colorful icons/art and afforded more sorting features like a "Sort by Location" feature with a map. In Expxloration B, some users missed the filter section entirely and went straight to focusing on the event cards at the top of the page.
The final "Browse All Events" view:
For this view, I had to consider: What should happen when a user clicks on a card on the "All Events" page? Would a new pop-up appear? Would the user be redirected to another page?
I decided to use a modal for two reasons:
With this in mind, I came up with the following low-fi explorations:
Both options seemed viable so I user tested each exploration, making higher fidelity changes as needed:
Users favored Exploration B with one outstanding suggestion: place the sidebar on the left side. To follow the natural F-shaped reading pattern, the most important info, the event name, should be read first so I flipped the layout.
The final single event view:
Putting all of these elements together, here was the final outcome of this project.
This design is currently not implemented yet due to limited development bandwidth but the mockup is used extensively for stakeholder presentations. Investors have expressed very positive feedback to it as it serves as visual proof that CariClub can grow and offer easy-to-understand value propositions.
When this design is implemented, key measures of its success would be:
This was one of the most challenging, but rewarding projects I had worked on up to this point. Since this was my first professional internship, this was the first time I had to work with real stakeholders and users. Since CariClub is a small startup, I enjoyed all the autonomy I had especially in taking the lead on this project. From this project, I learned how to maneuver around constraints and tradeoffs and find a balance between satisfying the company's needs and the user's needs. In addition, working on such a complex project with multiple stages taught me a lot about how to order and present my ideas clearly. Overall, this was an amazing experience at an amazing company.
If I were to go back and do anything different, I would have spent more time refining my visual design. I feel like I may have spent too much time on creating two high-fidelity mockups for user testing when I really could have shown low-fi explorations. If I had done the latter, perhaps I could have invested more time in creating a single polished product.
Overall, I was happy with the outcome and think this project was a great way for me to practice my holistic product thinking and design skills as well as get exposure to an area I am passionate about (and also a great chance to meet an awesome team of motivated and inspiring young people!)
A search-and-compare tool that helps people find life insurance policies.
Original webapp that encourages charitable giving. Awarded Best Social Good Hack at BigRedHacks Fall 2018.
A web platform that connects students and professors for undergrad research opportunities.