Case Study: Reportable
Simplifying and strengthening workflows for reporters and editors
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.
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.
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.)
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.
I worked closely with the visual designer to translate the needs of the users into a practical, no-frills design.
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.
Case Study: FishSource
A Digital Tool for Broader Engagement
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 expand its audience beyond the current users.
I was in charge of redesigning the information architecture and user experience, including extensive stakeholder interviews and workshops with the client. I worked in close collaboration with a strategist and visual designer.
I conducted interviews and working sessions with 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 went through their normal actions. The complexity of the content structure and the scientific language were significant barriers, in particular for new users.
After familiarizing myself with the terminology, the most daunting task was learning 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 so called Fishery Profiles: pages containing lots of data describing a stock or species structure at various levels of management. This data was mostly described as text, but not organized visually, making it very hard 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 structure of the content and allow them to jump to the 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 mostly led me to dropdowns: I was attempting to reduce the visual noise of all that data.
The downside of dropdowns is that useful information is hidden. We eventually landed on displaying the profile structure so users could 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 can click and reveal them and select those profiles directly.
Solutions and Visual Design
Following are the final visual designs, created by Zago.
The main call to action on the homepage is searching the database. The find-as-you-type feature gives 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 can send to their clients.
A friendly step-by-step tutorial and a re-organized FAQ section give 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 needs 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.
Case Study: Amigos
A new digital experience for teenagers with wanderlust
About the Project
Amigos, an international non-profit facilitating cross-cultural exchange for youth across the Americas, partnered with Zago for a complete brand redesign on the eve of its 50th anniversary.
This included a new, responsive website that needed to better engage their young audience (and their parents!).
I was in charge of the UX, which included interviews with students, staff, and board members, a content audit, sitemaps, flow maps, a competitive feature analysis, and high fidelity wireframes.
To get a grasp of the type and amount of content Amigos housed on their website, I started with an extensive content audit, mapped out in a spreadsheet and sitemap.
I uncovered expired links, content that was at best difficult to find, and highlighted 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 heavily reducing the global navigation, allowing users to make choices gradually as they learn 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.
These new ideas were explored in my first concept sketches and presented to the client to help them start visualizing the options for content organization.
The visual design team used my sketches to create visual 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.
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, I built a narrative for the Home, Program, and Project pages. 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.
HRW is continually prototyping new ways to communicate effectively and engage the human rights community to impact systemic change.
New template designs for their digital publications introduced a navigation, quick links to 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 - a University of Geneva public lab - conducts experiments, supports citizen science projects, and provides an educational setting for young students to explore biology.
By highlighting key, at-a-glance data, offering shortcuts, and designing an easy-to-use booking system, teachers can effortlessly plan a visit on the new responsive website.
This non-profit eco-education center based in Southern California wanted to expand their audience.
By changing the information architecture and by creating a modular system to seamlessly combine stories, events, and products, the website can now showcase their vast amount of original content and draw users globally. Check out the new site here.
It gets me from A to B efficiently, economically, and effortlessly (most of the time). Conveniently, it pretty much sums up my approach to UX.
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 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.