Design Story: Chimera Calendar App

By Kristen Droesch & Lily Martin, Spring 2017

For our Advanced UX Design course, we were charged with developing and prototyping a new calendar system.

We kicked off our project by selecting the user group we were most interested in designing for, eventually settling on arts and media freelancers. To boil down the essential needs of our users, we identified key traits we knew to be common among arts and media freelancers, as we are both well-acquainted with multiple freelancers ourselves and have witnessed roadblocks to their productivity on many occasions.

Among the factors we identified, there were the needs for:

  • Creative time
  • Telecommute with clients
  • Time blackouts
  • Meeting /client communication management
  • Invoice tracking
  • Something that could travel with them

We then continued our exploration of the average arts and media freelancer’s needs by creating a persona (Oona Bell), followed by a journey map.

During this time, we also performed multiple rounds of user testing, first screening freelancers, and then performing interviews to learn their needs, likes, and dislikes in regards to calendar systems. From these interviews, we learned that the majority of our interviewees were “stuck” with using Google Calendar, as there is “no better option, even though it sucks.”

We wanted to create a calendar system that incorporated invoice-tracking, management capabilities for multiple projects, to-do lists, and project archiving, among other functionalities.

At this point, we began sketching out an initial draft of Chimera. You can see some very messy sketches, and the initial wireframe’s individual project page, below.

 

We presented our first wireframe to stakeholders and took away a key suggestion: move away from the grid-based layout for the calendar. With that in mind, we studied the structure of timelines and Gantt charts to explore an alternative way to visualize time. This resulted in a new set of sketches:, including an illustration of a 28-day sliding mini-calendar:

The second iteration of our design was presented to a new set of stakeholders, who critiqued our prototype, visible on InVision, and directed us away from the timeline format. In addition, we were advised to create a desktop format, to make setting up accounts and projects easier before syncing to mobile.

We returned to the drawing board and began sketching a new prototype that included desktop and mobile, and which was more mobile-friendly (the timelines having been deemed too difficult for mobile use).

Our final prototype is now visible on InVision in desktop and mobile.

Expert Voices Interview: Nadaleen Tempelman-Kluit

I sat down with Nadaleen Tempelman-Kluit, the Head of the NYU Libraries User Experience department, to discuss her work at NYU and the role UX design plays in her position.

KD: Your background is in academic librarianship. How did your career path bring you to UX?

NTK: Well, I’m still an academic librarian, so it sort of makes sense that I’m working for an academic library, but segueing into UX. So, when I started at NYU, I was the Instructional Design Librarian, so I was creating online tutorials and teaching. And during that time I did a degree in educational communication and technology, and started thinking more about how people learn online, in regards to multimedia learning theories, and cognitive load issues, and like and, visual and verbal channels of communication, and affordances, and it segued into thinking more deeply about how we present information online to our audiences, which underpins all of user experience. work with our community. That largely sort of segued into user experience. So I think that my background in educational technology and how people learn has really helped me with a foundation when I think about how to present information online.

KD: As department head, how much of your role is devoted to hands-on design work?

NTK: Not as much as I’d like, of course. But that’s probably the same thing that every manager would say. But we’re lucky in that we’re a small group, and we’re sort of all hands on deck, and we’re all interested in all things. so wWe have a lot of brainstorming sessions where we’re scribbling on the board and passing around ideas and visual designs, and then I’m able to sort of grab small projects that have visual design elements, and have the whole user experience flow in a very small way that I can tackle. And so I guess we all would like to do more of everything, but you have to pick your battles and, you know, my main role is to lead the department and lead support the team in the good work that they do, so that is my focus. he team, so I have to focus on that.  

KD: How does quantitative and/or qualitative research inform your design work?

NTK: You know, obviously deeply in that, we’ve found all of our design work—we’ll brainstorm spontaneous ideas that are based on design patterns and what we know, but we always validate all of our preliminary work with data that we have, so it’s heavily informed. And I think even greater is the selling of the work with the quantitative and qualitative data, because if you don’t underpin your strategy with that, and communicate to stakeholders about it, then the buy-in is a lot less likely to happen.

KD: How and when do you involve your web development team in the design process?

