About the Project

The idea for Reportable came from my experience as a producer for Human Rights Watch. HRW field researchers were increasingly using mobile devices to document their investigations. This research then flowed to editors who reviewed the findings and distributed media reports. I identified a need to streamline this process. Reportable would simplify and optimize workflow for both the reporter and editor, and as a result decrease the chance for errors and inaccuracies.

My Role

After leaving HRW, I partnered with Zago and Codewalla. With a grant from the Knight Foundation we were able to create a fully working prototype.

How it Works

Reportable allows reporters to annotate and share media from their mobile devices. The file’s metadata is embedded so that the date, time, location, and caption content is always connected to the media. Users are also able to export a summary which lists the thumbnails and description of each media file.

Discovery

I conducted a dozen interviews with reporters and editors to test hypotheses, define archetypes and identify use cases.

My key assumption was confirmed: there wasn’t a clear workflow between parties. Furthermore there was concern about losing or misplacing the data that matched the media, such as names and contact details for persons that were interviewed.

With the information I gathered from the interviews and a competitive analysis, I was able to plot out Reportable’s features on a priority chart. I determined which features to prioritize along with the developer’s input and within the grant’s budget.

There was one costly and complex feature that I dropped: Encryption. While essential for a few use cases, it wasn’t a top-of-the-list need for the majority of the app’s intended audience. (This was pre-Snowdon.)

Wireframes

I initially hand-sketched to quickly test tappable prototypes using Pop.

After a round of testing I made small tweaks.

• My prototype was filled with content, but first-time users would face a blank screen upon first opening app. I added a tooltip to encourage the user to begin by importing or recording a file.
  
• The summary report feature created confusion when it magically appeared after selecting and exporting media. As a result I inserted a few extra steps so users would experience a more gradual creation of the summary, including a preview.
  
• I marked captioned media on the home screen.
• I added on-boarding screens.

Visual Design

I worked closely with the visual designer to translate the needs of the users into a practical, no-frills design.

What's Next

The prototype allowed me to only partially validate the app. I learned that users were often excited about one particular feature, but not necessarily all equally. As a package of features Reportable was useful to a niche group of users — too niche in my opinion to continue pursuing the creation of the app without a clear business model. I do believe there is an opportunity to white label the app for specific use cases within an enterprise. Stay tuned.

About the Project

A leading Executive Search firm was transferring their relationship management database to mobile in order to give their global consultants remote access to more than 2 million contacts and data. In short, a proprietary LinkedIn. The first phase exclusively focused on the iOs app for iPhone. An additional set of features and an iPad release were added in a secondary phase.

My Role

My task was to transform an existing desktop app into an easy to use mobile app containing the key performance data most likely needed while on the go. I led the UX, working with two consultants at the start of the project. I worked in close collaboration with an art director from the get go. My tasks included conducting stakeholder interviews, writing functional requirements, wireframing and overseeing app copy as well as detailed quality assurance.

Discovery

We kicked off the project with a training of the existing desktop program. We then held extensive interviews with a few of the stakeholders. I asked about their workflow by going through a typical work day, but also talked through urgent scenarios that required quick problem solving, such as needing data 5 minutes prior to a client meeting. We discussed the tools and devices they used, the various environments they worked in and the type and frequency of communications with associates and clients.

We then led a comprehensive workshop session with the client in which we presented our design principles based on needs and painpoints that surfaced during the interviews and our understanding of the brief. As a starting point for discussion, we presented a feature matrix and showed an array of comparable (public) products.

We also showed our first concept sketches and ideas.

One typical tool consultants used was a call list that typically included clients, candidates and colleagues they needed to be in touch with. To manage this call list, that took on various formats depending on the consultant, they used their assistants, their calendars, their emails - all workarounds for a common problem. We proposed to make the Call List a prominent feature of the new app.

One of my concerns early on was adoption. I had little doubt the app was answering a real need, but I wanted it to be more than just practical. The must-have features in the app — searching for candidates, reviewing ones workload and the people to call — are all necessary tasks, but don’t necessarily provide new insights. Rewarding users with new knowledge would give them reason to stay. I proposed to include a Recent Activity feed showing the latest notes that have been added to an assignment.

Requirements

I followed up with my interview subjects using short surveys to get into more specific details and then drafted the first set of business and technical requirements.

