I’m a San Francisco-based design professional with a 10+ year track record of crafting simple, effective, and beautiful digital experiences for customers.

visual-design.png

visual design

Partner with integrated teams to craft the customer-facing branded experiences of desktop and mobile products. Craft UI designs, mockups, layouts, and icons. Generate design specifications and style guides. 

print.png

print design

Classically trained with experience designing marketing brochures, print collateral, signage, postcards, posters, and infographics. Experience with pre-press prep, color correction, and conducting press checks.

ux.png

UX design

Leveraging user-centered design principles to design the logic flow and interaction models for digital products. Craft wireframes, user journey maps, task flows, prototypes for validation, and UI specifications.

branding.png

branding & identity

Brand identity designer with experience building brand-defining visual identities and brand systems including logos, logotypes, type systems, icons, bespoke typefaces, and color systems, and corporate style guides.

all-skill-icons-Recovered-Recovered-Recovered.png

art direction

Art director and strategic thinker with experience concepting and designing digital and social advertising experiences—including online ad campaigns, rich email, banner ads, and social media graphics.

creative-director.png

creative direction

Results-oriented creative director with experience leading, inspiring, and mentoring small teams of UX and visual designers, content creators, and front-end developers for web sites and web-based products.

Client Experience

I’m grateful to have had the chance to work with many great brands that I’ve admired through the years.

all-client-logos.png
 

Help data visualization startup—Ideacage—with a new product launch. 

 

CLIENT: Ideacage

DATE: December 2017

MY ROLE: Visual designer

Background

Ideacage is a Dallas-based data visualization startup. Guided by demand in the marketplace, they fused a unique managed display interface with a compact network media player to create a compelling and scalable visualization platform for businesses. Designed for displaying real-time data their proprietary Display Engine web application paired with they Display Engine network media player, is a powerful combination allowing customers the ability to address dozens of data visualization use cases.

my role

I was invited by Helium Communications to design some marketing materials to help support the launch of their newest product, Scorecard, including a sell sheet and a landing page.

 

Landing Page

Desktop HD.png

Modal

modal.png

Responsive Views

iphone-tablet.jpg

Redlines Specs

redlines.png

Enhancing the options trading experience by offering guidance, instilling confidence, and building a best-of-breed toolset.

Note: To comply with my non-disclosure agreement, I have omitted and obfuscated confidential information in this case study.
The data and information in this case study is my own and does not necessarily reflect the views of Fidelity.

 

CLIENT: Fidelity

DATE: March 2017

MY ROLE: Visual Designer

background

Trading stock options is challenging. The truth is that most people who trade stock options fail miserably and lose money each year. “Normal” investing—in things like stocks and bonds—is complicated enough for most people. Options ramp up that complexity by an order of magnitude. Not just that, but all option strategies—even the supposedly low-risk ones—have substantial risks which aren't always obvious. And there are all those trading strategies with goofy-sounding names like iron condor, butterfly, and jade lizard.

All that said, a lot of investors like the challenge and find that trading options is generally more interesting and challenging than trading in stocks. Options also fit well with emotional biases of many investors who prefer certainty of a limited loss and unlimited upside.

Challenge

Fidelity provides an extensive options trading experience across a wide range of products and platforms to cater to these of these investors. On average roughly 200,000 trades are completed every day. The current experience, though once highly-regarded, is in need of improvement—based on known issues and customer feedback. The options trade ticket, in particular, was identified as a product that could benefit from a design overhaul. This is difficult stuff for most of our customers. How can we make it better?

My role

I joined the team as a consulting visual designer in March of 2017 (the project was already well into its ideation phase). The team was highly collaborative and
there’s was lot of crossover between roles. This was a very transactional and data-driven project where most of the heavy-lifting was done by the senior information architect on the team, the super-talented Rui Mu, with me following her lead. I didn't know anything about trading options at the start of this project and I still don't now. Honestly, I don't feel bad about that.

Creative Brief

Business requirements

