Michigan Founders Fund.

During the Fall of 2021, I applied to the U-M School of Information Design Clinic, a program that matches technology-interested students to small businesses in need. I was matched to my request, the Michigan Founders Fund. After researching their brand, I was impressed with how many small business they were able to support through their organization which, because of my interest to join the Design Clinic, matched my own.

I originally joined the MFF team when they were formally the Ann Arbor Entrepreneurship Fund. During my involvement, the organization transitioned from an Ann Arbor-based to a state-wide organization, following through with a website re-design, logo change, and growth in outreach.

Because this partnership was conducted through the U-M Design Clinic, I also completed weekly project/product management seminars and completed all tasks under a mentor relationship.

  • Involvement.

    UX Design Intern

    August 2021 - December 2021

  • Projects.

    Heuristic Evaluation, User Interviewing & User Flow, High-Fidelity Prototyping (solo)

    Competitor Analysis, User Mapping, UX/UI Web Design, Logo Re-Design (group)

  • Tools.

    Miro

    Adobe Photoshop

    Figma

Problem statement

“Ann Arbor Entrepreneurs Fund” is transitioning to “Michigan Founds Fund”, where the organization will increase their membership from local to state-wide. Their company is lacking a fresh website, logo and brand identity that recognizes their expansion and caters to their growing network.

Central question

How might we design a website and logo that supports the company’s growth while remaining familiar and true to the longstanding members and the identity roots of the organization?

Website @ start

Understanding the culture

 

Through user interviews, I met with current users and MFF employees to understand their company culture in their own words and, from that, the desired product’s appearance and impact.

Brand Culture 

  • Forward-thinking, empowering

  • Exchange / Network

  • Knowledge, Value, Passion 

  • Social Responsibility

Feeling 

  • Sense of belonging, purpose, and responsibility to the community 

  • Informed, Educated, Committed

  • Empowered, Energized, Respected, Inspiring

Impact & Tangible Values Provided

  • Vehicle: Connect with other founders via social events

  • Personal: Mentorship, learning opportunities, support, personal growth, motivation 

  • Business: Funding opportunities, increased success, partnership for philanthropy,

Reviewing the mature product

Screen Shot 2021-10-13 at 3.02.36 PM.png

Homepage of the mature product

My first solo project was the heuristic evaluation of the current website.

I first started by interviewing the CEO of the Michigan Founders Fund to get a sense of their desired missions, values and goals to be portrayed on the website. Though this isn’t directly related to the UI, it was important to have a full understanding of the company before viewing their digital product.

I created a deliverable to the CEO using Jakob Nielsen's 10 general principles for interaction design, adding on an 11th heuristic of accessibility.

A ranked the heuristics on a scale of excellent, good, average and poor, with descriptions of how I determined these ratings. Below are a few examples.

  • Visibility of System Status: good

    Hover-features do not follow the same standards for indicating their purpose. Change all navigation pages to purple and underline when hovered.

  • Match Between System and Real World: excellent

    Email graphics and LinkedIn pages are indicated with the universal symbols and logos. No recommendations.

  • User Control and Freedom: good

    There is no clear or undo button when writing and sending a message in the contact page. While the document is submitting, the “submit” button could transition to a “cancel” button instead of remaining stagnant.

  • Consistency and Standards: average

    Fonts, colors, size, and capitalization vary based on titles on different pages. Clickable and non-clickable images also use the same hover overlay. Create a style guide and follow its standards for text and images.

  • Error Prevention: good

    For buttons that require a payment or non-reversable pledge, increase the size or change the color of the button and surroundings to make this larger action more obvious.

  • Recognition and Recall: excellent

    The email and LinkedIn symbols are consistent among each member’s profile. Required fields of contact forms are indicated with a red astrics. No recommendations.

  • Flexibility and Efficiency of Use: good

    Some header pages required a hover and scroll-down motion to access sub pages. Put links to these sub pages within the main page’s header for those that may not understand this motion.

Understanding the users

For another round of user interviews, we reached out to entrepreneurs, both of A2EF and unaffiliated, to hear about their backstory, needs, and what they look for when joining a community. The bulk of the interview, however, was monitoring how they navigated the website via a screen sharing demonstration and their related comments.

Example questions

  • Tell us about the entrepreneur journey from idea to where you are now. How did you get there?

  • What sort of resources did you utilize to lift off?

  • Did you seek mentors? What characteristics did you look for?

  • (For current MFF members) What have you gotten out of the fund so far?

  • (For current MFF members) What was the largest reason that made you join? What factor gained your trust?

  • What works with regards to the website? What does not work with regards to the website?

    (Followed by a walk-through demonstration)

