Loading...
.

Data Calculator Redesign

Client: T-Mobile

Our goal in redesigning the data calculator was to generate an easy to use interaction pattern to help customers evaluate how much data (between emails, streaming video, and more) they might consume in a month and what plan best fits their needs.

Based on observing users as they interacted with the existing calculator, we came up with a new design which answered these 3 guidelines:
Simple: The controls should be known and obvious to the customer. It should use natural language and asks questions that the customer has to think very little about to answer meaningfully.
Fun and playful: The data calculator should allow a customer to easily change setting or play with controls that is no risk and has not perceived cost (page loads, wait time, etc). It should have immediate feedback and surprise customers at times.
Informative: The data calculator should leave the customers with a better understanding of what they can potentially get out of their data plan, and feel confident that they are choosing the best data plan for their usage.

I was part of the team to create several different data usage interaction patterns as well as the interactive Axure prototype. Go to website to play around with the final product.



  • This is one of the initial wireframe sketches: each one of the bars on the left represents a different activity that influences the amount of data usage. Dragging them forward or backward will influence the total amount of data usage represented in the vertical bar on the far right. See this wireframe in action in the next slide.
  • More sketching... The main problem we were trying to solve is that users don't know how to correctly choose a plan because they don't understand data throttling. The existing 'Data Calculator' at the time reinforced this wrong understanding.
  • Sketching on the white-board.
  • This wireframe uses personas as a starting point. Users can choose a persona they identify with to see sample usages. Alternatively, users can try their own, by "pushing" the handles next to each icon which pushes water into the well on the right, indicating average data usage and giving a plan recommendation.
  • The super simple wireframe helps even first time users use the tool easily while also having fun with it. Instead of giving numbers to indicate how many emails or web pages a person views per day, we decided to use words that are more intuitive such as once in a while and regularly.
  • Final visual design. Click on image to view live site.

 

Optimizing Store Environment

Client: Confidential

In this project we helped a multinational software company located in Washington State to rethink their physical retail store experience. Our goal was to create experiences that would define the store as a retail environment with a unique identity – a place where customers not only interact with products but are immersed in everything that is innovative and interesting about this company.

We started out by building the layout of the store and the different ideas we had for it as Lego pieces that can be moved around to create the perfect story of a shopper from the time she passes by the store window at the mall to the time she leaves.

The result is a rich, interactive experience that might engage customers to increase their loyalty to the brand. What customers get in return are enhanced, personalized experiences within the store, whether they are interested in playing, learning, communicating or just hanging out.

For this project I developed the ideas, and created sketches, presentation boards and the physical and virtual store models that allowed us to engage in a different and unique type of conversation with ourselves and the client.



  • Building models of the store & the store activities.
  • Gathering sketches at the white-board for a team brainstorm.
  • Concept Overview
    (The following slides will show each individual area of the store)
  • Using the store entrance to draw people in, this is a fun game that rewards its winners with discounts and freebies, while creating promotional engagement.
  • This idea leverages a Kinect hack to create physical interactions that draw a crowd.
  • The window displays become a platform for conversation and excitement. This gives people a reason to stop, engage, and increase chance of store entry.
  • The store becomes a playground for "catching" cloud containing freebies.
  • Digital displays inside the store become a bulliten board for people to engage with.

 

Visual Themes for Web, Messenger & Mobile

Client: Microsoft

Taking the Windows 7 desktop wallpapers and mapping them to the different Windows Live products was quite challenging. The goal was to make each theme work for web, messenger and Windows mobile. Of course each of these devices is very different in scale, resolution, the amount of text on them and the way people interact with them. The general look of each theme had to remain consistent across all devices.

I loved this design work because I got to work hands on with extremely high fidelity illustration assets, created by artists all over the world that Microsoft had chosen to design their desktop wallpapers. While working on these designs my goal was to simplify the presentation of each theme as it transitions from desktop to other devices, while still maintaining a strong resemblance to the original artwork. In this way I was able to accomplish a strong visual user experience for each product.



  • Presented in the following slides are the themes I created based off of the Windows 7 Wallpapers. The themes were designed for a variety of products including Mobile, Messenger and the Web.
  • Wallpaper design by Adhemas Batista
  • Wallpaper design by Hvass Hannibal
  • Wallpaper design by Kai Sunny
  • Wallpaper design by Kat Leuzinger
  • Wallpaper design by Klaus Happaniemi
  • Wallpaper design by Kustaa Saksi
  • Wallpaper design by Nanospore
  • Wallpaper design by Osmand Nosse
  • Wallpaper design by Pomme Chan
  • Wallpaper design by Punga
  • Wallpaper design by Red Nose Studio
  • Wallpaper theme by Yoko Kondo

 