How can we provide the most value for Fidelity customers at this critical conclusion to their trade experience? We defined some goals for our new experience to achieve:

  • Help customers understand what they’re trading and guide then through the process
  • Make it fast, easy and accurate for customers with relevant feedback along the way
  • Provide support to minimize risk and maximize gains
  • Create a frictionless trading experience with a minimum of distractions
  • Start with the most complex use case for MVP1 (options), then leverage the experience to encompass other trade types

Approach

We opted for Fidelity’s variation on a lean approach which emphasized rapid sketching, prototyping, lots of user testing throughout the process. This created early team-wide alignment, sparked tons of great ideas and created a strong sense of ownership across different disciplines on the team. Our process moving forward was as follows:

  1. Conduct a discovery phase to understand the current experience, customer segments, and goals moving forward
  2. Create detailed user scenarios and validate them with metrics and data
  3. Create multiple design concepts for review, refinement, and user testing
  4. Conduct a series of quantitative studies to inform and validate design hypotheses
  5. Roll out releases in the form of MVPs— allowing a small segment of users to access and provide feedback
  6. Continuously evolve the design with incremental releases, improving as we learn

High-level scope

Start by focusing on the most complex use case for the trade ticket—options trading—for MVP1 to load test solutions and get customer feedback.

Success metrics

How do we know we have succeeded?

  • Speed: How quickly can the customer accomplish the task of completing the trade?
  • Accuracy: Was the information the customer intended to enter actually entered? Are we showing accurate data?
  • Confidence: Is the customer appropriately confident in the information entered?
  • Omnichannel: Can customer execute trades where and when it is most convenient for them on the devices they choose?
  • Aesthetic integrity: Can we move the needle dramatically on the visual design of the ticket to best represent the current state of the Fidelity brand?

Research and Discovery

The discovery phase was a quick, high-intensity effort that allowed us to define project milestones, audit the existing work, review the competitor landscape, understand our client’s vision, and begin research into user needs, behaviors and pain points. We also kicked off a technical discovery phase to understand feasibility and constraints.

During our inventory of trade ticket’s across all of Fidelity’s products, we unearthed no fewer than 5 different trade tickets, encompassing desktop and mobile. So were destinations, others we docks. Still, others were movable modal layers. We also conducted a functional taxonomy across all of the tickets.

We did an analysis of each and shared the results with the team and our business sponsors.

 

Fidelity Trade Ticket Inventory

Trade Ticket Functional Taxonomy

Trade Ticket Functional Taxonomy

 

Customer Journey Map

We created a rough customer journey map to give the team an overview of our customer’s end-to-end experience across Fidelity.com, from Google search for “options trade” to complete trade transaction. We thought this would help expose potential gaps and friction points in the experience. Some key learnings:

  • Stocks are the most commonly traded security type for these participants, followed by Mutual Funds, ETFs, Fixed Income, and Options
  • For the these participants, the number of trades per year is generally low (1 – 12) for Mutual Funds, Fixed Income, and ETFs.
 

Options Trading Journey

 

Analysis of Current State

We had access to user research studies, customer verbatim feedback, and input from field reps, to help us identify the strengths and shortcomings of our current trading experience:

  • The current ticket affords a lot of control but also saddles customers with potential indecision and unnecessary cognitive load
  • Speed and accuracy of order input seen as well-behind competitor offerings
  • From a visual design perspective, it was obvious we had fallen well behind the level of fit and finish that competitors such as TD Ameritrade were offering.
  • Not responsive; won’t work well on mobile devices
 
Fidelity Options Trading Ticket - Destination

Fidelity Options Trading Ticket - Destination

 

Competitive Landscape

Our initial competitive analysis looked at several of Fidelity’s primary competitors in this space including E*Trade, Charles Schwab, Options Express, Scottrade, TD Ameritrade, TradeKing, and others. We used the following criteria to guide our evaluations:

  • Consistency
  • User support
  • Precision
  • Forgiveness
  • Responsiveness
  • User control
  • Simplicity
  • Aesthetic integrity
eTrade Options Ticket

