Exploring possibilities & interaction between devices.
StrollHealth is a medical application that allows physician quickly choose the appropriate and available facility for the walkin. Learning from the existing user experience, we found that a couple of fractions related to efficiency and usability could be well-considered, and better help physician effortlessly interact on the interface.
Two different design concepts are investigated and tested. The fundamental ideas and little big details contextually follow how the physician would choose facilities across a certain period of timeframe based on different priorities and needs when in diagnosis.
When selecting the available facility for the walkin, physician has several routes that could help her efficiently and accurately reserve the appointment: selecting day first, then jump to one of the facilities; or, showing three days in a row from now on, then eyeing on the first facility to pick availability within.
Below I'll elaborate the concepts into three dimensions: Day Picker, Time Picker, and the fundemantal difference of Navigation concepts.
Two concepts evolve into two different ways of interaction. The first one on the top shows seven days as a cycle, and the availabe facilities on the default day, which is today. While the bottom one treats days as consecutive flow, which allows user always be able to see the availabilities in three days in a row.
The design concept at the top shows discrete pieces of time card that are allowed to make reservation on certain day. It's easy for physicain to skim over facilities across their first couple of available time to reserve.
While the bottom one, which shows availabilities across three days in a row, emphasizes the feature of when one facility is available in the near future.
Two conceptual flows bring up two different navigational structures. The flow at the left starts from the selected day(s) first, then filters out all the facilities for the user. While the flow at the right shows the first available facility followed by others below as a side menu navigation, then stretchs out all the schedules within three days from today for the chosen facility.
Combining with the discussions so far, let's see how these two concepts work.
Two concepts have their own pros and cons, which fit different needs specifically. It also depends on the goal that physician would like to achieve in an efficient and correct manner. In this project, our client basically hopes that the physician could help patient reserve the first available facility which patient could make it and afford the cost. So instead of choosing from one facility to another, the physician might be suitable for our second proposal that could better satisfy the need of our client, where physician can have a quick scan over three days spectrum under the very top available facility.
One of the extreme cases is that no results are found for the next three days from today. When user comes in this page while the system cannot find any data from the server, it migth just show zero results found. So in order to help physician book the first available facility day for the patient, a button jumping to the next available facility day will be provided. This button will not only be a great help for today if no results found, but also can be applied for two days of availabilities far from each other on the timeslot. Users can always tap on date to open up calendar for broader time spectrum. See how the button works below in GIF.
During the real practices of reserving facilities, I believe there must be some other scenarios that we might overlook or haven't thought through yet. However, those are also the states we should consider and then provide a user-friendly solution for those extreme situations.
Greywire’s mission is to help companies get the most out of their employees and to help employees get the most out of themselves. The client focuses on building tools that help employees realize their professional potential in a way that aligns with the objectives of their employers.
Before we start to create a platform to help companies get the most out of their employees, we need to know what our customers want and look for problems worth solving, not just a solution. There are three critical phases that are conducted step by step back and forth in the whole design process: pre-product research, competitive analysis, and user interview & test.
First of all we study the current market and the existing products in the innovation management space. We keep communicating with our client and identifying the goal of how to drive engagement and innovation. The users' needs, wants, and behaviors are under our radar to help us better refine user persona(s) later on. Our final deliverable is Minimal Viable Product(MVP) to the market.
There are roughly over 30+ products that are Greywire's competitors merely in the United States. We choose some popular ones and attach each one with what they are good at over the well-chosen features compared in the table below.
In order to have more clear picture of how people think and feel about those online platforms, we survey all the relevant reviews of what users like and dislike, and also try out two of those by signing up the services and creating content from scratch. When we cross-validate and compare between what online users comment about and what we gather by ourselves, we uncover more insights from many sourecs of information into different dimensions.
Therefore we shape the service into two angles: from the company perspective and from product perspective.
Since this is enterprise level to deploy the platform all over the organizations in the company, our customers and end users are basically two different groups of people, so that what they care about also varies quite little bit. For our customers, based on our assumption, could be Chief Information Officer or Head of Strategy, while our end users are those who care about new ideas and innovation from the bottom up, in which roughly around 5,000+ workers user base in the whole company.
We'd like to know what exactly our users are concerned and perceive toward the product like ours. So we lead seven interviews, and try to figure out their goals, motivations, frustrations, and wishlists in the contexts of working space.
Below are showing some of the notes we take during the interview and the quotes from the conversations.
We make a dual metric to place all of our interviewees on the product's index that we pre-define according to our research. As each dot on the metric represents one person, where you can see how people respond to the need for innovation in the company and the confidence of participatory versus the level of interest in innovation.
The right-hand side of the areas on the metric are our primary target user distribution, which shows high interest in innovation, and the belief of how the change can be made with confidence in the company.
The attributes that we collect from the user interview dramatically help a lot for our following exploration of persona(s) definition. Any new product entering the current market all experiences the process of divergence and convergence of whom the product should aim for. We narrow down two personas for our product, which depict the need over junior and senior employees in the company. Meanwhile we build up their behaviors and needs for our design guidelines to refer to.
The four primary features of tasks that our product will act upon could be clarified as follows: idea list, idea detail, post idea, and user profile. These are also the basic flow and the value that we hope most of our users walk through or visit with.
Now we got our preliminary research and usability tests feedbacks, and our defined personas and main features of tasks, we can get our hands dirty on the design and gain more insights over iteration development.
IDEA LIST (HOME PAGE)
Idea list view is also the home page when user lands at first place. User will be presented a list of ideas submitted by other users and vote for the one they like. Filters are also provided on the top with different tabs.
This is the very first version of idea list page that is compiled from our user research takeaways. During the first iteration, there're lots of discussions and arguments inside of brainstorming session in the team. First of all, owing to the initial phase of product development that our service is still under construction, so we take away the side bar navigation at this point to simplify the layout. We will be open for that option once our layers are becoming more complex and complete.
The second argument we have is the headshot of contributor ahead of each idea item. We believe that people might tend to have bias if they know who the idea belongs to or originates from. So we take out the headshot to see if it could literally enhance the engagement if those ideas are equally treated without owner's photo. Below is our refined version of idea list view. By the way, there're also some tiny modifications that have been adjusted.
IDEA DETAIL
User can browse the list and vote on each one of the ideas. If she is interested in one of them or would like to help the idea owner, she can tap on it and look into more details, which is shown below.
One of the unique features that we are inspired from the study is the way how other people can participate and help with. It shows a sense of commitment that invites all the enthusiastics to make this idea happen. We also allow the owner to seperate the tasks to offer flexibility of how people can get involved. Once you check it, the system will put you in the list of helpers and send you any follow-ups. Also notice that in the detail page, the headshot is coming back, which still lets each idea owner reveals their identities.
POST IDEA
The primary CTA of the service is sharing employee's idea within the company. As you can see we make this function always available on the page so people can click on it whenever she has an idea to share. Modal view is one of the solutions, however it might not be clear if any interruption occurred during this screen of editing new idea. We'll get back on this issue later.
We encourage people to post as many ideas as possible, rather than merely throw out complaints or act like customer service inventory. Each individual is treated as a valuable business progress contributor, so in essence the social network effect would be an important factor to trigger the dynamics.
USER PROFILE
As mentioned earlier, each person has a basic profile portal syned with the human resource database. So employee can see each other's title, location, and brief intro. They also can edit their status, account info, and the most important sections of idea canvas, such as My ideas, Liked ideas, and Committed ideas.
Over a few rounds of brainstorming and debating conversations internally, we present our design mockups and testings with our client. Speaking of usability tests, we do overlook some important details that we thought people probably wouldn't see them as issues. For example, although this is an innovation platform, some people still might be unclear what the home page stands for or asks for for the first time onboarding. Here are the findings of our first usability test feedbacks:
As you can see that from the feedbacks of interview, the innovation platform has a great potential than what it was expected to be. People also seek other chemicals when jumping on the board. We will take those words seriously into our next development of design iteration. Let's go back to our idea list view first.
During our intensive and deep evaluation of our initial proposals, we collect all the transcripts we have and synthesize what users think and feel into several actionable directions: 1) People care about who is participating ideas. This is against the idea of anonymity in terms of submitted idea ownership shown at the top layer. We decide to bring the headshot back, but in a more modest way. When people skim through the page, the idea's title is still line up from the top down, left to right, where the headshot of idea owner is pushed to the far right. In this way we let the idea title be the first focus according to the line of sight, but also keep the owner appeared on the secondary position, to de-emphasize its spotlight.
In order to move the headshot to the right space, the vote count thus goes down to the the bottom row but stands as the first button, followed by the other two.
We break down the actions to final three: vote, join, and comment. Besides vote button, the second important action that we identify is 'join.' In the earlier, people need to click into the idea to know how many people are involved and further do the commitment. This also points out our another finding: 2) Commitment causes ambiguity. People don't know what will happen after checking. Moreover, the multiple checks would increase friction and the cognitive loading for both sides. Human resource allocation might be an issue if unequally distributed.
Last but not the least is that people tend to favor the ideas that relate to them in certain relations, such as by office location, by department, or by idea's category. This is also one of the elements that trigger engagement.
Earlier we mention applying modal view for the new idea posting screen. In order to decrease any interruption during this task, we give it a dedicated page for user to fill in the required fields of information of idea. While about to submit, user can choose Preview first, to see if anything goes wrong, and then publish idea or go back editting. Another solution is to provide 'Save as Draft' function, but who knows if people would come back to finish the new idea proposal draft.
Finally we give our new version a second user testing and see how people would perform against our measuring index. The scores over old and new design are plotted on the metric that we draw before. The overall performance is pretty amazing that we literally boost people's interest toward idea reservoir among those who feel need for innovation in company.
Meanwhile we make a comprehension test for about eleven primary features across the functions offered in our product. Testers can score from one to six for each feature to see if they are easily understood and friendly to use.
Eight out of eleven of features score pretty good in a way that most of our users understand the functionalities of how the platform works, which they matches what we expect them to be. For the first-time uers we provide education panel to eliminate any confusion and friction that might take place.
In summary, there're still many topics that we could tackle in the future and enhance engagement. For instance, notification mechanism, which can notify people when a new message created or responded on the thread. Or having approval process to approve or sponsor ideas that need more resources or budget. Our final delivered screenshots are presented below.
SASANE was established in 2008 by female trafficking survivors for other female survivors and those at risk of being trafficked or re-trafficked. The organization has created programs (Paralegal, SOS, School Awareness, and Community Outreach) to help the women become more economically independent and self sufficient.
Our focus is to strategically redesign SASANE home and donation pages by conducting research, user interviews, comprehension/usability tests, card sorting and other testings to help SASANE achieve its goals, to attract more traffic, increase awareness and optimize donation sources.
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.)
Food delivery service is pretty popular recently. It seems that almost anything (or at least some business owner attempts to) could be delivered at your front door nowadays immediately. I try to break out the basic flow of the App that I made of (it's called 'Fresh Express') to demonstrate how to order food via App, which includes signing up, browsing, ordering, and checking out.
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.
Starting from users' pain points about city list in the menu and the associated gestural operations, new YAHOO! Weather App has been redesigned based on the usability test, and further been pull out other inspiring ideas of how people could interact and benefit from the weather forecast into daily lives.
From USMO (User-Situation-Motivation-Outcome) adpated to JTBD (Job-to-be-Done)
General understanding of what user's thoughts and feelings are, and how they affect what they say and do.
Card sorting synthesis
Information Architecture flow comparison (old vs new)
How might we adjust units preference by detecting user’s voice?
How might we augment weather info when alarm goes off?
How might we show the weather information of the matched city in real-time while typing?