Wikipedia-logo-v2.svg.png
firefox_logo-wordmark-horiz_RGB.png
simple.b-dis-jpg.hac066a998608af0aaf92baee6f31c572.jpeg
ford.jpg
google-campus-building.jpg
Wikipedia-logo-v2.svg.png

Wikimedia Foundation


User experience design for the Wikimedia Foundation, the non-profit that runs Wikipedia and many other knowledge sharing projects around the world.

SCROLL DOWN

Wikimedia Foundation


User experience design for the Wikimedia Foundation, the non-profit that runs Wikipedia and many other knowledge sharing projects around the world.

Role on WIKIMEDIA work

Responsibilities I had as UX consultant for the Wikimedia Foundation's Wikistats 2.0 project included project scoping, information architecture, information design, wireframing, research design and collection, and final visual design.


WIKISTATS 1.0

Over four months, I lead design work on on the major overhaul of the Wikistats dashboard. Wikistats are the compiled metrics that help editors, community organizers, and press understand how Wikimedia projects like Wikipedia are being used. At the start of the project, I met with the developer that created and maintained the current version of Wikistats to better understand what data was most requested by people coming to the site and what audiences were accessing it. An information architecture was developed to support the data needs for the primary audiences the team defined together. From the information architecture, navigation models were explored and a site layout was constructed. Initial wireframes were posted for the community to review and give feedback on. Based on community feedback, initial visual styles were designed to support a prototype for round 2 of feedback with the community. The project is currently being prototyped and shared with the Wikimedia community.

Existing Site

Information Architecture

Wikistats Nav Model Final.png

Final Design

firefox_logo-wordmark-horiz_RGB.png

Mozilla


User experience design for the Firefox desktop browser privacy and security team

Mozilla


User experience design for the Firefox desktop browser privacy and security team

Role on MOZILLA work

Responsibilities I had as the Lead UX designer for the Privacy and Security team included research planning and facilitation, feature definition, experience flows, sketches, wireframes and prototyping (invision). I did final visual design on some pieces and collaborated with a visual designer for final visual execution of other pieces like icons, colors, etc.


Tracking Protection

Over the course of a year, I lead design work on a high profile company initiative to stop website tracking for users browsing privately in Firefox. The experience consisted of educating people about website tracking and helping them understand when sites were tracking them. As part of the work, we conducted diary studies with users to better understand their mental models around website tracking and also gauge how they interpret website breakage when tracking is prevented by Firefox. The final design incorporated research findings to provide a clear onboarding tour of this feature from several touch points and a browser UI that was not disruptive to the normal browsing experience but gave feedback when trackers were being blocked on the user's behalf.

Private Browsing Mode (Original)

Enhanced Private Browsing Mode with Tracking Protection (Live as of Nov 2015)

Tracking Protection Panel (Live as of Nov 2015)

Tracking Protection Sub-Panel (Live as of Jan 2016)

Control center

In parallel with working on Tracking Protection in Private Browsing mode, I developed a new design organization for the area of the url bar where users can see more information about the site they are on. For each site a user visits, they can see if it has been verified as secure by a third party and also what permissions they gave the site access to such as microphone, video camera or location. After auditing the current feedback users get in the url bar and the panel that opens after clicking on the lock icon, I consolidated the number of states and reducing the types of icons used to make it more clear for users at a glance whether or not the site was secure. For advanced users, an information panel with an overview and a deeper view of the site's security information was accessible to help explain any differences in state. A second version of the designs below are in progress to incorporate site permissions.

A nice medium article was posted here by my team's engineering lead Panos: https://medium.com/@pastith/feeling-safer-online-with-firefox-b9fe13af6600

Previous Versions of Site Information Panel and Permissions Dialogue

firefox-media-permissions.png
privatei-firefox-location-prompt-100658814-medium.png
0-S19mZWKY8PlikHx7.png

Updated Version of Site Security and Permissions Panel (Control Center)

Major changes included 1) the addition of an "i" icon (soon also added by Google chrome in their url bar)  2) Showing permissions icons with a strikethrough if the user does not grant the site a permission 3) badging the "i" icon with a dot when permissions are allowed and with a red dot for a live video or audio permission grant.

URL Bar @2x.png

 

Updated Version of Permissions Dialogue

Main changes include removing the X to close the dialogue, requiring the user to engage with the questions they're being asked. Removing drop-down choices to simplify the number of options a user is presented with. Addition of a check box to enable a user's choice to be permanent. Check box is unchecked by default to protect user privacy and not support accidental granting of permanent permissions.

Question Location @2x.png
simple.b-dis-jpg.hac066a998608af0aaf92baee6f31c572.jpeg

Fitbit


Interactive experience design for web, mobile and devices

Fitbit


Interactive experience design for web, mobile and devices

Role on fitbit work

Responsibilities I had as product designer included research planning and facilitation, feature definition, persona development, experience flows, sketches, wireframes and prototyping (invision/flinto/proto.io). I collaborated with a visual designer for look and feel, visualization styles and final visual execution.


Dashboard Re-Design