NTK: What we tend to do now is have UX sprints, and then after several UX sprints, when we’ve got some strategies in place, I’ll do a backlog grooming with our Head of Web Development, and they’ll do a sprint, which are stories founded on the UX work we’ve done. So it’s sort of cyclical, and we try to batch load it, but we work fairly closely with them.

KD: And what hard and soft skills do you think a UX designer should possess?

NTK: Obviously the traditional hard skills. I think what we do in this department, and what I think works for us, and works for the profession—not that unicorns, quote unquote, don’t work—but I think that we here each have specialties, and we can all lend a hand in all things. So I think traditional wireframing tools, some sort of quantitative and qualitative skill set, and awareness, at least, of tools. Whether you use them or not, knowing what the scope of these tools are, and assessment skills, survey skills, that sort of thing. And then soft skills, it’s really about how to discuss design, how to be succinct, and back your presentations with enough data that people have respect for your work, but not so much that it overwhelms them. So really in a way it’s reading the audience and knowing what will help people understand where you’re coming from and where your work is coming from. So I think that’s the biggest soft skill—and it’s a very intangible skill. It’s hard to say, you know, can you read your audience if you’re talking to someone, but it’s something you can learn pretty quickly when you watch your people talking to people to know how they’re gearing their communication to the right audience. So in a way, it’s very UXey.

Expert Voices Interview: Iris Bierlein

I interviewed Iris Bierlein, a UX Specialist with the NYU Libraries UX department .We discussed her role as a UX researcher, and her interest in qualitative research in particular.

KD: To what degree does your role as a UX Specialist allow you to commit time to research?

IB: I’m the lead on the qualitative research, so thinking about and designing research is a significant portion of what I do. That being said, it’s key that I be able to support the work of my colleagues and engage in larger organizational collaborative projects/committees that might not be specifically research. It’s a balancing act, but one that makes the job interesting and makes me a better researcher not working in a silo.

KD: How do you see UX research falling into the organizational structure of a large library, specifically an academic one?

IB: Academic libraries, like any library, are service-oriented organizations. Understanding users is crucial to offering successful services that get at the heart of your user’s needs. By conducting UX research we’re able to better understand what users want, need, and how they interact with our services. This supports the organizational tenants as well as users, so it’s a great union.

KD: How, if at all, do you measure satisfaction and success among your users?

IB: Libraries can’t always utilize the same success metrics that, say an e-commerce, site might. We think a lot about what success means for a library website, and how we translate that into data that we can tack over time. For example, the amount of time a user spends engaged on the site may actually be an indicator that they are having trouble finding what they’re looking for. If a user can find the information or resources they need quickly and then leave, that’s actually a good thing. We also seek regular feedback from users, but also look to more passive feedback sources. Are there a lot of questions or complaints that are coming through via chat? That sort of thing.

KD: Can you describe a quantitative or qualitative data analysis project you’ve taken part in?

IB: Sure, I’ll expand on the chat that I mentioned in my last answer. The library offers a virtual chat service. Users ask a whole range of questions which makes it a fantastic source of qualitative data. Anyway, for this project we were interested in how users were interacting with our spaces, and what the major pain points were. Selecting chats that came in over the course of a specific time span (months) we coded for key terms related spaces. Anything unrelated we pulled out. That left us with a statistically viable number of chats that related to spaces. We then looked for patterns related to usage, issues, requests, etc. Taking that data we were able to identify the priorities across various user groups, and make recommendations regarding next steps.

KD: How did that project inform your work in the library? Did it have any influence on the department’s design process?

IB: The research helped to validate the need to rethink/redesign the ways we were approaching spaces, and shape the larger conversation around spaces and room booking across several departments, including ours. We have a current project focused on spaces and the analysis is certainly one of the pieces of supporting research.

Tech Critique: Lookback.io

Lookback.io is a somewhat new tool designed specifically for usability testing. Once you have an account, setup is a simple matter of downloading and installing Lookback, then launching the app and making a test recording. Audio, video and screen actions are recorded and, upon finishing a session, video files are uploaded to your Lookback account.

Once the recording has begun, the app runs in the background and is unobtrusive for testers. It supports any Apple or Android product, and has a simple, elegant interface for mobile products that mirrors the desktop experience decently well.

Besides being a great choice for in-person usability testing, Lookback provides remote testing and remote observation options, enabling multiple observers to make notes in the interface, and communicate directly with testers via a chat widget.

