DavidRolnitzky

Augmented reality technology is providing new ways for users to quickly gather information and explore their surroundings on mobile devices. For the final project in the User Interface Design course, my group and I designed a prototype iPhone application that uses augmented reality technology so that users can browse historical photos and gather information about their surroundings in real-time. Users can compare historical and current photos and information based on a current or selected location; see this information in a three-dimensional overlay using a mobile device; and save these locations and photos to a list of favorites.

I designed and led user testing for phWARP, including the design of the protocol, in-person qualitative interviews, and contextual inquiry sessions. In addition, I created paper prototypes, initial UI sketches, and the video prototype. Finally, I created the final, working prototype accessible from an iPhone. This was done using Adobe Fireworks and a framework for iPhone prototyping that uses a mix of jQuery and PHP to “iPhone-ify” a prototype on an iPhone.

Watch the video.

Fireworks, Unitid iPhone framework, iMovie, pen and paper

George Hayes, Michael Porath

MobileWorks is a simple employment solution for mobile phone users in developing countries, created in the Social Enterprise using ICTs for International Development course at UC Berkeley. Using what we refer to as "fair trade work" principles, the MobileWorks web application sends data entry jobs already being outsourced by companies in the West to the mobile phones of people at the bottom of the economic pyramid. MobileWorks was the first-prize winner in the ICTD design competition at the UC Berkeley School of Information, and is currently a semi-finalist in the Global Social Venture Competition at the UC Berkeley Haas School of Business.

I created a high-fidelity click-through prototype of the MobileWorks user interface, designed the user research protocol, and conducted user testing.

MobileWorks is an ongoing project. Learn more.

Adobe Fireworks, html, css

Philipp Gutheim, Anand Kulkarni, Prayag Narula

For the final project in Tangible User Interfaces at UC Berkeley’s School of Information, we were required to create a tangible product that allowed for manipulation of digital information with hands. For complete details about the goals of the project, the inspiration, how it was built, and an evaluation of the prototype by users during the final course showcase, check out the complete paper.

My team and I created a physical prototype called the TerraScope, a periscope inspired device that allows users to explore images and remote locations as they move. In collaboration with our project team, I created original sketches, worked out the mechanics, and constructed a working device in just under 3 weeks.

In order to obtain initial feedback on the prototype, we displayed the TerraScope at the UC Berkeley School of Information in December 2009 to an audience of faculty, students, staff, and community members. In general, people liked the design aesthetic, pleased by the cohesive look of the device and thought it encouraged interaction.

Flash, Python, Javascript, physical tools (lots of screws, nails, and spray paint!), Accel data iPhone app

Heather Dolan, Nathan Yan

Mozilla was looking for ways to improve Firefox retention by presenting add-ons in a more friendly way to less tech-savvy Firefox users. I presented the idea of creating a simple, self-service web application that would allow a user, with a few clicks of their mouse, to create a bundle of add-ons they could add to their Firefox browser.

I created and presented the concept and plan to the add-ons and development teams, including initial requirements, user flows, and the launch strategy. I headed a cross-functional team of web development, IT, design, legal, QA, PR, and external partners, from concept through product launch.

The launch resulted in a half million participants, and generated press in top online publications, including PC Magazine, Mashable, and Lifehacker.

The Mozilla Labs team decided to relaunch Personas, light-weight themes that let Firefox users personalize Firefox. They needed a new design for the site and a promotional plan to encourage new community contributed designs, increase downloads of the Personas add-on for existing Firefox users, and generate new downloads of Firefox.

In response I led a multidisciplinary design team, including web development, QA, and an external agency, and delivered a working website on-time and on-budget. In addition, I created the website specification, user flows, and wireframes.

The relaunched website and marketing program led to 10 million downloads and thousands of community contributions in just a few months.

Fireworks, Omnigraffle

The Store was a legitimate revenue source for the Mozilla Foundation when it opened in 2005. However, with a steady decrease in sales volume and traffic, it was in need of a major refresh.

I led a cross-functional launch team, including members of web developers, QA, IT, marketing and PR, and an external design agency that created a revamped visual design, user interface, and merchandise selection prior to the launch of Firefox 3. I was responsible for creating the new wireframes and information architecture, creating a merchandising and business plan, and working with our creative director and design agency to refresh the visual design.

The relaunch increased revenue by 75%.

Presenting a user with information can help influence or even change behavior. For the final project in the New Product Development Course at the Haas School of Business, my team and I designed a water conservation ecosystem to reduce water use called the “DrainBrain.” The system displayed real-time water consumption to the user on any networked device while using water within the home. We built a working prototype (complete with running water!) and tested it at the final course tradeshow.

I created and designed the prototype website which displayed real-time information. In conjunction with other team members, I conduced in-person interviews, created a user needs assessment, developed personas, and developed a number of water conservation concepts.

HTML, CSS, and Javascript, Adobe Fireworks, flow meter and wireless sensor, and a real shower

Joey Barr, Levi Goertz, Stephen Jayanathan, Hanh-Phuc Le, Tapan Patel

Kenmore decided to relaunch its laundry business and promote its new line of washers and dryers. As part of the relaunch, the company wanted to create a new section of their website that highlighted how their washer and dryer features and technologies were superior compared to other products available in-market.

I was the lead interaction designer on the project, and worked with the other members of the internal team and client to create a web experience that highlighted the product line. Deliverables included information architecture and wireframes.

Adobe Fireworks, sketching

Mobile apps are all the rage. Fluid, an organization that creates online experiences for global brands, was frequently approached by clients that were seeking guidance about whether or not to develop a mobile application or mobile website in addition to their existing web presence. Fluid needed a way to advise clients about which mobile approach would be most beneficial.

I wrote a whitepaper that could be used to guide clients to the most beneficial mobile strategy. In addition to the whitepaper, I created an easy-to-use cost-benefit calculator that would help clients and Fluid account team members to weight the pros and cons of developing a web application or mobile website.

Download the Whitepaper

Educational Technology Services (ETS) is Berkeley’s central campus resource for providing technology tools, training and support of faculty and staff. They wanted to determine whether or not a mobile version of the campus-wide course management system called bSpace should be developed. We conducted user experience research to determine whether or not a mobile version would match student needs.

I conducted user research for the project along with my team, which consisted of nine in-person student interviews, contextual inquiry, an online survey distributed to 700 students, and a competitive analysis. Findings were presented to ETS.

Alison Meier, Thomas Schulchter

Download the full report

Millions of people visit Mozilla.com every month. Many visit in order to download Firefox, while others may search for Firefox updates, support information, or how to get involved with the Mozilla community. Prior to this project, we treated every visitor the same way—they all landed on a page to download Firefox. However, after analyzing analytics data, I found that a significant number of visitors to the page (about 30%) already had Firefox.

I spearheaded an effort to communicate with the Mozilla.com site visitors in a more intelligent way: creating different content based on a visitor’s browser. I did the initial analysis, wrote the program plan, created wireframes, and worked with the web development and creative teams to implement an initial pilot test.

As a result of this data-driven design, bounce rates to these key pages improved between 4% and 18%, and download conversion (the number of people that landed on the page that downloaded Firefox) improved. Creating dynamic content based on browser type is now implemented permanently on the Mozilla.com website.