eTrade Options Ticket

Charles Schwab Options Ticket

Charles Schwab Options Ticket

Scottrade Options Ticket

Scottrade Options Ticket

Personas

We used personas throughout the project to guide design decisions, priorities, and create empathy amongst the client and our team.

Our persona hypothesis consisted of three different trader types which we used to facilitate discussions about our user’s needs, desires and varying contexts of use. Through careful analysis of our research, we identified client behavioral variables to segment our user audience.

We reviewed the personas with our business sponsors to develop a clear picture of who the design of the ticket would target in MVP1 and later in future MVPs.

 
MBL_Fotolia_67592712.jpg

Lily - LIGHT TRADER

  • Total trades per year: 1–70
  • Time trading per week: 3–10 hrs.
  • Trading activity: stocks
  • Mindset: “I don’t really know much about trading, but I like to trade the companies I know”
  • Pain points: per trade expense, complexity of trading tools, lack of guidance
MBL_Fotolia_58606171.jpg

Vince - MEDIUM TRADER

  • Total trades per year: 72–120
  • Time trading per week: 10–20 hrs.
  • Trading activity: stocks, ETFs, single-leg option trades
  • Mindset: “I’m comfortable with simple trades, but it would be great to up my game”
  • Pain points: hard to learn how to trade beyond just stocks, hard to formulate strategy
     

Harry - HEAVY TRADER

  • Total trades per year: 120+
  • Time trading per week: 20–40 hrs. Trading activity: stocks, bonds, ETFs, mutual funds, multi-leg option trades, conditional orders
  • Mindset: “The performance of my portfolio is a source of pride, but I need better tools”
  • Pain points: speed, accuracy, and control of investing tools
 

Guiding Principles

Do what’s easy for the customer, not what’s easy for us.
The goal of this effort is to define the best trade experience for our customers. It is not to define the best trade experience for our customer’s given current funding buckets and existing back-end systems. There are real-world constraints but they need to take a backseat while we determine what will provide the best experience for the customer. If it’s not good for the customer, it’s not an option.

Concepts now. Details later.
The time will come for dotting ‘I’s and crossing ‘T’s. It’s not now. Ask yourself, ‘does it break the model?’ If not, it’s just a distraction.

Past performance is no guarantee of future results.
Do not assume past constraints are current constraints. Assume yes for now. We’ll revisit it later if necessary.

Reduce friction
Look for every opportunity to shorten the distance between what the customer is looking to accomplish and what it takes to get there.

Increase confidence
We know confidence is a pain point for our customers. Strive to provide more enhance decision support whenever possible.

Increase guidance
We know our younger traders can you some help during the process, but guidance should not get in the way of speed and accuracy for more advanced traders.

Design for all devices and displays
Make this experience feel and home on any device and let customers trade where and when it is convenient for them.

Optimize for speed
Page performance is a critical aspect of a high-quality user experience. With the emergence of products such as Google Accelerated Mobile Pages and Facebook Instant Articles, minimal or zero latency with quickly become a basic expectation with our customers.

Ship to learn
We know that not all features or content will be adopted to add value. Make small bets, and be willing to quickly pivot when the results of experiments don’t agree with our hypothesis. Use customer input and data to inform decisions and let the best ideas win.

Design Process

Fidelity upholds relatively high standards for the work it produces and places a premium on good design. The current state of Fidelity.com make look dated but, its mobile app is quite good.

My process involved sketching and white boarding concepts and flows with my IA partner and then translating these directly into high fidelity design comps. Since I was working with many existing design patterns, it was relatively easy to move straight into hi-fidelity designs. Additionally, Fidelity maintains excellent design pattern stencils in both Axure and Sketch. The days of gray box wireframes may be over.

My next step involved slicing the comps and piecing them together with Keynote or Axure into a prototype. In the early stages, I focused only on representing the highest risk areas of the design.

For each feature phase, we went through cycles of requirements, consensus, approvals, detailed specs, and handoffs.

