David Chen's portfolio

We first interview with founder, director and then developer to have broader scope of current situations and how we could improve upon. The goals that SASANE would more likely to achieve if visitors
1) understand what SASANE does immediately, and 2) are able to find what they’re looking for easily.

We can test it by comparing the donation amount, number of visitors and donors, and locations of the IP addresses later on to see if our redesign works over a period of time.

Before we jump into research, the assumptions that we make are:

Let's take a look at fundraising performance of non-profit organization in 2016. 

In 2016, the percentage of total fundraising that came from online giving reached a record high in the United States. Human Services experienced an 11.1% year-on-year growth in online giving. *Source: 2016 Charitable Giving Report by Blackbaud Institute

If we breakdown of 2016 online donation month by month: online giving in November and December increased for the second consecutive year, possibly due to #GivingTuesday.

From these report we can conclude that if the website and donation CTA(call-to-action) can be well-implemented with user-centered design, we do can gain more traffic and raise awareness, and further increase donation. 

There are tons of NGO websites online to call out people's attention. We pick 23 examples of all and analyze how a good practice of fundraising layout looks like practically.

Based on the 23 nonprofits websites we have collected and studied, we circled in red the top elements that align with SASANE’s goals and that could potentially be used in the redesign.

Then we ranked priorities based on SASANE’s preference after interviewing with stakeholders:

Those are what matter most for founder and stakeholders. But meanwhile we interviewed 8 candidates in the U.S. who have donated in the recent years, and gathered their comments as well. From the interviews, we found out the visitor’s mental model along with task flow, and what’s important to them in each stage of the process.

INFORMATION ARCHITECTS (IAs)

After planning out the basic flow of how people go through a website to donate the money, our next step is to how people would organize topics from content based on their perception under categories.

Below shows the original content in groups of columns. Notice that some features are missing, such as news and awards, while some features should be permanent on the page. It's also quite common that people cannot find specific information not because it doesn't exist, but because it is buried in layers or the text of meaning has been misused. 

In order to avoid confirmation bias during card sorting analysis, I use R, an open source statistics language, to analyze open card sort data (credit: Alan Salmoni, Open Card Sort Analysis 101). 

The functions that I use are compare, getJaccard, and cardsort. Fire up the code directly in the console and then the system will generate a dendrogram by typing the final code, cardsort('/path/to/data.csv', numberOfGroups). I start from seven groups, where we can definitely play around to make sense of it.

I adjust the structure a little bit by adding couple of cards which are aquired from our six user interviews feedbacks and the data collected.   

This program run by R works out the similarity of any two items that are arranged in groups by our data. Instead of putting two cards subjectively by our intuition, we could rely on the statistics formula to give us a reference while deciding similarity scores. There are also a bunch of other methods could calculate for the same purpose. 

Once we decide the number of blocks of content in groups, we now can start our user interface layout patterns from our early studies of 23 NGO website examples. But before doing that, we still need one more thing, which is the priority of how those groups rank in terms of content importance and how they are weighted. The final table is shown below. 

We can take this table as a valuable reference in our design considerations, which are coming from many sources of synthesis and insights. 

Now we can start our real pixels of design. According to our research and study overall, we narrow down to four main sections on the home page from the top down that integrates the content we just covered:

Apart from header and footer, there are some elements like Get involved, Donate and Social Media/Press will also be present around the page. 

Color Schemes

We analyze 23 good practices of fundraising websites and extract out 14 cases, which favor red or orange-oriented colors as their main CTA, while the other main colors in use above the fold and for the scroll down page as follows: blue, green, and grey. 

First two colors are meant to represent the key focus hierarchically, and the rest of the colors could be brilliantly taken as a main tone for the whole page emotionally. The canvas of colors used in order of hue for those 14 websites can be seen below. 

After combining and synthesizing all the data we collect, and running through a series of iterations and tests, we come up with our final versions of website that extraordinarily polish the original one and let redesign speak to itself. 

We hope visitors can find out the motivation of why SASANE stands here to help, and how the team works really hard to save lives of trafficking. And for those who want to get involved and make difference, they can easily contribute to the organization and donate a small but meaningful amount of money.   

(Thanks for my another teammate Tracy Tsu for her brilliant works.)

I do order food online sometimes awhile ago, but haven’t ordered grocery box before. So I do some study and see who provides this kind of service and how it works before diving into pixels (Almost every service provider’s website has a section called How it works. Interesting). 

While getting more and more hungry by going through hundreds of recipes and dishes online and Apps, here is what I found:

1) Almost no one would deny this is a good idea, and almost everyone think it is indeed be able to positively connect between providers and customers. In other words, the market exists. 

2) Delivery time and overall cost of running the business are the major issues. People would be attracted by the efficiency of how fast they can get the package. Because it still needs time to process and prepare materials.

However, there are some ‘traps’ in there, which could be huge:

