Design Story: FUBU (For Users, By Users)

About the Project

This project was done in Pratt Institute’s Information Architecture and Interaction Design taught by Craig MacDonald. For this project, my group and I were given the task of redesigning the information architecture for Sesame Workshop (www.sesameworkshop.org) that would make the site’s interface much more user friendly, increasing its usability through improvements of its navigation, layout, and how its contents were displayed.

My Role

The work was distributed evenly between the 4 of us. We worked together as a team in performing research, analysis, and paper and digital prototyping. The only unique role that I played in our team was that of “Manager” in which I was in charge of managing our time, collecting all pieces of assignments and making sure everything was submitted in a timely manner.

First Impressions

Sesame Workshop Homepage

Here is the site we worked on. At first overview of the site our team was quite confused as to what this website was about in the first place, and felt that there was so much information that was scattered all over. We needed to figure out what users needed and preferred. What do users normally expect from a non-profit website like Sesame Workshop?

Figuring Out What Users Expect

In order to understand the users we each Interviewed 2 users from different demographics and also sent out a questionnaire which collected a total of 76 responses. My user demographics focused on parents.

Key Interview Responses

User 1: When asked how would they improve the last non-profit website they’ve visited. “I did have to go to Charity Navigator in order to figure out if they were credible.”

User 2: “I would say their donations page (is the most important feature), because they are non-profit and would depend on donations to keep themselves supported.”

Our user research showed us where to focus our attention.

  • Users want to know what the organization is about.
  • Users want to know who is receiving the money from donations and how its used.
  • Users want clear navigation with image driven content.

Persona

As a result of this user research, I’ve created the above persona to help solidify the idea of who we will be designing for.

Organizing the Content

Card Sorting

50 Cards

Reviewing the content of Sesame Workshop, we pulled out 50 cards to represent items from their site.

Similarity Matrix

Final Assortment

Using both virtual and in-person users, we had users sort these cards into groups they felt should be together. OptimalSort provided the tools needed to analyze this data and see how users as a whole grouped our cards.

 

 

 

 

It turned out that we used far too many cards. As a result, we grouped items together using the data we got from users and removed 17 cards that users found redundant or unnecessary, resulting in the 6 final groups of cards in the image to the right.

 

 

Tree Testing

In order to further test our resulting groups, we had to recruit more users to performing tree testing on our categories. This allowed users to follow paths that will later be optimized for navigating the new IA.

Users were given 5 tasks.

5 User Tasks

Tree Testing Results

Users had the most difficulty performing the final task in which they were confused about the differences between “Press Room” and “Press Release” found under “News” and often times would look for it under “Media”. This suggested that users were also confused between “News” and “Media” as both can mean the same thing depending on the context.

Final Site Map Concluded From Card and Tree Testing

Site Map

User testing help us to flesh out our site map and finally condense it into a much more intuitive way that made the most sense for our users.

  • We removed the News category, and meshed into contents into Media.
  • We condensed Press Room and Press release into one tab.

What Are Other Websites Doing?

We reviewed 5 other non-profit websites based on 7 different dimensions.

Our review led us to the follow major insights that we wanted to implement into our newly designed site.

  • Navigation: visible, not hidden, and concise
  • Financial Report: easily accessible, and easily digested of in depth report
  • Donation button on home page: fixed on top of the navigation bar where it is easily accessible
  • Volunteer Opportunity: clearly listed, easy to view list of volunteer opportunities on page before user clicks to sign up
  • Donation Destination: clear description of where the money is going and how it is being use before collecting money; visualize information to allow users to understand easier and faster
  • Mission: clear, one sentence summary on homepage and easily discoverable on main navigation
  • Partner/funder: easily discoverable under a reasonable tab with a clear label; should not have to dig on page

We’re Ready for Prototyping

Paper Prototyping

We devised a low fidelity “paper prototype” using our findings from all our user testing up to this point, then finally reviewing our competition to see what has worked and what does not work. We later implemented our prototype on an app called Marvel in order to have users test our first rendition of the IA.

Task 1 – Mobile

 

First task: “You want to offer your time to sesameworship in a meaningful way.”We wanted to volunteer for something, in which there were two ways of accomplishing this goal.

Task 2 – Desktop

Second task: “Find out information of how the organization uses its funds. Then, financially support the organization.”

This task was split into two parts, but all fell into one category of dealing with money. Previous user testing mentioned earlier was clear that users preferred to donate to a transparent organization so we wanted to make sure that our financial report were easily accessible.