Prototyping was the most effective way to quickly gain meaningful feedback from the team, consensus from stakeholders and approval from senior leadership. We also used them to for our weekly usability tests with our user research team.

Keynote (Magic Move!) was the boss when it later came time to demo motion and animation effects quickly to the team.

 
 

UI Design Toolkit

I assembled a UI toolkit from the current Fidelity.com style guide and latest component stencil kit to speed up the visual design process—especially as other designers join the team in the future.

The toolkit also features Fidelity Sans—Fidelity’s new bespoke typeface designed for us last year by Danish foundry: PlayType.

 
 

Early Concepts

order ticket

This is the first step in the trade order check out process: the order ticket. It consists of the following components:

• Account selection
• Margin display
• Symbol/company selection • Symbol quote display
• Trade details
• Order summary display

The team worked strived to keep the ticket interface as organized and simple as we could to reduce cognitive load while providing clarity and guidance where appropriate. We moved details out of the way and tried to pare down the interface to just the essential features that addressed the most common and important use cases.

 
this.png
Option B.png
Option C.png

Later Concepts

[coming soon]

Help Fidelity customers to learn more about personal investing

Note: To comply with my non-disclosure agreement, I have omitted and obfuscated confidential information in this case study. The data and information in this case study is my own and does not necessarily reflect the views of Fidelity.

 

Background

The Fidelity Learning Center is the educational wing of financial services firm Fidelity.com. Its mission is to inform, educate, and boost confidence around financial topics for Fidelity customers. Content is presented in the form of articles, videos, webinars, and infographics. There are also “courses” that provide a more structured experience around broader topics.

My role

I was a visual & UX designer on a team that included product owners, business analysts, a content strategist, a user researcher, and a front-end developer. I contributed to strategy and project management. I also created wireframes, prototypes, user journey maps, and mockups.

The PROBLEM

Our user research team uncovered a lot of issues with the current Learning Center:

  • There’s a lot of content but no engagement
  • About 200,000 people a month visit the Learning Center but many don't stick around or ever return.
  • Customers felt courses were not well-organized, and too hard to complete
  • Articles were complex and had much too jargon
  • Content not personalized and customers are stuck in content silo

The ask

Our team was tasked with helping to address some of these issues and move the overall needle in terms of increasing engagement, return visits, creating more of a guided experience, and making some of the more complicated topics more approachable and easier to consume.

DOWNLOAD COMPLETE CASE STUDY

I have the Fidelity Learning Center as a PDF download (25MB):

 

Creating a more useful and pleasing dashboard experience for Fidelity customers.

 

Background

Fidelity’s Portfolio Summary is the landing page for all customers after login. It’s essentially a dashboard where customers can check account balances, stock positions, follow up on pending orders, and catch up on market news. Fidelity was a latecomer to digital, but by 2014, the firm launched a new Portfolio Summary area that was truly innovative: clean, easy-to-navigate, personalized, and 100% mobile friendly. Fidelity has chosen to pursue a card masonry model to display content and customers seem to really like it.

Challenge

The director of our group decided to issue a challenge to our team. Our customers are happy with Portfolio Summary but what if we moved the needle a bit in terms of look and feel? What if the content was not displayed in cards? What if it was something else? What if it was a constantly updating feed with dynamic content driven by your holdings, your watch list, and other activity? What might that look like? What if dreamed about what kind of content would be appropriate to push to our customers? And boil the ocean while you are at it (he never said that, actually).

Results

So we did some thinking and sketching and discussing. And then we made some pictures. This is what I came to the table with. I re-imagined the card experience with a double-wide format, a richer visual motif (using color, icons, and photography), and leveraged our new bespoke corporate typeface.

 

Concepts

the-feed-1.png
the-feed-2.png
the-feed-3.png

Help newbie investors build their first investing strategy via a simple & engaging UI.

Note: To comply with my non-disclosure agreement, I have omitted and obfuscated confidential information in this case study.
The data and information in this case study is my own and does not necessarily reflect the views of Fidelity.

 

CLIENT: Fidelity

DATE: January 2016