I first utilized Lookback for a research project at Pratt, and have since begun using it for user research and testing with my UX department. We have had such a positive experience using Lookback that we recently purchased a license for our further research/testing needs.

Pros

Lookback’s pluses are many, including an extremely simple workflow to set up recording for an in-person session, as well as a modern, aesthetically pleasing and user-friendly interface. In addition, their team is very accessible and open to input from users.

However, Lookback’s main draw is in the fact that it is specifically designed for usability testing. Researchers don’t have to jury rig other screen/audio/video tools, or make do with much more complicated testing tools.

Cons

Lookback’s one flaw is in the slightly convoluted workflow for setting up a remote observation session. This is due mainly to sparse documentation, as, with a little trial and error, testers are capable of setting up the session.

Overall, Lookback.io is a highly functional, user-friendly tool that will doubtless emerge as a popular option in the industry.

Applying a 5-Second Test to Project Alexandria

usabilityhub

Various usability testing methods exist for a variety of different insight- and data-gathering needs. Selecting a method should be tailored to the specific research needs of any particular individual or team, and dependant upon the current stage of their project. I decided to focus specifically on 5-second tests and one tool in particular, from UsabilityHub.com. UsabilityHub offers multiple usability testing tools, including:

  • First click tests
  • Navigation tests
  • Preference tests
  • Question tests
  • 5-second tests

I chose to test and evaluate the 5-second test offering as a usability tool. UsabilityHub’s FiveSecondTest.com is a simple yet effective product supporting an evaluator’s need for quick, automated tests that can be disseminated to multiple users at once or over a period of time.

Because users often evaluate and make up their minds about a website extremely quickly based off first impressions, a 5-second test is a useful method for gathering the initial impressions of users new to an interface. Humans have, on average, an 8-second attention span, making a 5-second test a good choice for gathering first impressions

To evaluate FiveSecondTest.com as a tool, I chose to use Project Alexandria for my 5-second test. The purpose of Project Alexandria is to provide users with book recommendations, producing a web of related titles. You can see the site in action by clicking the video link below:

Project Alexandria interface

To evaluate 5SecondTest as a usability tool, I uploaded this screenshot of Project Alexandria’s interface once it has produced a web of book titles:

screen-shot-2016-09-26-at-1-47-32-pm

It is then a simple matter of selecting however many questions you want the program to ask and whether or not you want any instructions posted before the test begins. You can see the test in action by clicking the video link below:

Project Alexandria 5-second test

I found this to be an effective tool for gathering first impressions of an interface. While I had to work with a static image, which couldn’t show Product Alexandria’s full functionality, I was still able to glean interesting reactions to the interface. The data I needed to draw my insights was summarized in the back end of the testing system. The system produces a report accessible via the tester’s dashboard that includes both the test results as well as demographics on users.

The end goal with a 5-second test, as with any usability testing method, is to gather insights and make recommendations for improvements based on those insights. A 5-second test can provide evaluators with quick, first impression data that they could then analyze and use to create deployable fixes that would increase a user’s likelihood of staying on a site after those first 5-8 seconds. From the data I gathered, I was able to discern a key factor about Project Alexandria; I realized, thanks to the nature of the 5-second test, that Project Alexandria’s interface does not make it abundantly clear what the site does, or what it produces for users (reading recommendations) right off the bat. A user must interact with the interface before they can see what the site produces. Even a small amount of introductory text, or more prominent help text, would make it easier for new users to understand what they need to do to reach their ultimate goal of receiving book recommendations. That is just one fix that I was able to develop thanks to the data my 5-second test provided me with. 

Overall, this is a simple tool for a fairly simple method. I would continue to use this particular tool for 5-second tests in the future, as the simplistic nature of the interface makes is quick and easy to produce multiple tests for multiple scenarios.

Design Critique: Amagansett Free Library (Desktop & Mobile)

Figure 1

Figure 1. Amagansett Free Library homepage. Click to expand.  

The desktop site for the Amagansett Free Library, as well at its mobile counterpart, inform users of the services, resources and events available to them as patrons of the library.

Issue 1: Lack of a navigation bar across all pages leads to poor discoverability

As can be seen in Figure 2 (below) the only feature vaguely resembling a navigation bar exists on the homepage and nowhere else, and is comprised of not an actual navigation system but rather what appears to be a list of the library’s digital resources.

