Twitter - Moments

Moments shows you the best of what’s happening in an instant, no matter who you follow. Visit the new Moments tab to discover stories as they unfold on Twitter.

Curators update the list of Moments as stories emerge throughout the day. You can also swipe to see Moments organized by topic, such as “Entertainment” and “Sports.”

When you open a Moment, you're presented with immersive full-bleed images and autoplaying videos, Vines, and GIFs that tell a story. At the end of a Moment, you can tap the share button to Tweet it out to your followers.

For some events like live sports, you're able to follow the Moment and blend the Tweets directly into your timeline to get the latest updates in real time. When the event ends, so do the Tweets, returning your timeline to the way it was before.

I worked on the visual and interaction design for the original Hackweek project called #Gametime with fellow Twitter designer Wayne Fan. #Gametime established the concept of a "temporary follow" that blends Tweets into your timeline while an event is taking place, as well as a list view that would allow you to browse upcoming events. I also built iOS prototypes for #Gametime and the first version of Moments, working with Wayne and Chris Driscoll, who designed the immersive media experience.

Final visual design and production for Moments by Wayne Fan and Chris Driscoll.

Twitter - Highlights

Highlights provides a quick summary of the best Tweets for you, delivered via rich push notification two times a day. Highlights launched in English to Android users.

The recommendations are based on the accounts and conversations popular among people you follow, Tweets from close ties, topics and events that are trending in your area or network, and people who are popular or trending among those you follow.

Conceptual and initial visual design and interaction patterns for Highlights by Chris Driscoll. After Chris moved off the project, I worked on visuals as well as interaction design and production - especially for the intro card, conversations, actions, stories and trends. Final production design for Highlights by Fabio Resende.

Twitter - While you were away...

Recap, marked with a “While you were away” heading, surfaces a few of the best Tweets you probably wouldn’t have seen otherwise, determined by engagement and other factors. The goal of the project is to help you keep up – or catch up – with your world.

People who check in on Twitter from time to time for a quick overview of what’s happening see this recap more often; those who spend a lot of time on Twitter see it less.

I worked with Erin Moore, Mike Kruzeniski, and Sean Thompson on conceptual designs for While you were away. Final visual design, interaction design, and production work across iOS, Android, and Web done by me.

An App for PIZZA TIME!

Pizza Time makes it quick, easy, and fun to order a pizza with a couple taps on your iPhone. Choose any combination of tasty toppings or let us make a suggestion, then tap Order. We’ll deliver your delicious pie as quickly as possible from a great pizza joint near you! We’ll send your order, location, and payment information to the kitchen and tell you when your pizza is out for delivery. Track the progress of your pie across town, enjoy, then leave a review. It’s easy! Are you hungry?

Pizza Time is a prototype iOS app by Alli Dryer, David Bellona, and Jayne Vidheecharoen. Visual design and branding, UX for choosing a Pizza, and front-end Swift code for choosing a pizza by me.

Website: The Magazine

The Magazine was a project by developer Marco Arment with editor and publisher Glenn Fleishman that presented "four or more medium-length articles every other Thursday on a wide variety of subjects of interest to curious people."

The Magazine began life as a native iOS app, but eventually the platform also included a website. Glenn reached out to MEGABRAIN for help designing a responsive homepage that would reorganize and showcase the content in a visually appealing way.

We adjusted the information architecture of the site and designed an image rich, grid-based layout that looks great on desktop, phone, and tablet. The homepage redesign also made it easy to present content filtered by category.

The Magazine shut down before the site launched to the public, but we had a great time working on this project!

Credits

Design by MEGABRAIN. UX Design and wireframes by me, visuals by Jenni Leder.

An App for Grocery Shopping

LoyaList is a prototype app that makes daily grocery shopping fast and fun.

Key Features:

Get smart, timely recommendations based on your purchase history.

Share shopping lists with family and friends and watch the lists update as you shop.

Find items quickly with detailed store maps.

Scan barcodes to add items to your lists without typing.

Keep track of all your loyalty accounts in one place.

Credits

UX Research, Design and Sketches, Concept UI Design, and Graphics created by me.

Capptivate.co

It preserves integral and tricky to communicate aspects of app design, sparks new ideas, and functions as a kinetic pattern library for designers and developers working on iOS apps.

Credits

I built and maintain Capptivate.co on Wordpress with the Visual Template created by Devin Price. I captured all the screenshots and created the videos on the site; the screens themselves are by others.

A Prototype for Google Glass