MY ROLE: Visual Designer

BACKGROUND

Fidelity Investments has a solid reputation for retirement services such as IRAs, 401(k)s and mutual funds—typically scoring excellent reviews. But what about brokerage services? The company’s brokerage arm is less well-known among most investors although the firm offers low fees and high-quality trading tools. We know trading is a key experience for a lot of Fidelity customers. But what about new customers that would like to try a hand at it? It can seem overwhelming and a little scary. How do you get even get started?

The Challenge

Our challenge was to come up with a friendly, engaging wizard that would help new customers build a very simple investment strategy. Something lightweight that might help them get their feet wet—and help Fidelity gather data that could be useful in offering relevant tools and content in the future. This was the mission of our annual UXD hackathon in late 2016. We were asked to come up with some ideas, make some pictures, and then present them.

THE IDEA

You’ve just funded your Fidelity account. Great—let’s engage you right off the bat with a structured narrative experience called “Your Investing Story” that helps you pick securities, establish some baseline strategy metrics, and then save it for later reference. We'll also surface some tools, offer relevant next steps, and some incentives redeemable for free trades. Keep it inviting, friendly, and highly visual.

MY CONTRIBUTION

This was very much a team effort and I provided strategy, UX, and visual design support.

 

Workshop Session

Sketches

sketches-all.png

Final Concepts

0-trading-experience.jpg
1-trading-experience.jpg.jpg
2-trading-experience.jpg
3-trading-experience.jpg
4-trading-experience.jpg
5-trading-experience.jpg

Fidelity’s popular suite of consumer credit cards gets a design challenge makeover.

Note: To comply with my non-disclosure agreement, I have omitted and obfuscated confidential information in this case study.
The data and information in this case study is my own and does not necessarily reflect the views of Fidelity.

 

Background

Fidelity was planning to expand its consumer credit card offering into a larger product suite: a family of cards that would appeal to a broader spectrum of customers—from young investors to high-net-worth individuals. As part of a design challenge, the UXD group was challenged with coming up with some concepts to help support this effort.

INSIGHTS

We knew from research that people are looking for particular features from their credit cards such as a low APR, cash back on purchases, and rewards programs. Yet they also express themselves through their credit card choices. And while younger investors were not a specifically targeted segment for this effort, it would be a bonus if the designs resonated with these groups. Of course, the cards also need to be functional, comply with Fidelity brand requirements, and feel like they are part of a larger system of cards.

I’ve included some inspirational materials, sketches, and the final concepts to round out the presentation.

 

Inspiration

inspiration.png

Sketches

sketches.png

Visual Design Concepts

cc-1.png
cc-3.png

Helping investors leverage data visualization to better monitor their investment portfolio.

Note: To comply with my non-disclosure agreement, I have omitted and obfuscated confidential information in this case study.
The data and information in this case study is my own and does not necessarily reflect the views of Fidelity.

 

CLIENT: Fidelity

DATE: 2016 – 2018

MY ROLE: Visual designer

background

Because of the way the human brain processes information, using charts or graphs to visualize large amounts of complex data is easier than poring over spreadsheets or reports. Data visualization is a quick, easy way to convey concepts in a universal manner and this even more critical when it comes to the world of investing. In fact, some investing experts believe that chart reading is the single most important skill investors can learn in terms of effectively monitor trading activity across their investments. Fidelity offers a variety of data visualization tools across it's investing platform to help customers visualize large amounts of data quickly.

MY role

One of my roles as a member of the Fidelity UXD team was to manage charting and data visualization user experience across the Fidelity brokerage product portfolio. This included consulting with product owners and designers wishing to add charts to support a new product. Or working with product teams to enhance an existing chart. Frequently a product owner would approach me with a data set and wonder what chart pattern would best work to help them tell the most compelling story about that data.

Additionally, I supported our creative directors and the standards team in developing a cohesive system of charting components and a style guide for appropriate implementation and usage of that system.

 

Probability Calculator

Hypothetical Growth of $10,000 Chart

hypo10k.png

