CRAIG ROBERTS
Portfolio
Siegel.jpg

Siegel Family Endowment Website

Siegel Family Endowment Website

 
 

Siegel Family Endowment Website

 

Role

Research
Information Architecture
UX Design
Interaction Design
Visual Design

Tools

 

Phase 1


Problem

 

Siegel Family Endowment needed to stand out as the premier ed-tech grant-making organization by acquiring new portfolio nonprofits, strengthening brand identity, and increasing their credibility.

 

Research

The research phase began by learning the client's business goals. I then developed the questions for the stakeholder interviews and distilled those answers into digestible data that allowed me to align the business goals to the experience goals to develop the information architecture.

“It would be great to get a deeper understanding of other grantees, to see who is in the network.”
— Potential Grantee
 

Interview Findings

Based on the interviews, understanding the personality of SFE was the most common goal of SFE users, followed by exploring their network.
 

Personas

For SFE to achieve their business goals, there are 4 main users the site needs to be designed for. The users include potential grantees, current grantees, potential foundation friends, and internal staff. I created 4 corresponding persona sets, each with a unique mindset that corresponds to the user research. Each persona is labeled with a different color to make it easy to identify which set it belongs to.

 
 

User Flows

Building on the research and persona creation, I created user flows that incorporated the research and starts to formulate the information architecture. While creating the user flows, I discovered that SFE's funding categories illustrated their personality while helping user's determine mission alignment. For this reason, I placed the funding categories prominently in the flow to make best use of user's attention economy.

 
SFE mission statement became the primary tool to illustrate their personality and provide users with immediately useful information.
 
 

High Level Flow and Information Architecture

I used the High-Level Site Flow to stitch together the user flows and introduce to SFE multiple entry points into the experience.

SFE emphasized the need to keep in contact with current grantees. Using email, I introduced the idea of emailing the current grantees whenever a new grantee became a part of the family. This email will provide a reason for current grantees to revisit the site and learn about their new family members.

 
 
 

Phase 2


Wireframes

SFE funds organizations that teach coding and computer literacy. To have the site illustrate SFE's personality and interest, I came up with the idea of making SFE's website function as a command line. This allows the experience to function as a medium of expression.

All of the site's content is designed in modules. Each module is served by either typing a command, or interacting with the GUI.

 
Interacting with a website is essentially having a conversation. You ask for content by clicking a button or scrolling. After you are served your desired content, you consume the information and either ask for more or leave.
 
 

Interactions

To effectively illustrate the concept of the command line functionality, I animated the low fidelity wireframes in After Effects. I also used Principle to illustrate some of the micro-interactions.

 
 
 

Phase 3


Visual Design

SFE was leery to the idea. In order to most effectively communicate the concept, we developed high fidelity mocks of the site.

After seeing the site and experiencing the concept, the SFE board bought into the idea.

 
 

Testing

After convincing SFE on the concept, we went into the testing stage. Our main goals were to discover whether the information architecture was effective, and to discover user sentiments on the command line experience. 

A major point of contention was the repeatedly flowing content. Right now, if you ask for a module twenty times, the site will serve it twenty times in a row. There's was much debate that around the site simply scrolling to the first request of the module, slightly veering away from the content. After testing with the different users, modules were surfaced on load and the content became anchors.

 
 

Final Design


Live Experience

After all the tests were complete, and the back and forth were settled between design, engineering, and the client, we launched the site. I was extremely excited to produce an experience that served as a medium of communication, and most of all, help SFE continue to grow their grantee base while helping achieve their mission.

 
 

Results

Following the launch of the site, the Siegel Family Endowment was able to add Data and Society, Center on Rural Innovation, Peer to Peer University, and other organizations to their grantee family. Also, they have been able to increase their engagement with the content they produce on channels like Medium.