Working with a team of developers over a 24-hour period, I prototyped this experience for Google Glass to explore how the device might deliver relevant, actionable information in a situation where a phone or tablet would be difficult to use because of dirty hands.

The prototype connects to a mock recipe app that runs on Android. The idea was that a user could browse through recipes, store, save, and build shopping lists on his phone, then send a recipe to Glass when it was time to start cooking.

UX Design and Sketches, Concept UI Design for the Mock Recipe App, Video, and Graphics created by me.

Google Glass Tile Sequence

A Social App for a Horse Race

Churchill Downs wanted to revamp their iPhone app prior to the running of the 139th Kentucky Derby on May 4, 2013. The hard deadline meant from kick-off to code freeze we had a little under two months to design, build, and ship the app.

The experience centers around a fun tool called DerbyMe that lets you picture yourself at the Kentucky Derby. Snap or choose a photo then position it within a set of pre-defined background images. Add a caption then share your creations via Twitter and Facebook.

The app also features curated Twitter collections and allows users to filter the conversations according to preference; you can see what experts, insiders, and fans alike are saying and join in the conversation.

I designed a focused yet flexible architecture that enables the team at Churchill Downs to add new content to the app or drop out entire sections as their needs change. Based on feedback from user testing that people were interested in race reminders, we also included a series of notifications that remind people to watch the Kentucky Derby with a bugle call.

Look for fun animations: for example, a pink and a white horse race each other across the loading bar each time the content is refreshed.

UI Design and Graphics created by Jenni Leder. UX Design and Wireframes/Sketches created by me.

A Weather App for Android

Our client contacted us looking to inject some fresh thinking into the Android version of a popular weather app that had seen millions of downloads but had grown outdated.

At a discovery session on site in Atlanta, we established a new direction for the app. I helped to generate an app mission statement and defined two personas (the weather/outdoor enthusiast and the digital native) representing our major user groups.

I translated the concepts that we developed at the discovery session into a series of whiteboard sketches outlining the five primary screens in the app: Maps, Now, Today, Forecast, and Me.

From these sketches I constructed grayscale "wire-comps," designing and annotating the five primary screens, and then produced a tappable prototype that could be shared via a link. The prototype allowed the client to present the concept to stakeholders and to test it with users before allocating resources towards designing and developing the final version of the app.

UX Design and Wireframes/Sketches, Concept UI Design, and Graphics created by me.

An Elections Center for a News App

The mobile division of a Cable News Network wanted to augment their iPhone and iPad apps with a brand new Election Center section for the 2012 elections.

Mobile UI Designer Jenni Leder and I worked closely together to design the Election Center experience. We used a combination of sketches and wireframes along with a series of rapidly produced, iterative, lo-fi (then increasingly hi-fi) prototypes.

The prototypes allowed us to quickly communicate ideas and transitions to the client, and they made it easy for the client to present the project to an enormous group of stakeholders. The prototypes also allowed the client to perform structured user testing to gather feedback on the app.

We encouraged the client to overhaul the app's navigation structure to make it more discoverable and more scalable. We also developed a series of article templates for Election Center articles that the client later applied to all the other sections of the app.

The app launched in August 2012 and was featured briefly in the iPhone5 Keynote presentation.

Painted Birds

Actuated Matter

July 25-29 2011, I participated in a workshop organized by Karmen Franinovic and Florian Wille with guest lecturers Loop Design.

"The Actuated Matter workshop explored the application of smart materials and their ability to transform space into responsive, adaptive environments. We developed a speculative model for membrane structures that exhibit properties of sensitivity, resilience, and decay.

By physically engaging with the behaviors of active materials, we experimented with the threshold between the electronic and mechanic, the analog and the digital. The workshop followed a do-it-yourself approach and resulted in the development of sonic, luminous and moving modules that will populate and activate the environment."

Meat Soap!

The Meat Soap team firmly believes that the aroma of freshly cooked bacon should linger long after breakfast and that meaty and clean go hand in hand.

That's how we arrived at Meat Soap. By using animal byproducts that are typically discarded as an ingredient in bars of soap, we were looking to change minds about what "clean" means. A variety of fats were rendered by our crack team of fat melters to create a rainbow of colors, scents, and flavors.

We designed and fabricated a custom soap mold to produce our collection of butcher paper-wrapped soaps. We hoped to spark a lively debate about personal hygiene and meat consumption, while resurrecting the tradition of using animal-based resources to their fullest potential. We think clean people should smell like bacon, not like mint or roses.