Snapshot Chart

Charts UI Kit

Helping students change the world through technology and innovation.

 

CLIENT: Microsoft

DATE: January 2013

MY ROLE: Art Director, Graphic Designer

Background

The Imagine Cup is Microsoft’s annual technology competition where students design and deliver innovative software solutions to address global challenges such as improving education, combating AIDS, improving maternal health, and ensuring environmental sustainability. Thousands of students from over 125 schools throughout the country registered, and 22 student teams were chosen to participate in this year’s Imagine Cup 2011 U.S. Finals. For the first time, Microsoft conducted a People’s Choice online voting competition via a custom Facebook application, inviting the public to rally behind their favorite U.S. finalist team. 

My Role

I helped design the user experience of the Facebook application, partnering with Crimson Consulting, and also some printed pieces including a poster and postcard to help generate interest.

 
 

Poster

mvp-poster-R4a.png

Postcard

mvp-postcard-CTA-front-R4-1.png
 

Facebook Cover Image

fb-cover.jpg

Facebook Voting App

Tri-Fold Brochure

lines.png

Registration Landing Page

landing-page.png

Ad Banners

Celebrating Native American musicians and their contribution to contemporary culture.

 

CLIENT: National Museum of the American Indian

DATE: August 2013

MY ROLE: UX & Visual Designer, Project Lead

background

The National Museum of the American Indian (NMAI) is dedicated to housing and presenting Native American artifacts and artworks. It is based in New York City and is part of the Smithsonian Institution. In August of 2012, NMAI was planning an exhibit called “Up Where We Belong: Native Musicians in Popular Culture” highlighting Native American performers who are active in popular music. Musicians like Russell “Big Chief” Moore (Gila River Indian Community), Rita Coolidge (Cherokee ), Buffy Sainte-Marie (Cree), and the group Redbone are but a few of the Native performing artists who have had successful careers in pop music and were highlighted in this exhibit.

Challenge

In May of 2012, NMAI was planning an exhibit called “Up Where We Belong: Native Musicians in Popular Culture” highlighting the contributions of Native American performers who are active in popular music. The NMAI wanted to complement the gallery experience with a listening room where visitors could consume audio, video, and still imagery for each of the participating artists. I was asked to design and develop an interactive “kiosk-like” experience to accompany the exhibition—allowing visitors to access music, photos, videos, and biographical information for approximately 25 Native artists. The experience was delivered on five, securely enclosed, wall-mounted iPads with attached headphones in a dedicated “listening gallery” within the exhibit.

Requirements

Appropriately echo the exhibit design thematics while still respecting the unique needs of the audience, content, viewing device, and environment. Include tutorial content on how to navigate the experience. Be stable enough to avoid crashes or memory outages. Be secure with no backdoor that could be used to disable the experience or otherwise get online (even though home button access was physically blocked with secure enclosures). Offer access for remote restarts, content updates, and recording of analytics data on usage.

Solution

We ended up using HTML5 and the Kiosk Pro app for the iPad 2 (iOS 5) as our deployment solution. We did have issues with freezes, wake fails, and utterly mysterious hackings of the devices (despite all of our security precautions) but overall the institution was very happy with our creative solution and it was super-exciting to work with such great content. Produced on the Smithsonian side by Dan Davis. Development by Alex Smoller.

Results

We were able to capture some simple metrics based on daily usage analytics data generated by Kiosk Pro to help evaluate performance from the first week of the exhibit, with 254 daily visits per device with an average visit duration of 21 minutes.

The Museum

The NMAI is housed in the George Gustav Heyes Center. Heyes began collecting Native American artifacts in 1903 and opened the museum in 1922.

 
2016ds42.402__x_large.jpg
national-museum-of-the-american-indian-julienne-schaer__x_large.jpg
interior-ion-gghc-2010ds44.422 2.png

Exhibit Designs

UP_Walls_Jan30_SS.png
UP_Long_WallsW_Jan30_GB.jpg

Photographic Assets

Sketches

sketches.jpg

UX Design