Key Findings

After testing this on users, the following were feedback we’ve received.

  • Volunteer information box should be larger.
  • Confirmation page should include feedback of what to expect next.
  • Homepage should show short but concise information about what the organization is about.
  • The use of the word “our” in our tabs were redundant and unnecessary.
  • Juan Ganz Community Center did not fit under “About Us” so we moved it into the footer.

Final Design

Desktop: https://projects.invisionapp.com/share/G4EVZ6UU5#/screens
Mobile: https://projects.invisionapp.com/share/ZPEW6J84U#/screens

Homepage of Final Prototype

Homepage

For the homepage, we organized our navigation in the format that we derived from our previous user testing. We also made sure that the content was picture driven, simple and straight forward. We made sure that the homepage included short statements of the mission of Sesameworkshop as users found it important to know right away who the organization is.

Volunteer Page – Final Prototype

Volunteer Page

The volunteer page was optimized to showcase different volunteer opportunities which allows users to see what they are getting into before they sign up for volunteering like many organizations do. Users prefer to know what their options are before signing up for anything. We also kept our theme of concise information, but enough to let users know what it is about, when it’s happening and who to contact for more information.

Donate Page – Final Prototype

Donate Page

Our donation page wasn’t changed too much from Sesame Workshop’s original idea, however we sure the details were not obscured by the background image and most importantly, to keep with the transparency of the organization, we’ve included a link to the Financial Report because users want to know how these organizations distribute their money so they know if this is something they’d like to contribute to.

Financial Report – Final Prototype

Financial Report Page

Another vital change we’ve made is Sesame Workshop’s Financial Report. Because our user research revealed how important it is to users that non-profit organizations are transparent we wanted the Financial Report to not be hidden, but be clearly visible and found easily. We linked both Donation page and Financial Report pages together, this way users see that Sesame Workshop is not trying to withhold information from them and users will be more likely to support their cause. We also made sure that data visuals are shown so users can get a quick overview before seeing the full report.

Success

I believe our final product tackled all the issues we learned about through our user research and testing. With the limited timeframe that we had, we were able to design this new IA for our users. This is far from perfect however. I believe that if given more time, I would have done more user testing after concluding each step in order to further tweak our decisions. But I am pretty satisfied with our conclusions! Without the help of our users and consulting them we would have never gotten to the user centered design that we’ve come up with.

As Without, So Within: UX in Library Design

digital-libraries

In today’s digital age, a lot of the focus in the field of User Experience (UX) is on human computer interaction; how users interface with digital tools such as websites, apps, devices, etc. However, UX is not limited to the digital side, and often times the physical environment needs to be considered as well. In 2015, The Southeast Florida Library Information Network (SEFLIN) buried themselves deep into UX projects that paid special focus on the physical aspects of their libraries and how to make improvements for their patrons. Six of SEFLIN libraries were selected and Aaron Schmidt, a library design consultant, met with each of them to discuss their issues and aspirations for their library and to come up with projects they’d like to face. Aaron Schmidt wrote about this here, and this blog post is based off of his article. Although there was no follow up, that I could find, it is interesting to see the problems that came up and their plans to fix it. A lot of which is relatable to a lot of libraries out there.

Welcoming entrances are important. One of the SEFLIN libraries had an entrance that did not immediately introduce patrons with the staff. Patrons should be met with staff immediately, which in turn should be warm and inviting. This creates a connection with the patron and makes them know that the staff is ready to help. In addition to this, I believe it also is great for security reasons. The SEFLIN library decided to go on what they called “service safaris” to investigate how other libraries designed their entrances, and then pick one and implement a prototype of it for a two week period to teach them what works and what will not.

Another great example from the SEFLIN UX projects was this idea of “improving through removing”. One particularly old library, about 75 years old, had collected so much material. They decided that the best way to improve was to begin to weed their items, and donate their art work to museums. Another library noticed that their signage was ineffective, so they simply removed them all so that they could determine which signs were mostly needed. These are great ideas for different reasons, the first allowed the library to reduce their materials, to make room for updated ones and to also create more space in their environment which will be more visually aesthetic to their patrons, and the other was a great way to figure out why their signs were ineffective and which ones were definitely necessary.