We were able raise enough money on Kickstarter to pay for a set of soap molds from a custom mold producer out of Portland, Oregon. We procured the molds, ordered the raw materials for our soap (assorted meat fat to render and glycerin soap base) and manufactured enough soap to keep all our backers lathered in protein! Finally, we lovingly wrapped each bar with butcher paper and distributed the product! Don't mind the grease stains, they add character!

H2O Hive

From the beginning of our involvement with Earth Day Dallas in 2011, I was interested in designing and constructing a booth for the local chapter of the AIA's Committee on the Environment to operate, rather than rent a standard tent.

The impulse was rooted in a long tradition of temporary architectural pavilions constructed at large events such as the World’s Fair, typically used to demonstrate new technology, imagine possibilities for the future, and function as landmarks.

Over the course of Earth Day Dallas, attendees were invited to fill the structure with their plastic water bottles; after the event the H2O Hive was exhibited at the Dallas Center for Architecture. When the exhibition ended, we recycled or repurposed most of the project.

The design for the structure, H2O Hive, was inspired by the shape of honeycombs, in which bees store their most valuable resource: honey. We built the modular, hexagon-shaped cells that form the structure of the H2O Hive with donated construction-grade as well as reclaimed plywood, assembling the structure in pieces and delivering them to Flora Street for installation at the event.

As cells filled with water bottles, volunteer worker bees pulled the bottles from the structure and recycled them, emptying the cells so that they could be filled again.

The distinctive appearance of the H2O Hive encouraged interaction, and the idea that plastic bottles do not belong in landfill seemed to resonate with the people who attended Earth Day Dallas.

Sports Skyscraper

Tasked with designing an environmentally responsible skyscraper for a site located a few blocks from Times Square, I developed a concept for a "Sports Skyscraper" that combines office space with a research center and vertical park.

A double-helix spiral running track winds its way around an unbuilt 45-story office tower, providing circulation for the vertical park. An apparel company occupies 50% of the building; sponsored athletes test out new products on the track and practice on the courts. The other 50% of the office space can be rented out to assorted businesses. The athletic facilities located throughout the building are open to all tenants. A retail outlet for the apparel company is located on the ground floor.

redits

The concept, architecture, structure, graphics, models, and experiments were designed and/or conducted by me in Jenny Lovell's Studio at the UVa School of Architecture. Earl Mark wrote the Visual Basic code that enabled the generation of a 3D elliptical double-helix.

Stockholm Public Library Extension

I designed this addition to Gunnar Asplund's Stockholm Public Library in response to a detailed international competition brief ssued by the Swedish Association of Architects.

The process began with analysis through drawing and models of “Saint Jerome in his Study,” painted by Antonella da Messina in 1475. The painting inspired me to think about how we might use and experience libraries in the Information age.

The Asplund Library sits adjacent to one of the last remaining expressions of Stockholm’s geologic past - an esker topped with the city observatory. The proposed library addition would occupy the edge of the hill, extending out into the fabric of the city.

The building facilitates two modes of interaction with library materials: it incorporates a long, winding ramp lined with books, encouraging a visitor to stop and browse whatever catches her eye; the design also accommodates those who are looking for a specific item via "short cuts" in the circulation that make it easy to skip from one part of the building to another.

Credits

The concept, architecture, structure, graphics, models, and experiments were designed and/or conducted by me in Robin Dripps' Studio at the UVa School of Architecture.

Scripting Fabrication

The inspiration for this project came from “Generative Algorithmic Definition: Honeycomb Morphologies” by Andrew Kudless, Achim Menges et al, a thesis that explored the fabrication of honeycomb cells that adjust to conform to the constraints of a user-defined surface. The differences in the cells create variable performance characteristics that allow the construction to adapt to different structural and environmental situations.

My project attempted to recreate and extend the process developed in Honeycomb Morphologies. I developed methods that allow the translation of a digital surface into a physical object with a cellular structure whose geometry can be defined by the user as having either 3, 4, or 6 sides. Changing the geometry of the cells affects the structural characteristics of the construction, changes the process of assembly, and greatly modifies its appearance.

Developing the script began with a preliminary description of the goals of the project, and definition of the variables and proposed process. Next, a series of prototypes consisting of physical and digital models helped to further refine the scope of the project, revealing the steps required to make the script work.

The final version of the script evolved out of a combination of pre-existing code from various internet sources and new code, combined through trial and error in Rhino.

Credits

Original honeycomb script by Andrew Kudless. I "hacked" the script and used it to build 3D models in Rhino and out of laser-cut paper.