1-nmai-user-journey-R1.png
2-nmai-artist-browser-R1.png
3-nmai-artist-detail-R1.png

Visual Design Toolkit

typography.png

Final Designs

Attract Screen

Attract Screen

Attract Screen: Contextual Help

Attract Screen: Contextual Help

3.jpg
4.jpg
5.jpg

The Result

08-2012-photo-03.jpg

Leveraging the power of design systems to create consistency, save time & solve problems faster.

 

CLIENT: SAP

DATE: June 2015

MY ROLE: Visual Designer

background

SAP is one of the world’s oldest and largest software companies. It builds software that lets large organizations manage things such as global cash positions, supply-chain logistics, and product-planning timelines. Facing competition from startups, SAP is out to prove that the granddad of business software won’t be left behind in a technology landscape upended by cloud computing.

THE Vision

The bread and butter of SAP’s business have long been desktop software for mega-corporations like airlines and oil companies. But in this age of mobile-first and cloud technology, and SAP sees the writing on the wall—innovate or get out of the way. Facing competition from startups, SAP is out to prove that the granddad of business software won’t be left behind in a technology landscape upended by cloud computing. SAP Fiori (“flowers” in Italian) represents SAP’s intent to deliver a consumer-grade user experience across all of its on-premise and Cloud-based applications. A harmonized experience that is responsive and adaptive—whether you’re on a phone, tablet, or desktop.

My Role

SAP established various “labs” to operate as startups within the organization. The hope was that infusing a little Silicon Valley startup culture into SAP would help drive innovation. I was brought in as a member of the SAP Global Design team—a multi-disciplinary team that designs, develops and delivers system-based design solutions for the enterprise. I was hired as a full-time principal visual designer at the lab in New York City. My responsibility was to help with the rollout of Fiori—partnering with strategists, UX designers, content strategists, and developers in New York, Palo Alto, and Germany. I helped design various system components, icons, and also help lead an effort to deliver our icon library as a typeface.

Icons & Icon Font

I was also part of a team that created icons for deployment across various applications. Creating all of the icons we needed in various sizes, colors, and resolutions was fast becoming unmanageable. We needed a solution for adding resolution independent icons across all of SAP's apps. We set about working on how to make our icon library available as a font. I was able to leverage a core competency in typeface design and knowledge of FontLab. We were aware of the potential issues with icon fonts in terms of accessibility and older browser support, but we liked the flexibility and page load boost that icon fonts gave us. We were careful to deploy them correctly with appropriate fallbacks.

 

UI Kit

Fiori_UI_ToolKit.jpg

Axure Stencils

axure-screenshot.png
launchpad.png
master_detail.png
3.png
floorplan_list_report.png

Icons

icons.png

Icon Font

Help promote Apple’s iPod Shuffle as the ideal Valentine’s Day gift idea.

 

Challenge

While working as a freelance art director at Apple, I was invited to contribute some concepts to help support an upcoming Valentine's Day promotion in the Apple Retail store. In particular, some ideas were needed for in-store easel posters to promote the iPod Shuffle as the perfect Valentine's Day gift.

Solution

Initially, I focused on the ear bud cables. Arranging them as a heart, but eventually rejected it. I also thought the click wheel could be treated as a letterform. But how tie into Valentine's Day? The click wheel could be inserted in the word "love" as the "o" but it needed further development. Then I remembered Robert Indiana's famous typographic "LOVE" sculpture. This is not an interactive piece, and as such, I should probably take it out of my book, but it's one of my favorites.

 

In-Store Easel Poster

Online Store Email

email.png

Create a website for New York lighting designer and international tastemaker Lindsey Adelman.

 

Background

Lindsey Adelman designs and produces lighting out of her studio in Manhattan. Inspired by structural forms found in nature, her signature branching chandeliers incorporate raw materials such as hand-blown glass, porcelain, brass, bronze, leather, and wood. Founded in 2006, the studio has grown into a team of 20 who work collaboratively in each aspect of the business. Lindsey has since become one of America’s most influential tastemakers, and a piece of her work is instantly recognizable for its pop sensibility, shape-shifting forms and ingenious use of materials.