Finally, another note worthy task that one of the SEFLIN libraries faced was that their elevators and staircases were featured so inefficiently that most of their patrons had not known that they had a 3rd and 4th floor! This is a perfect example to show why design is so important and why having the users in mind when designing even the layout of a building is essential. Patrons were unable to make full use of this library because they had no idea of these floors. What this library planned to do was to recruit 15 people, give them tasks to do throughout the library and observe how they accomplished or did not accomplish the tasks. They also recorded all directional questions and experimented with cross-staffing their desks. This reminds me of a typical User Experience evaluation, but rather than observing them doing tasks on a digital device, its observing how they use the building as a whole.

These were some of the tasks faced by SEFLIN. You can see the rest here in the article. How users interact with a library, whether physically or digitally, are very important and in today’s world, the two go hand in hand. In today’s world, a typical transaction in the library often begins digitally, where the patron connects to a digital catalog maybe from home or from the library and then comes to the library to either retrieve it themselves or place it on hold to be picked up at the desk. A well-designed system could create building plans that allow the patron to see where exactly they need to go on the shelves, or where the pick up desk is located to retrieve their holds. Having well designed buildings and digital spaces will allow patrons access without much thought on their part. It should feel natural, even if the task is complicated. When the physical environment aids to the users’ use and is augmented by its digital features, you’ll have much more satisfied and fulfilled users.

References

Schmidt, A. (2015, March 5). Library UX in Practice | The User Experience. Retrieved April 07, 2016, from http://lj.libraryjournal.com/2015/03/opinion/aaron-schmidt/library-ux-in-practice-the-user-experience/#_

Design Critique: Samsung Smart TV Web Browser

Samsung Logo

Introduction

The Samsung Smart TV is a television set that is intended to go beyond the conventional TV. It allows for video and music streaming, app based games, and also web browsing. This Critique will focus on the function of the Samsung Smart TV’s web browser app that allows users to connect to and browse the internet.

Picture of BrowserFig. 1 The Browser Interface

Suggestion 1: Create a More Intuitive Mapping

When browsing the web, users tend to have a more satisfying experience when they are able to navigate quickly and reflexively. This is why it is very important for the layout and mapping of a browsing interface to be intuitive to the user. One such improvement that can be made to the smart TV’s web browser is both the “refresh” button and the “backwards” and “forwards” buttons. Currently, each of these buttons are on the far left end of the browser, opposite of the address bar and without prior knowledge to this it might even go unnoticed, as for a moment I thought there wasn’t a refresh button at all.

Address barFig. 2 Backwards, Forwards, and Refresh Buttons

To make this more intuitive, it would be a good idea to map these buttons closer to the address bar, because it is the addresses that they are controlling. Naturally, if the user wants to control what address, or website, they want to go to, whether it be typing in a new address or going back to a previous or forward to a next one, their eyes will naturally be drawn to the address bar. Putting the backwards and forwards buttons to the direct left of the address bar and the refresh button to the direct right (or vice versa) will keep the buttons all in close proximity to the very thing they are controlling.

Another way to improve the mapping would be to change how scrolling is mapped to the TV’s remote. In order to scroll up and down on the browser, you have to hit the rewind button to scroll up and the fast forward button to scroll down.

ScrollFig. 3 Labels indicating how to Scroll

Rewind and fast forward are buttons that are located near the bottom of the remote, left and right, respectively. Rewind being to the left and fast forward being to the right are universal concepts engraved into our culture for a long time. Having a function that controls up and down mapped onto buttons that are for left and right is highly counter intuitive and without the label on the screen a user would not have thought that would work. A more proper way to map scrolling up and down to the remote would be to use the “channel” buttons which are currently assigned to nothing when in the web browser, and the up and down arrow buttons are assigned to the cursor or selecting parts of the screen. This will make the mapping feel a lot more natural as it connects with the action of moving up and down.

Picture of TV RemoteFig. 4 Samsung Smart TV Remote

Suggestion 2: Removing Unnecessary Feedback

The TV’s remote has obvious feedback when pressing buttons by the very tactile nature of it by mere sense of touch when it is compressed. But in addition to this the TV itself has a red light that will rapidly blink when a button is pressed, indicating to the user that their actions worked. While this is great feedback, the light will go off even if the action has no outcome to the TV. For instance, there are a set amount of buttons needed on the remote to interact with the web browser, but even when pressing, for example, the channel button you will still see the red light blinking but nothing will happen. In this case, the feedback is unnecessary and removing it will indicate to the user that the button pressed has no action for the current interface.