Vertafore provides technology solutions for insurance agencies. They commissioned a design as part of a comprehensive trade show campaign to showcase UX as a service within Veratfore.
As the senior UI designer on this project, I helped establish the look and feel of the platform while receiving art direction from the Vertafore UX team. Veratfore provided a mix of low-fidelity sketches, wireframes and a prototype. The designing process took place remotely. Naturally, as a freelance project with a 2.5 week deadline, I assumed self-management.
Since the visual designs were being used to help create a clickable prototype, I had to design all the interaction states and modules. I ended up delivering over 30 screens, from graphs to setting modules.
BBM Channels is a service from BlackBerry that allows users and brands to create channels. A two-way communication portal, users can subscribe to channels while the channel owners can publicize custom content to subscribers.
In an effort to win new business, Adjacent to One proposed a redesign of BBM.
This pitch allotted us only a few days for visual design. I collaborated with the UX designer to create mock-ups and a prototype for one main user journey. When establishing the art direction, I purposely minimized BBM’s branding so that it would not compete with the sub brands on the platform.
For individuals and organizations that handle blue chip art, Art Service Group (ASG) is an intelligent online marketplace that offers field-tested, task-specific digital tools that seamlessly integrate with the full range of art services management activities such as art registration and inspection.
As the lead visual designer and creative lead, I designed the website while managing the client relationship and internal resources. I presented the design to our client, collected feedback, and responded to minor change requests.
Since Art Service Group lacked a branding identity, our design director engaged a branding exploration exercise with their team. We landed on a north star word to help guide the work: intelligence, or “showing consideration of the whole picture and everyone’s needs”. From there, I helped ASG’s in-house designer finesse their logo while determining an art direction for the online marketplace. In an effort to accurately capture our client’s design preferences, I lead a quick workshop with them and our team. Afterward, our UX designer and I collaborated on low-fidelity sketches, while consulting our tech lead. With little managerial oversight, I created the remaining visual design mock-ups in a few days.
I presented three polished directions to Art Service Group: the first reflected trends in the digital space; the second was distinctively on-brand, and the third elevated the brand. During our final review with the client, we achieved immediate consensus on design direction for the marketplace (pictured here).
I built out the pages in a few days and had the files ready for send-off by the end of the week.
Created a user flow for a pitch to Google for their latest Android campaign. Successfully adopted Android Material GUI.
Responsible for both the interaction and visual design, I collaborated with FreeAssociation to create a new responsive experience for Cornell's Arts and Science College website.
Role & Process
Armed with a user-centered approach, FreeAssociation and I helped conduct user research on Cornell's campus. Several interviews and card sorting exercises helped (lead by another consultant) gave us insight into students' and faculty's mental models. Upon returning, I used both qualitative and quantitive data to identify three personas: a prospective and matriculated undergraduate (one persona + two separate journeys), a prospective graduate student (one persona + one journey), and a prospective faculty member (one persona + one journey).
Before creating the persona and journey maps, I coded the data using a matrix. One axis represented the journey; the other encapsulated corresponding user behaviors, emotions, concerns, questions, desires, needs, and UX goals.
After developing and presenting the persona and journey mapping to the Arts and Sciences College. we engaged in a sketching workshop with our clients. I photographed the materials and outlined key UI patterns with my team. The product owner established a brand experience strategy, which helped guide our design decisions.
Together, the product owner and I brainstormed different solutions for the homepage, admissions, academics (not pictured), majors + minors, majors landing page, and global search.
Our UI patterns and content strategy were both conceptual and grounded in research. People were the center of the college, and thus, we positioned campus activity around students' and faculty members' anecdotes in the form of tiles. Wayfinding mechanisms included conversational UI elements, using a madlibs style approach. Tags facilitated discovery, whereas predictive and suggestive search helped with finding. We customized advice according to user personas, and used long form storytelling to convey the value propositions of A&S - relying on the art of showing, not telling.
Once the wires were approved, we moved into visual design. I created and lead a lightweight branding exercise with A&S. Backed with client insight, the CD and I generated visual design treatments of the homepage. A&S gravitated mostly to the circle concept - it felt both modern and traditional, while securing the institution's idea of putting people first.
Breathometer is a portable smartphone breathalyzer. Users blow into a hardware sensor that plugs into the headphone jack of their iOS or Android device. Immediately afterward, the mobile app reveals their blood alcohol content level (B.A.C.).
The project began from a list of MVP feature requirements for early-adopting users. Working with the Breathometer core team (CEO, lead developer, VP of Marketing), I helped lead the visual and interaction design for the mobile app (beta), and craft the original desktop web presence.
Our goal was to create a beta/prototype for testing on focus groups. We focused on one main user journey:
- signing up/creating an account
- tutorial (optional)
- breathing into the hardware device
- recording the blood alcohol content level
- repeating the journey/viewing user history
After several rounds of experimentation, the concept for the design of the mobile app finally emerged. We used traffic light signals to convey a user’s B.A.C. level. Green indicated sobriety; yellow meant caution, and red signaled intoxication.
The idea succeeded on several levels:
- Since we reused a powerful, existing metaphor, users grasped the concept immediately - even when drunk.
- The traffic light rings reinforced the new branding expression - it used shapes found in the logo
- Using red, green, and yellow to indicate sobriety did not have any legal ramifications
- The rings allowed for animation, adding delight to the experience
The project lasted from September 2012 to around April 2013. It demoed on TechCrunch, but debuted formally on Indiegogo for crowdfunding.
Here are some of the highlights:
- The Indiegogo campaign achieved almost over 600% of its original funding goal
- Breathometer sold over 4000 units and $140K in the first 30 days of launching.
- Huffingtonpost on the usability: "Judging by the demonstration in the product's promo video (above), part of the display turns red if you're over the legal limit. If you blow green, you're good to go. This offers a notable improvement over other handhelds, whose displays might be hard to read if you've been drinking."
The alpha influenced the final app, which was featured on Shark Tank and secured a $1 million dollar deal with Mark Cuban.
Adjacent to One (ATO) is a product design firm that needed a new, on-brand website. Since ATO is relatively unknown in the UX space and has little brand recognition, it required a digital presence that could tell its story in a powerful way.
We were restricted to a tight deadline and therefore had no wireframes to react to. As a result, the design director and I created low-fidelity sketches that I turned quickly into final mock-ups. I consulted with a UX designer and technology lead to ensure that the design was feasible, and then presented it to the company and CEO.
The website design is inspired by the same theory that crystalized Adjacent to One’s vision: The Adjacent Possible. Although the idea has its roots in biology, it can be applied to innovation - ATO’s main focus. Steven Johnson, author of Where Good Ideas Come From, believes “Generating new ideas is a process of looking for ideas that are adjacent to ideas that are already out there.” (source: http://agilelifestyle.net/the-adjacent-possible). The company story's complexity required an engaging, consumable experience for first-time users. Using ATO’s most distinctive branding element, a red slash, and parallax animation, I illustrated how the website gradually formed together like a magnet. The placement of the website copy reiterated the story: complexity was adjacent to simplicity; fuel was adjacent to monday. When the user hovered/tapped over these words, an explanation for them would appear.
During the design process, I established a visual system. Branding photography remained in black and white; whereas case study images were always in color. Red was always used on white or gray but never black; otherwise, it felt too severe. I set everything in the company typeface, Dagny, to create a uniform, polished look.
Other design explorations are pictured below.
In September, TheLadders introduced a responsive version of its core product, TheLadders.com. Combined with an updated technology stack, TheLadders adopted a refined visual design.
As the art director for the project, I collaborated with the lead UX designer and Associate Creative Director to translate wireframes into final mock-ups.
Several months had passed since the responsive reboot of the TheLadders.com, and a global design trend that favored flat design began to emerge. To keep the design fresh, the ACD and I simplified the About Us’ visual expression. Simple geometric shapes and clean typography put the content first, while a three colorway adds fun without undermining TheLadders’ credibility.
IBM.com serves as a portal for information about IBM products and services. Their mobile solutions are funneled through a marketing category website, IBM MobileFirst. IBM MobileFirst required a responsive homepage redesign. The original design, pictured below, used a card metaphor that concealed the sites’ business offerings. Although it received traffic, the engagement was dying off. Our goal was to increase site visits as well as registration rates, while also aligning the branding identity closer to that of IBM.
Our team’s goal was to build a responsive homepage that positioned IBM as a leader in the mobile technology space. As the lead visual/interaction designer and illustrator, I partnered with my scrum team to gather business requirements, user pain points, and technology constraints.
To capture everybody’s input, I helped facilitate a design studio, an agile collaborative sketching session. Afterward, the UX designer, product owner, and myself selected the strongest concept and moved onto low-fidelity sketches of the UI. I also included a visual design toolkit and style guide for handoff.
My team refreshed the IBM MobileFirst homepage in an agile development environment. We designed and built the design in parallel, while constantly iterating. The product owner and I agreed that the homepage should feature all eight mobile solutions. To enhance the user experience, I created responsive, on-brand illustrations in an agile environment.
Ultimately, the design achieved the following:
- broke up the density of the text and made it more legible
- made IBM MobileFirst’s story more compelling
- used illustrations as a wayfinding mechanism: they guided the user down the page
- solidified MobileFirst as a recognizable sub-brand of IBM
- Google ranking shot up to #2 for keyword search "mobile enterprise"
- Sites visits increased by 330%
- Registration rates grew by 69%
- Social reach increased by 550%
- Mobile traffic expanded by 29% to 56%
In 2012, TheLadders created an incubator for developing new software. Its flagship product, Caveer, was a career development resource built on a new concept called “social mentorship.” Users could see how people obtain their achievements, and help other people reach their goals.
The inspiration for Caveer was 1960s nostalgia, when career paths actually existed. As the lead visual designer, I combined vintage elements with a modern design aesthetic to appeal to a wide variety of generations - not only millennials. We emphasized the concept of tactility to suggest that using Caveer made career aspirations more tangible. During pair-programming, the developers and I implemented a CSS-based masonry layout and subtle design elements like texture drop-downs.
Plum District is a daily deals/e-commerce platform focused on Moms and their needs. The company had been receiving considerable mobile traffic (25%), but had outdated native apps. The goal was to create a native iOS app that would allow a user to purchase, save, redeem, and promote a deal.
As the lead designer, I collaborated with the head of mobile and a lead developer to create the iOS native app. I started worked on the interaction and visual design concurrently, letting each discipline inform the other. Since we were under a very tight deadline, I quickly compared interaction models from other daily deal native apps. We prioritized features and quickly built them into the interface. After having help shape the IA and UI, I moved onto finessing the visual design.
- Mobile app peaked at #9 in App Store's Business Category
- Appeared in TechCrunch and various news outlets: http://techcrunch.com/2012/08/09/daily-deals-for-moms-plum-district-debuts-iphone-app-local-loyalty-program-to-follow/