Key takeaways

  • Clear mission statement.

    There was too much information and unhelpful designs to distinguish the core values and of the fund.

    A clear mission should be promoted at the forefront of the website, specifically from current members.

  • Events > Pledge

    The previous website involved numerous pushes to join the fund, which requires a pledge of 1% company equity. Interviews demonstrated that this is unrealistic after viewing the website alone and entrepreneurs are more likely to join after attending an event.

    Rearrange the user flow towards attending an event instead of joining.

  • Highlight current members.

    More than company events and workshops, the entrepreneurs were most interested in the current members with whom they could network.

    Use an eye-catching presentation of member’s logos to illustrate the potential mentors and network.

  • Remove repetitive content.

    In addition to the pushes to join the fund, many of the statistics, facts, language and style is reused.

    Clean up the repetitive content to allow for a digestible and minimal user experience.

  • Combine aesthetic and content.

    Much of the current website is a large, stylistic graphic accompanied with content in small font. Although this looks appealing, it not using space well.

    Arrange content in an eye-catching way to not compromise space and style.

  • No hard edges.

    User interviews and research show that a creative and welcoming effect comes from softer edges.

    Remove hard-corner blocks and instead, involve circular and rounded designs.

Illustrating our users

Personas: The Seasoned Entrepreneur / The Venture Capitalist / The New Entrepreneur

Screen Shot 2021-11-11 at 1.56.09 PM.png
Screen Shot 2021-11-11 at 1.56.03 PM.png
Screen Shot 2021-11-11 at 1.56.16 PM.png

Logo re-design

 

Along with re-designing the website, our client had requested a new logo. The fund was transitioning from an Ann Arbor-based organization to state-wide.

Former logo for Ann Arbor Entrepreneurs Fund

After speaking with the CEO, she requested that the logo bring familiarity from the previous logo, while somehow demonstrating the growth of their company expansion.

New logo

 

Our proposed logo uses a:

  • gradient of colors to keep familiarity of the previous logo and company colors while showing evolution

  • squared but rounded edges to demonstrate a chain-like linked network

  • infinity sign to further keep familiarity, though progressed through these changes

 
 

User flow: pushing for connection

We used our own research to develop a user flow that maps out our future system.

Our main goal is guiding users towards events instead of pledging membership immediately, since members were more likely to join after attending events, from our own research.

The user flow, made on Miro, also represents if the information will be viewed as a “learn more” button or through a gallery feature.

Low-fidelity

A low-fidelity prototype was created to illustrate the layout of the new pages. These products follow the updated user flow, sitemap, and website action items that were created based on the user interviews.

  • Homepage pt. 1

  • Homepage pt. 2

  • Philanthrophy

  • Join

  • Program & Events

  • Aboout

  • Blog

Usability testing

Template from one of the five usability test tests.

The team asked current members and unfamiliar entrepreneurs to participate is usability tests to see if our low-fidelity designs were meeting the needs of users.

In addition to asking for general impressions, we had specific action items to complete on the website (for example: sign up for the newsletter), that were later ranked with their completion time and ease. This demonstrated what needed to be changed for the next version.

Key takeaways

 

Company logos.

Current member’s logos should be displayed prior to their testimonies. Logos are more engaging, colorful and familiar.

 

Images.

Include images whenever possible to accompany events, blog posts, and quotes to look more engaging and legitimate.

Header.

A sticky header encourages user flow throughout the site and exploration to more pages.

 

Color.

Positive feedback keeping the traditional, purple and orange hues to keep familiarity in the website for current members.

Events.

Very positive feedback of event design that allows immediate implementation to a Google/Outlook calendar.

 

Logo layout.

Instead of using the different size circles to show company logos, use the same size. The differences appear like a rank.

Search bar.

Include a search bar for the blog section to parse through posts with more user control.

 

Homepage.

Move the upcoming events lower on the homepage. The first thing should be the mission statement.

Updated designs & High-fidelity

  • Homepage 1

  • Homepage 2

  • About

  • Events

  • Blog

  • Impact

  • Become a Member

High-fidelity prototype

With these takeaways from usability testing, I designed a high-fidelity prototype of the homepage. The remaining pages remain low-fidelity but were re-worked with the findings of the usability testing.

We also created a style guide for font, color and elements to that the pages may look more consistent together and allow for future design changes.

Lasting impact

 

As I finished my involvement with MFF and the U-M Design Clinic, I am very reflective about what this organization has meant to me. This was a great opportunity to put my UX work to the test in a very safe, collaborative and inclusive environment. In addition to the hard skills of UX, user research, and design that were developed, this group taught me a lot about collaboration and communication in the technology space, specifically, how to conduct user research and design in groups so that everyone feels equally represented. I am very fortunate to have had this experience!

If I had more time, I would have:

  • researched more potential users, and designed personas to match

  • conducted more usability testing of the most recent product

  • created a mobile-accessible version of the site