Together with the client and developer we divided the requirements in must-haves for the first release, marked priority features for future releases, and separated requirements that were iPad only.

Prototype

The visual designer then started designing the screens based on my handsketches. To present flows to the client, I like to use InVision. Using the visual design engages the client better than wireframes. It is a great tool that allows us to quickly test tasks.

Wireframes

iPad

The iPad features focused more on workload management. Users could add candidates to assignments and call lists, edit key data on person records, move candidates along a pipeline. Some of these tasks were available to do in bulk. I created taskflows to work through these various actions with the client and developers.  

Results

“Fun to browse through, “allows me to feel more up to date”

“We will not only save critical time, we will have more fun as well!

“very impressed with the app”

“Killer app”

Next Steps

Next Steps: desktop app.

About the Project

FishSource is a publicly accessible database of fisheries that gives an overview of the biological and environmental health for a fish stock or species. It is one of the most extensive resources available of this kind and is run by the Sustainable Fisheries Partnership (SFP), an NGO dedicated to improving the health of oceans.

While important to many actors in the commercial and conservation sectors, the FishSource website was cumbersome and complex, making it hard to grow its audience beyond the current users.

My Role

I was in charge of redesigning FishSource’s information architecture and user experience.

Discovery

Together with Zago’s strategist, I conducted extensive stakeholder interviews and working sessions with the client, industry partners, academia, and internal staff across the globe. In order to dig deeper and uncover pieces of information that may not have surfaced in conversation I used the screenshare feature on Skype to observe users as they navigated the database. The complexity of the content structure and the scientific language were significant barriers, in particular for new users.

Information Architecture

After familiarizing myself with the terminology of the fishery industry, the most daunting task was to learn the existing information structure of the data. I deeply identified with the hurdles new users were facing!

The FishSource website is essentially a database of “Fishery Profiles”: pages containing lots of data describing a stock or species structure at various levels of management. This data was primarily text (and overloaded at that), and not organized visually, making it difficult to parse. Re-designing the profile page was the first task I tackled.

Many Fishery Profiles in the database include so-called “nested profiles.” We needed to clearly display the relationship between the general profile and all the fisheries within it, and make sure the data was visible. I chose one of the more complex profiles featured on the site to tackle the profile page’s information architecture. Say hello to the Bigeye Tuna and its 23 (!) nested fishery profiles:

How to clearly navigate that data became one of the main issues to address.

Meanwhile, I introduced a sticky vertical navigation to give the user a sense of organization and content structure, and make it easy to jump to a desired section. I also involved the visual designer in the early stages, so that we could consider iconography and color as supporting elements almost immediately.

My main objective: structure the content in such a way that users could digest information at a glance and engage deeper as needed.

My research to resolve the inclusion of the nested profiles led me to dropdowns in order to reduce the visual noise of the plethora of data.

The downside of dropdowns was that useful information was hidden. We eventually landed on displaying the profile structure so users would be aware of additional fisheries nested within the page and select them without having to first scroll through the “master” profile.  

A similar concept was applied to the Search Results page. In the summary description for each result, I pointed to the nested fisheries. Users could click and reveal them and select those profiles directly.

Solutions and Visual Design

I worked in close collaboration with the visual designer. Following are the final visual designs, created by Zago.

The main call to action on the homepage was searching the database. The find-as-you-type feature gave users a head start on their query.

The redesign introduced filters on the search results page and key data for each listing. Users can engage with summarized content without having to enter a profile page.

We made the top of the profile page work harder: the summary provides at-a-glance data, with quick links to each section for users that need to know more. The summary is downloadable so users could send to their clients.

A friendly step-by-step tutorial and a re-organized FAQ section gave users the opportunity to familiarize with the terminology and the structure of the database.

Diving into the world of sustainable fisheries proved challenging but allowed me to deeply empathize with the broader audience FishSource needed to engage. The project gave me a unique experience in designing UX of complex and abundant data presented to users not as familiar with the subject matter.

About the Project

Amigos is an international non-profit facilitating cross-cultural exchange for youth across the Americas. They partnered with Zago for a complete brand redesign on the eve of its 50th anniversary. This included a request for a new, responsive website that needed to better engage their young audience (and their parents!).

My Role