Over the course of a year, I lead a major re-design project for Fitbit's web product that supports viewing of data collected from its hardware devices (wireless activity trackers or Wi-Fi scales). The goal was to better support customization for users that head very different goals from one another, whether to lose weight, be more active, eat better, etc. A second goal was to make the Fitbit dashboard scalable to support new hardware product features. The designs below of the two intermediate steps to get the current design that is in Beta and launched Summer 2013. We are currently working on refinements based on the beta feedback and to support new information needs. The Beta dashboard is live at: www.fitbit.com for all new logged in Fitbit users.

Beta Dashboard (live late 2013)

Expanded States of Selected Small Tiles from Beta Dashboard

Original Dashboard (2011) and Interim Dashboard - Day View and Month Views (2012)

Fitbit iOS App Re-Design

In addition to working on the Fitbit website and user dashboard, I also worked on improving the mobile app dashboard and navigation paradigm. Its original state had tiles of content that users could not engage with and were forced to use the bottom tabbed navigation. Over time, our tabbed navigation outgrew our content and users often had to go into our app's More tab to be able to use daily features. To say the least, it was sub-optimal. To land at our current design, I designed and prototyped many different variations to play through different ways our app's navigation could change to be more scalable. The final design was a great improvement over the former version as it consolidated our tab structure and supported a more intuitive interaction of tapping on dashboard content to see more about it.

iOS 7 App with New Navigation Architecture

Interior Sections accessed by tapping a dashboard tile

Interim Dashboard and Original Dashboard

Aria WiFi Scale Setup and Interactive Experience

As the first interaction design at Fitbit, the Aria scale project was one of the first Fitbit hardware products I could leverage my design process to improve. I contributed on both the online tools, primarily new weight features such as an interactive weight and body fat graph, as well as a daily weight tile on the Fitbit dashboard. I also conducted out of box research to gauge how clear the setup process was for external people that had no context of what the scale did or how it worked. My research, prototyping and design recommendations greatly improved the end product.

Aria_101_1.jpg
ford.jpg

IDEO


Research-driven design and strategy work across many different industries.

IDEO


Research-driven design and strategy work across many different industries.

ROLE ON IDEO WORK

Responsibilities I had as interaction designer included defining the value proposition and experience strategy, persona development, user research design and facilitation, experience flows, sketches, wireframes and prototyping (invision/flinto/proto.io) and hand off of interaction design guidelines. I collaborated with a visual designer for look and feel, visualization styles and final visual execution.


MyFord Mobile Interactive Experience

In collaboration with Ford Motor Company, I worked with a team of designers and prototypers to create a connected mobile app for Ford's new Focus EV and Hybrid vehicle owners. The goal of this app was to help relieve anxiety most new electric vehicle owners have around managing battery level and optimizing fuel efficiency and performance while also getting people excited about driving efficiently. 

Our team conducted broad research with existing and soon-to-be electric or hybrid vehicle owners across the country to better understand their needs. We followed with several iterative design sprints that evolved into prototypes of a set of key features to communicate how the app works and also to enable Ford's CEO to demonstrate it at CES. This project one an 2013 IxDA Interaction Design Award. The app is available currently from the iTunes store here.

Supporting website to go along with the mobile app

Tendril Vantage Home Energy Monitor 

In collaboration with Colorado-based energy startup Tendril, I worked with another interaction design to create the device interactive experience and supporting web portal for users with demand pricing energy plans to take control of their bill and usage. This product debuted at CES in 2010. It was piloted but did not scale in the market as energy companies were unwilling to subsidize its high cost.

Various States of the product including ambient display, active display, setup and the online Vantage Portal website to see energy use patterns and get recommendations

State Farm Next Door Digital Experience

In collaboration with State Farm, I worked with a team of architects, writers, business stragists and designers to craft a physical space with several service offerings for young to middle-aged adults in need of financial and life planning advice. The space also existed to be a community hub for locals to meet, participate in workshops or reserve space for their own events. I worked on the digital tools including the website (mobile and desktop), a large-scale digital community events board and collaborated on an iPad coaching tool for advisors to use. Next Door launched in 2010 and is thriving.

Website where people can sign up for classes and coaching at Next Door in Chicago

Sign-up Flow Diagrams and Wireframes of Web and Mobile content

Mobile Patient Monitoring Experience *client confidential

This project was done for a major pharmaceutical company and has been blinded to protect its confidentiality. The design was for a mobile device that patient's received in a box with their medicine that enabled them to track their health progress over time. 

Additional screens and screen flow of monitoring experience over time

google-campus-building.jpg

Google


Location-based search experience design for mobile web

Google


Location-based search experience design for mobile web

ROLE ON GOOGLE WORK

Responsibilities I had as an interaction designer included feature definition, persona development, experience flows, sketches, wireframes and and final visual execution.


Mobile Web Place Search

One of my main projects at Google was improving the mobile web search results that appear when a user looks up a place by name or category, ie. chinese food, or Paxti's Pizza. I participated in cafeteria studies with paper and digital prototypes to refine down concepts that presented different types of location information to distill the result to its most useful form.

Recent Search Interaction

 I also worked on the nearby interaction that showed up on the Google homepage in mobile browsers. This feature surfaced results recently viewed on the users desktop/laptop for easy access on the go.

Mobile Web Movie Search

For local movie search, I designed an way for users to easily interact with the details and showtimes of movie results in context of the Search results list.