TriPlay: Total Mobile Life

Clients: Deutsche Telekom; Pelephone Communications

TriPlay develops converged rich media communication solutions across Mobile, TV and Web based platforms. The idea is to relieve the user from the barriers of technology, devices and networks. Whether you're at your PC, at home in front of the TV, or waiting for the bus with your mobile, messages come directly to you, formatted for your device.

I joined the company in 2005 when it was still a wee seed and helped grow it into its robust glory days. Here are a few selected highlights of my 3+ years with the company.

Our 2 main clients were Pelephone Communications and Deutsche Telekom, which whom we worked to develop "TriPlay CrEWs", a product that enables a group of friends to communicate with each other using TriPlay's Super Messaging platform.

As UX team leader in a small start-up, I owned all the designs we produced as a team, which included the full design cycle, from initial conception, to final visual representation.



  • Here's an example of a flow with corresponding wireframe and documentation. A lot of my work at TriPlay included building deep understanding of a project, and then distilling that down to compact, usable information for others on the team to use.
  • TriPlay homepage design 1
    We went through a lot of these, as we changed the design of the HP for each new client it was presented to.
  • TriPlay homepage design 2
    Designing a totally new look for the same concept each time was challenging, but mostly it forced out-of-box creative thinking.
  • TriPlay homepage design 3
  • TriPlay homepage design 4
  • T-Style Landing page
    TStyle is an application used to glamorize your mobile phone by creating ringtones, wallpapers & watchtones. This page prepares the user for the experience he will have using the product. Pressing each of the buttons below fills the phone screen with appropriate content.
  • T-Style Desktop Widget
    The widgets enable the user to drag and crop songs to create ringtones; edit videos to create watchtones, and refine pictures to create wallpapers - all for the purpose of glamorizing your mobile phone.
  • Web to Mobile interaction flow
    At TriPlay I built many, many wireframes and flows, which mapped out the functionality for our projects, examining the future of mobile communication. This set describes a flow of leaving the service. I can get really, really geeked out on wireframes. I love mapping out the strategy and scenario flows.
  • Mobile messaging flow
    This is a diagram flow I created to display the features for a humanized mobile communication project. Features were culled from hundreds of one-sheets from brainstorms we taped up all over the walls. This is my way of collecting them into a structure and identifying the major concept areas, and seeing where they fit with the overall goals.
  • Selected mobile screenshots
  • TV Interaction
    If a user chooses to view a message while watching TV, the television display window becomes small and TriPlay application takes over the space for optimal communication.
  • Print Collateral

 
 

Icons, Logos, Banners

Various Clients

Icons are quite specific sort of illustrations. They should be simple and easy to understand; they should share the same style within one application or website; and they should be drawn pixel-by-pixel. These sets of icons and other illustrations were made in this way.



  • I designed these Hero banners to promote IE9 download. There were a lot of constraints that needed to be taken into account, such as colors, style guides, use of pictures. These constraints guided the design direction to banners that are bold, bright and simple.
    Client: Microsoft
  • The video strip on the left is the Live Messenger Video icon. I created a disabled state for this icon using the icon's photographs as a reference. My goal was to simplify the image (after all, this is the disabled state), while maintaining a strong resemblance to the original icon.
    Client: Microsoft
  • Vector based object icons for Windows Live Messenger.
    Client: Microsoft
  • Black and white glyph icons, created off of Microsoft's Live icons.
    Client: Microsoft
  • Sketches for a new Backpack icon. The backpack is a place where users can store all their media for easy access from either the mobile phone or their personal desktop.
    Client: TriPlay, Inc.
  • Various media icons, created in Flash.
    Client: TriPlay, Inc.
  • Logo representing The Place application. The big 'P' is taken from the company's original logo.
    Client: Pelephone Communications
  • These media icons were made specifically for a client presentation, and later on changed colors to fit different presentations.
    Client: TriPlay, Inc.
  • Icons for a medical application.
    Client: Motorika
  • Design of an internal site for the company representatives to use while treating customers.
    Client: Alvarion
  • Fun flash animated winks, created for a WAP messaging system. These were made as customizable e-greeting cards. After creating the winks, I designed a fitting mobile screen for each of them, so users know what they are sending without the need to go back to the attachment to check what it is.
    Client: TriPlay, Inc.
  • Media icons for Sync Space mobile application; representing movie, photo album, music and mixed media.
    Client: Pelephone Communications
  • Mobile, WAP and icon desgns for various applications.
    Client: TriPlay, Inc.
  • City Elements
    I created this theme called "City Elements", to be displayed as a wrapper on a mug. It was entered to an online design competition, that included the tools for designing in the website itself. This meant you couldn't use any of the known (Adobe) tools and simply upload your design. I entered this competition as a challenge to work with tools I wasn't familiar with, and entered 4 different themes.
  • Good Morning
    I created this theme called "Good Morning", to be displayed as a wrapper on a mug. It was entered to an online design competition, that included the tools for designing in the website itself. This meant you couldn't use any of the known (Adobe) tools and simply upload your design. I entered this competition as a challenge to work with tools I wasn't familiar with, and entered 4 different themes.
  • Celebrating 80 Years to the Jewish Agency
    Another mug design competition I participated in was created in search of a respectful artifact to represent 80 years to the Jewish Agency. I decided to illustrate meaningful Jewish symbols that are an integral part of everyday Jewish and Israeli lives.

 