Assignment

Working in tandem with Alex Smoller (a crack developer and a frequent collaborator) I was asked to provide UX and visual design explorations to help drive a re-reimagining of Lindsey's studio website. Although she decided not to move forward with my ideas, I've long been an admirer so it was exciting to meet her and spend time with her team. I would love to one day own one of her pieces (assuming I become a bitcoin billionaire).

Lighting Fixtures

Here are some examples of some of the gorgeous lighting fixtures that Lindsey Adelman's Studio creates.

 
1 (2).jpg
1 (12).jpg
1 (5).jpg
1 (19).jpg
1 (17).jpg

Studio

1 (22).jpg

Site Map

site-map-R2.png

Navigation

0-global-nav-R1.png

Selected Wireframes

1.0-home.png
3.1.2-technical-lighting-detail.png
4.0-studio.png
4.6-press-accolades.png

Visual Design Directions

concept A

0-A-home.jpg
1-A-work-category.jpg
3-A-studio-meet-lindsey.jpg

concept b

0-B-home.jpg
3-B-work-detail.jpg

concept c

0-C-home2.jpg
0-C-collections.jpg
0-C-work-detail.jpg
5-C-about-meet-lindsey.jpg

concept d

1-D-home-product.jpg
1-D-collections.jpg
1-D-fixture-overview.jpg
1-D-team.jpg

Helping Adobe bring digital publishing to the iPad.

 

CLIENT: Adobe, Condé Nast

DATE: March 2010 – February 2011

MY ROLE: Experience Designer

BACKGROUND

Back in late 2009, print content was pronounced dead. Subscriptions were in decline. Magazines were hurting for revenue. And ad sales were way down. There was no iPad yet, but consumers had expectations for more dynamic experiences around content. It was the wild west of digital publishing ready for disruption.

The Challenge

How could Adobe bring the fit and finish of a high-end print magazine to the iPad while scaling the experience to meet the deadline-driven needs of a busy print publication?

THE IDEA

It was initially very slow going (the dev team had to port the entire app over from Flash to Objective-C in less than 5 weeks when support for Flash on iOS was withdrawn by Apple), but the final product—with lots of snazzy features such as in-magazine video/audio playback, slideshows, image pans, and panoramas—was heralded a great success. The released app shot up to the number-one paid slot the week of its release and sold 24,000 copies in the first 24 hours, generating nearly $84,000 for its publisher Condé Nast.

THE RESULTS

So Adobe, maker of the industry-standard for desktop publishing—InDesign—decided to disrupt, with a new digital publishing platform based on InDesign CS5. A partnership was brokered with Condé Nast's WIRED for content—an excellent choice given WIRED's tech-savvy audience and high design aesthetic. I have a prior career as a print designer and I know InDesign exceptionally well. I was brought as an experience designer to help craft the authoring experience and also work with the print designers at WIRED to troubleshoot workflow issues.

Adobe's Digital Publishing Suite is now a mature product that lets customers design, prepare and package an unlimited number of interactive iPad apps for delivery to the Apple App Store, using InDesign. With Adobe’s Digital Publishing Suite, users can quickly generate fully-interactive apps along the same lines, taking advantage of the built-in support for rich multimedia, as well as HTML5.

MY CONTRIBUTION

Because of my background in publication and print design—particularly within the Indesign ecosystem, I was invited to join the team as a consulting experience designer. I worked closely with graphic designers at WIRED and the internal team of designers, developers, and producers at Adobe to help create app builds on the iPad for testing. This consisted of using the beta toolset to build interactive content such as touch-enabled slideshows, 360° panoramas, and video players. It was a lot of work on a very tight deadline but it was definitely one of my career highlights.

 

0-wired.jpg
1-wired.jpg
3-wired.jpg
4-wired.jpg
6-wired.jpg
7-wired.jpg
9-wired.jpg
10-wired.jpg
13-wired.jpg