1) The uncertainty cost would be a headache for amounts of orders coming in. Business owners might be out of mind between balancing price per box and the budget that comes from nowhere. 

2) Complex logistics and the saturation of market share have become severe competition and posed obstacles for some.

But we’ve already ordered pizza online for years, right?

Alright, I know it’s still different. Let’s pause here a little bit and see some online ordering services.

I look into eight platforms that provide food delivery services from local favorites and select couple of parameters to compare side by side, such as mobile/web App, features, box size, price, delivery type, checkout, Facebook fan page, and reviews. Some applications I cannot reach out due to the validation of App Store over my account region. I finally choose four apps and try their ordering and registration process experiences by myself. By the way, this can only judge from a very small fraction of all jouenry where many follow-up procedures haven’t yet to be tested in person. The four apps that I choose are Chef’d, HelloFresh, Munchery and Postmates.

If we check their ratings in App Store, Munchery has the highest score (4.5 stars over 1,647 ratings) among the four. Different mobile platforms might vary, but here only iOS version is taken into account. Let’s walk through each steps of what those players provide and serve.

1). Registration

They all prompt users to sign up or log in first, although it’s not strongly required in a way, which might not be good experience design if user must sign up to proceed. Though operators would like to provide personalized contents and recommendations for users to gain conversion rate. Apparently Facebook makes this tedious work a lot much easier than before.

2). Select Meal

Here we comes the tasty part of all. Pictures of delicious food are what we are waiting for. But we see two of them showing an alternative path for user to ensure the service is reachable. Munchery and Postmates give user the input of location to start the food track first, to filter out whether the package could be guaranteedly delivered. From design point of view, it could affect how we could shorten the process of filling up the address later while marketing strategy would be also involved as well.

3). Place Order

Once user selects what they want to order, they can tap Checkout and will be brought to delivery and payment pages. Basically there are two main steps. Firstly you need to confirm what you order; secondly you need to type in how you will pay and where you can be reached (delivery address). Again, address and payment information are unavoidable, but once it’s done, ordering online will become much smoother.

Those are the basic procedures we could summarize so far. Pretty easy, right? But actually, they say that the devil is in the detail. Let’s go dig in.

There are pros and cons for each App interface design mentioned above, while one of them might seem to be more efficient than the others. However the need for specific information from user's perspective might differ from one another. Let me break it down step by step.

Introducing ‘Fresh Express’

The first thing that came to my mind is: How to contextually lay out the idea of food sharing for the better? From the higher level to the pixel layers of interface, I sketch it down in diagrams and explore the elements to converge and the questions to ask.

Below I'll walk through the three basic steps of food ordering and UX design illustrated earlier, and from this crafting process of iteration, I'll also point out the tricky part of it and how we could apply the best design practices to address the need. 

1) Registration (without using Facebook account)

Registration includes three fields: name, E-mail, and password. Sometimes name is even not necessarily needed. So basically there will be three input fields and one action button. It will be great if we could use any smart default to speed up the process. So we assume our regulars come back to our App, so she can directly sign in by Email or via Facebook account. At the sign up page, as mentioned above, three fields are needed. Full name will make more senses in a way than typing First name and Last name, which is somehow against what we conventionally interact in the real world. The flow is shown below.

The password strength will show the hint beneath when user types in the combination of characters. If it is good or better, the sign up button will be clickable to move on.

2) Select Meal

This step has taken more nuances than expected because there are so many micro-interactions might occur. How user would view her selection? What if she changes her mind? How to sum up the total price? How to inform user the most valuable but not necessarily the primary information? And how to define the hierarchy? We always could make it more complex, while also make it much simpler. The scenarios that I lay out include quantity selection, size, side dishes menu, and special instruction. Keep in mind that color and text will offer significant hint while user glancing through the screen and from page to page. 

3) Place Order

Finally we are at the tediosu and the most time-consuming part of the flow, which is extremely related to the engagement and conversion rate dramatically. Two primary pieces of information are required: payment information and delivery address. If poorly designed, the form would be so long that user would never want to complete. But this is not the worst case. The worst case is that the information provided by user might be filled incorrectly because the instruction is confusing. I tactically concise a whole lot of fields into merely six, where two of those are filled by smart default initially.

As you can see the magic secretly resides in the alternative way of filling the credit card number. The twelve digits plus another seven digits are brilliantly following one after another, so user can type in a single place, while the zip code comes at the end.

The data that the business owner needs actually might not necessarily be coded in silos. The chances are that user would be intimidated by a long form and never comes back again. So think about what is the most important data that we want to keep and we definitely can take good advantage of each time we talk with users if we really need from them.

Check the video of the overall flow prototype below (some tiny part might be tweaked little bit). 

The food delivery concretely could embed more situations that are based on users' needs and behaviors. The purpose of this design is trying to focus more on the details of how the majority of people could smoothly jump from one page to another without too much friction ahead, which definitely could be continuing to learn, iterate and improve upon it while more constraints introduced.