Emoticons

Client: Microsoft

I worked with a team of top notch pixel perfect designers to design new icons for Windows Live products.

The process: Initial concept/s sketched on paper; Drawing the icon in Illustrator; Fine tuning in Photoshop (adding shadows, glass, clarity, etc.); then Converting to ICO. The emoticons presented here are a few chosen ones I created in Illustrator, 256X256px for marketing purposes. The rest of the set is here.

I loved working with this creative team! In the initial process of designing desktop icons for (back then) the future OS Windows 8, we did a lot of exploring and blue sky exercises.

The emoticons in Live Messenger are used as a fun communication tool and we managed to give them a fresh new and simple look.




 

Redesigning the Prepaid Activation Experience for Internet Devices

Client: T-Mobile

My role in this project consisted of everything from the left to the right brain of UX design.

I worked towards improving the user experience of the existing prepaid platform while innovating new designs for future thinking. The experience included the full cycle, from the time a user enters the T-Mobile site to make a purchase, receiving the device, activating it and finally being able to use it from anyplace at anytime. I collaborated closely in an agile environment with a business analyst, visual designers, project managers at Ascentium and T-Mobile, as well as project leaders at Vesta (who were in charge of T-Mobile's finances) and business executives.

I was in charge of the prototyping, information architecture, user flows, setting forth (and optimizing) user experience standards which included interaction patterns and aesthetics/look and feel.



  • Defining a new ideal architecture user flow: fewer steps, more guidance and options in cases of failure.
    This shows my ability to see a project in a comprehensive strategic way, and to map it out so others can follow that vision.
  • Wireframe example 1: Choose how to refill your prepaid card
    Relevant content is displayed or hidden based on the users selection. View how this works in the next slide.
  • Wireframe example 2: Managing saved payments
    I managed to solve the challenge of including the necessary business logic to save or delete payment methods based on attrubutes in the users account. View how this works in the next slide.
  • Visual Design Style
  • Project Outcomes
    - Making it easy and fast for people to go through the activation process;
    - Creating options that save money;
    - Illuminating the big picture;
    - Through a close dialouge with the client, we were able to encourage even the smallest improvements.

 

The Machine - Intranet Portal

Client Confidential

In this project we were asked to design an Intranet for the global marketing team in a European based company. The biggest challenge we faced was designing a web portal intended for a group of completely un-savvy employees that have a very tech-savvy leader. These employees are unmotivated to try anything new for sharing content, when old methods like sending an email work.

We set a goal to create a system that will be playful and fun, in order to engage these people to use it. Our solution involved creating a centralized model. This means a few nominated curators are responsible for generating content, while the other co-workers are not responsible for "feeding" the system, but only receiving information.

As senior UX architect for this project, I created the wireframes for the web and mobile versions, was part of the team that defined the interaction and architectures, and contributed to the visual design presentations.



  • Initial brainstorm with team
    Sketching ideas for Intranet models
  • Model 1: A Decentralized 'Machine'
  • Detail from previous sketch: Filtration and Curation
  • Model 2: Centralized 'Machine'
  • Wireframe - Web
  • Visual Design - Web
  • Wireframes - Mobile
  • Visual Design - Mobile