I was in charge of the User Experience, which included interviews with students, staff, and board members, a content audit, sitemaps, flow maps, a competitive feature analysis, and high fidelity wireframes.

Approach

I led with an extensive content audit to get a grasp of the type and amount of content on the Amigos website. I mapped out my findings in a spreadsheet and sitemap.

With this approach, I was able to uncover expired links, surface content that was at best difficult to find, and highlight confusing taxonomy and information architecture.

The challenges identified in the content audit confirmed the need to overhaul the information architecture. I made a case for significantly reducing the global navigation to allow users to make choices gradually as they learned more about Amigos’s culture and programs.

I created customer journey maps that broke down the various paths from browsing content to program application to show how the new navigation simplified the user experience.

Wireframes

I explored these new ideas in my preliminary concept sketches which I presented to the client to help them visualize the options for content reorganization.

The visual design team used my sketches to create mockups and test directions.

Once the direction was chosen, I worked on the wireframes for desktop. I had to seamlessly incorporate sub-pages for local chapters — building in flexibility for individual needs — and improve the experience of the lengthy online application process.

Visual Design

Instead of creating high-fidelity wireframes for smaller devices, I worked side by side with the visual designer using quick back-and-forth sketches. For mobile, I reduced some of the elements such as the Program Slideshow on the homepage and created a new navigation and menu.

Using a combination of various forms of media, testimonials and practical information, my objective was to create a cohesive story about the Amigos experience — and at the same time design a clear path to registration.   

This storytelling aspect of the project is where I felt my past experience as a multimedia producer brought tangible value. I was able to leverage the Amigos’ varied content and use it as building blocks to explain the rich experience of their programs.

Human Rights Watch

HRW is continually prototyping new ways to communicate  effectively and engage the human rights community to impact systemic change.

I created new templates for their digital publications introducing improved information architecture, better integration of media, and a variety of in-line modules to break up the powerful reports. The latest template was applied to the 2017 World Report.

Bioscope

Bioscope - a University of Geneva public lab - conducts experiments, supports citizen science projects, and provides an educational setting for young students to explore biology.

I highlighted key, at-a-glance data, offered shortcuts, and designed an easy-to-use booking system, so teachers can effortlessly plan a visit on the new responsive website.

The Ecology Center

This non-profit eco-education center based in Southern California wanted to expand their audience.

I redesigned the information architecture and created a modular system to seamlessly combine stories, events, and products, so the website can showcase the vast amount of original content and draw users globally. Check out the new site here.

The helpful to know

• I like projects large and small, corporate and non-profit. The variation keeps me on my toes and learning at all times. Freelancing gives me this opportunity.
  
• I am an all-hands-on-deck/wear-many-hats kind of person. I am not a graphic designer.
  
• I have a for-profit and non-profit hourly rate. Startups fall somewhere in the middle.
  
• I use Sketch for wireframes, InVision for prototypes, Slack for project management. I strive for efficiency. Whenever possible, I will opt for quick sketches for maximum effect.  
  
• I am happy learning about new prototypes or ideas. I am also curious about your current digital frustrations. Buy me a coffee and I'm all ears.
  

The nice to know

I studied architecture in Delft. In my graduation thesis, I proposed a redesign for a then unknown piece of New York real estate called Governors Island. Then I moved to Tokyo, where I worked for the architectural firm Sanaa, and moonlighted as a fashion journalist. When I landed in New York, I worked for the London-based publishing house Trolley Books and made bags in my spare time.

I spent seven fulfilling years at Human Rights Watch as a multimedia producer. I juggled many roles: producing magazine-like printed reports in the early days, moving onto award winning features when Flash was still a thing. I loved working closely with our design partners in London: Fruitmachine. Together, we launched a feature built in html5, and produced a few apps in between.

I created Reportable, an app that allows users to annotate and share media files from their mobile devices. A grant from The Knight Foundation and a UX course at General Assembly allowed me to spend considerable time researching the audience base and prototyping the app.

In 2015 I became a Startup Leadership Program Fellow and learned a thing or two about term sheets. I also returned to General Assembly to be a TA on the User Experience Design course.

My home is in Brooklyn. Zago is where I have my desk. I bike between the two. I occasionally post on Twitter and more frequently on Instagram. My firstborn has a website, my second-born is still waiting for one.

Get in touch.