Figure 2

Figure 2. Amagansett Free Library homepage with annotations. Click to expand.  

This row of digital resources on the homepage is misleading, giving the initial impression of a navigation system. Furthermore, there is a lack of any other navigation bar on every following page that makes maneuvering through the site especially difficult. See Figures 3 and 4 (below), a screenshot of the Amagansett Library’s Adult services desktop page (3) and mobile page (4), which shows the lack of a navigation bar, mirrored on every page, on desktop and mobile.

Figure 3

Figure 3. Amagansett Free Library adult services page, desktop. Click to expand.  

Figure 4

Figure 4. Amagansett Free Library adult services page, mobile. Click to expand.  

This issue leads to a poor level of discoverability. Navigating the site is difficult because of the lack of any discernable organize, top-level system. When that failing is combined with the fact that nearly every page (both internal and external) opens in a new tab, users will end up with multiple tabs and loose the path their search took.

Suggestion 1: Create a consistent navigation bar for every page

With a consistent, top-level navigation bar across every internal page, users will be better able to locate essential services that are currently appearing below the fold (see Figure 5, below). Pages such as Adults, Teen Resources, and Kids services, as well as the Library Catalog and Digital Library are all prime examples of links that could be worked into a navigation bar. Services such as Homework Help could be folded into a dropdown menu under Teen Resources or Kids services, as appropriate.

Figure 5

Figure 5. Content appearing below the fold on the Amagansett Free Library website. Click to expand.  

In addition, targets for all internal pages should also be set to open in the same window, making it easier for users to keep track of their search path within the library website.

Issue 2: Poorly managed hyperlinks

On the homepage alone, there are several signifiers that are false starts, either by appearing to be hyperlinked text (i.e., the underlined text in the portion of the homepage devoted to events reservations: “Reservations for all programs”), by including content phrased in such a way that it logically indicates a link to new content (i.e., the “Find out people are reading” text), or links to former services that are no longer offered (i.e. the SuffolkWeb Mail service under ‘Favorite email links’). See examples of all three issues in Figure 6 (below).

Figure 6

Figure 6 Amagansett Free Library homepage with linking annotations. Click to expand.  

The perceived affordance here is that one can click through to a new page and find the relevant information they are looking for, but these false signifiers will serve to confuse users and send them down a wrong, often frustrating path.

Suggestion 2: Clean up and regularly maintain hyperlinks and content

Hyperlinks should be updated to reflect current, active services only, which will provide users with a more professional and informative experience. Text that indicates a new page with relevant information should either be rephrased if no such page exists, or the appropriate page should be linked to from the text if it does exist.

Issue 3: Site map is neither intuitive nor obvious

The site’s mapping is not intuitive on the least. This issue ties back into the lack of a top-level navigation bar in that there is no discernible system of navigating from one page to another once off the homepage. Users must continually return to the homepage in order to find what they are looking for if they took a wrong turn the first time or second time or however many times it takes to locate the necessary information.

Whatever the conceptual model designer of the library’s website had in mind, it is doubtless not aligning with the user’s mental model. One approaches a library website not necessarily expecting to find the sleekest, most aesthetically pleasing interface, but certainly to find information that is cleanly and expertly organized. Services are not clearly identified on the pages themselves (see Figures 7a-7c, below), and page titles are often misleading. The Digital Library page, for example, is titled “ebooks_audio_video” (see Figure 8, below).

Figure 7a

Figure 7a. Poorly identified page of the Amagansett Free Library’s website. Click to expand.

Figure 7b

Figure 7b. Poorly identified page of the Amagansett Free Library’s website. Click to expand.

Figure 7c

Figure 7c. Poorly identified page of the Amagansett Free Library’s website. Click to expand.

Figure 8

Figure 8. Page title of Digital Library page. Click to expand.

Suggestion 3: Define a concrete information architecture for the website as a whole

To provide greater clarity and understandability for users of the library’s website, the information architecture of the entire site needs to be mapped out, rearranged (or developed with new content) as appropriate, and deployed on the website. This effort should include the incorporation of a top-level navigation bar present on every page, as this will provide users outside the library team with a better conception of the website’s layout and the best ways to locate the information, service or resource they are looking for.