CRAIG ROBERTS
Portfolio
Main Homepage.png

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 is 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.

 
 
 

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.

Each 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 wanted to see the design and with content flowed in quickly, so I skipped testing and went straight to designing the high fidelity site. 

 
 

Testing

We are currently in the testing stage. Our main goals are to determine whether the information architecture is effective, and to discover user sentiments on the command line feature. 

A point of discussion is the repeatedly flowed in content. Right now, if you ask for a module twenty times, the site will serve it twenty times in a row. There's been a debate the at the site should scroll to the first request of the module, so we are testing to see which experience works best for users.