HealthTap is a leading provider of comprehensive virtual primary care. The service is a benefit offered to employees through their employers, providing high quality and convenient access to primary care.
The challenge: Due to high costs and population distribution over broad geographic areas, over 20 million people in the U.S. do not have access to primary healthcare.
The work: As ‘Head of Design’ my role was to lead the team to improve all product and marketing design work and process.
To start, given the new focus on targeting employer customers, I led a brand strategy initiative that informed the new marketing strategy and the redesign of the brand identity system. This system included the logo, illustration, typography, photography, and the secondary ‘intersection pattern’ that ties back to company’s values. Leading the designers during implementation, the system was expanded across all digital, print, and event media.
With the goal of gathering qualified SMB and MDM leads, I collaborated with marketing team to build out an integrated campaign.
Core Messages
HealthTap is the most comprehensive and consumer-friendly app and website—delivering access to high quality, primary healthcare via 24/7 access to doctors, a comprehensive symptom checker, and a vast library of doctor-created content.
HealthTap leverages the collective knowledge of thousands of doctors in our network, as well as the millions of consumer questions in our database to deliver better, more personalized outcomes for employee members.
Our AI-driven app provides an unparalleled personalized experience for members, resulting in the industry’s highest engagement and satisfaction scores.
Simultaneously, I guided the product designers as we focused on improving and expanding the core ‘member’ and ‘care provider’ products. The team also created custom features within several white-label implementations distributed through our partner program.
The results:
1. Qualified leads increased by 370%.
2. Product NPS score increased to 64.
Going forward, HealthTap continues to strive toward activating and providing care to large groups of full-time and part-time employees.
Apps available: Apple app store
Marketing: Web site
Product design: Pursuing goals ranging between product UI simplification, to new feature introduction, to ‘increasing delight’, I’ve been privileged to work with a talented team of four designers.
In order to help bridge product and marketing experiences, the above animations were deployed in both core product and marketing sites. (Illustrator, Monique Wray, was commissioned and directed.)
Marketing design: Redesign of the navigation, structure, and visuals of the marketing site.
For marketing to employers, printed materials have proven successful. Samples include posters, cards, mailers.
Lounge deployed at various benefits conferences
The challenge: There are 28 million small businesses in the United States. The overwhelming majority are hidden from investors—too small for private equity firms, not yet suitable for traditional banks or private equity firms. Through a better experience and machine learning technology, CircleUp connects innovative, early-stage consumer brands with capital markets, empowering entrepreneurs to thrive and investors to participate in their growth.
The work 1, Universal Marketplace: In collaboration with a team of business strategists and engineers, Henrik designed the user experience of the Universal Marketplace. This product is the front end to the data driven insights on over 1.2M brands that large investors seek to evaluate. Investors can find, filter, compare, and gain introductions to companies that meet their specific investment criteria.
The work 2, CircleUp.com: In order to streamline the marketplace, as well as reflect CircleUp’s increasingly sophisticated brand, a complete redesign was needed. The effort involved simplifying the site’s overall structure, navigation, and visual design. After eliminating underperforming areas of the site, the content and functionality for investors and entrepreneurs was organized to be more intuitive. For the general homepage, and investor and entrepreneur landing pages, the aesthetic and content were refined to reflect the increasing sophistication of the CircleUp brand and the audiences. View live site here.
The results: Both the Universal Marketplace and the new CircleUp.com were warmly received by their array of constituents. Significant increase of both investor and entrepreneur adoption have continued, and the business model continues to be validated. As a privately held startup, CircleUp does not share performance data regarding the KPIs of these products.
First time users receive a brief ‘tour’ of key features of the Universal Marketplace
Investor’s dashboard for analyzing and managing companies that match their criteria
High level view of full site restructure
Fully redesigned homepage
Concept: mobile app for entrepreneurs to manage their raise
Sample wireframe and corresponding visual design for a CircleUp promotional event
Directed campaign imagery of top entrepreneurs
The challenge: Facebook acquired the ad serving platform ‘Atlas’ from Microsoft for over $100M in 2013. With an outdated brand and product, Atlas was far behind Double Click. Facebook embarked on a full rebuild of the tool and complete revision of the Atlas brand identity. Facebook wanted the ad tech industry, and publishers, to know that Atlas was being reborn with Facebook targeting and reporting capabilities.
The work: The design process Henrik led included brand strategy and positioning, competitive audits, extensive creative exploration, and implementation across a broad set of applications. Working with the Facebook Global Business Marketing team, the new identity was selected to reflect the audience precision and measurement that makes Atlas uniquely powerful, helping advertisers target and optimize campaigns for greater impact. To ensure a consistent and efficient roll out, Henrik created a thorough style guide of color palettes, photography, textures, grids, typography, and iconography.
The results: Launched during AdWeek 2014, Atlas made a huge splash in the digital advertising industry. As the tool itself, now built on a Facebook stack, was warmly received, the new identity was a perfect indication that Facebook’s family of apps and services is poised for advertiser success beyond the core Facebook app.
The site, created by the Atlas marketing team, is a sharp deployment of the brand visual vocabulary
The challenge: In early 2013, Facebook for Business was rapidly growing into one of the largest ad platforms for online. Yet, the way in which it presented itself to the ads industry did not reflect the humanity nor the spirit of the brand. The ads world needed to understand the uniqueness of the Facebook platform.
In addition to the brand challenge, the first version of the ‘Facebook for Business’ site had grown stale and the decision was made to focus the next generation on content for the self guided SMB advertisers.
The work | phase 1: Per the new brand strategy, Henrik conceived and directed a series of 32 photoshoots that established the human authenticity of the Facebook brand. These sessions yielded an image library that was used extensively throughout Facebook for Business marketing materials for years.
The work | phase 2: Collaborating with the design firm Fell Swoop, the Facebook team updated the site structure and refreshed a majority of the content. But before going live, the team realized there was still a lot that could be to bring personalized content and authenticity to the site. Working with the marketing team, Henrik designed both the ads recommendations, as well as the ‘Advertiser Help Center’ UI. Additionally, Henrik also designed features such as targeted homepage carousel treatments and user feedback tools.
The results: In the two quarters after the new brand expression and site went live, and new content areas of the site rolled out, the increase audience grew by 30%. The site became the ‘source of truth’ for SMB advertisers seeking help and education about the platform.
Design Team: Henrik Olsen, Zach Miller, Steve Farrell, Jarrett Fuller, Heather Freeland, and Fell Swoop
The above images, directed by Henrik, set the style for the ‘Facebook for Business’ brand
Images were used in a broad variety of exhibits
Created wireframe of advertiser support, which lived on the FB4B site.
The challenge: Because of Autodesk’s previous business model, most of their 137 products have been developed in silos. As a result, the products have inconsistent UI’s, and cause considerable user frustration. As customers workflows are increasingly crossing multiple products, those inconsistencies have resulted in a poor impression of the platform.
The work: To solve the problem, it was clear that Autodesk needed a unified and comprehensive system of design patterns, content guidelines, and reusable code components for the web based products.
Under this system, Autodesk product teams are enabled to build better products faster, and most importantly, bring consistency to the experience. The working title for the system is ‘The Human Interface Guidelines’ (aka, the HIG)
The process: Guided by the goal of making web based products ‘cleanly intuitive and uniquely Autodesk’, a robust design exploration yielded the overarching behaviors and aesthetics for the system. Based on the principles of ‘atomic design’, the system was organizing into four levels; Basics, Components, Layouts, and Experiences. These levels create the framework that provides flexibility and consistency across products and workflows.
Over a 10 month period, the team of three designers, directed by Henrik, designed the full library of ‘basics’ (color, type, icon style, grid, etc.), twenty UI components, and three common layouts in time for the launch at Autodesk’s 2017 X-Summit.
In addition to creating the core system, using the HIG components, the team designed and built the HIG website that serves as the single source for product teams to gather Sketch files, consume design and technical documentation, as well as submit component contributions.
The results: As of May 2018, HIG components have been integrated into a half dozen products, and the product design community has embraced the system. The associated React code, built by the HIG dev team, is being accepted and successfully deployed by product engineering teams. The efficiency and UI consistency gains have proven significant and continue to be measured. Shown to the left, as well as the launch video produced by Henrik, are just a few of the many patterns that make up the HIG.
Role
Creative direction & contribution of UI designs
Built entirely of HIG components, the HIG website is the central resource from which product teams can access source files, detailed documentation, as well as submit their own contributions.
‘Basics’ (above) are the foundational elements of the system. They set much of the aesthetic direction for all the patterns.
‘Components’ (above) are the building blocks for creating a UI. A component is a configurable, reusable, and may range from simple to complex.
This video was created for the 2017 launch of the HIG during the Autodesk X-Summit. Produced in collaboration with French Press Films, the video features Henrik, and several product design leaders, introducing the spirit and the value of the system.
The challenge: The Power Editor app was created to enable advertisers to create and manage a large volume of complex ad campaigns on Facebook and Instagram. With the rollout of increasingly sophisticated ad products, such as ‘reach & frequency ads’ or ‘dynamic product ads’, Power Editor needed to continuously evolve to meet the needs of these top spending sophisticated advertisers.
The work: Through user observation and interviews, iterative prototyping, and an amazing team of engineers, the newly designed Power Editor launched in 2015. Specific features designed by Henrik included ‘the main table’, ‘reach & frequency flows’, ‘dynamic product ad creation flows’, ‘the tagging tool’, and ‘error reporting’ tools.
The results: Advertisers significantly increased their volume and sophistication of ad campaigns with the iterative launches of new ad products and the improved UI. Facebook’s overall ad revenue grew significantly during this period, and Power Editor was a very significant part of that.
Main Dashboard for Power Editor
To simplify the process, the entire flow was designed into a modal that allowed for a linear process for 'Reach & Frequency' ad buying
Shown above are the final 4 key modal screens of the 'Reach & Frequency' ad buying process.
Direct Response Advertisers who simultaneously market hundreds of products needed an automated way to create ads. The Dynamic Product Ads (DPA) set up flow was designed to link to the advertiser's product database, while also facilitating retargeting rules creation. Show here is the preliminary diagram view for dynamic product ad set up
This panel is the critical point at which advertisers choose whether to use their entire catalog, or to create smaller product sets
Within the DPA set up flow, the above modal was designed to allow advertisers to create a limited sets of products for inclusion.
Advertisers needed more granular control of their ad campaigns. From setting budgets, to defining audiences, to individual ad creative content. To facilitate this, Campaigns would now contain two additional levels. 'Ad Sets', and within those, were the individual 'Ads'. The above wireframe is a concept to give clarity toward the 3 levels.
As the volume of ads increased, advertisers needed ways to quickly group related campaigns and ad sets. We decided to add a tagging functionality to the table, such that groups and/or individual ads could be tagged. When sorting by tags, advertisers could easily make bulk edits when needed.
When creating reusable UI components for Power Editor and Ads Manager, Henrik founded ‘the BIG': a design system and code repository for ads interfaces.
As Creative Director and senior leadership team member, I provided direction, inspiration and process for the 14-18 member brand experience team.
Shown here are a few of the projects on which I led and/or served as lead designer.
In my role I had the pleasure of designing much of the printed marketing materials. Items ranged from promotional pieces, to event invitations, and occasional client promotion deliverables.
Invitation for event celebrating Hot Studio's 15th anniversary. Featuring portraits of each employee at 15 years old.
Invitation for event celebrating Hot Studio's 10th anniversary.
Direct mail announcement of book launch event held at Hot Studio
Part of an annual tradition, this Summer promotion was sent to all clients and friends of Hot Studio.
A collaborative piece designed at Hot Studio. Concept and art direction by Henrik Olsen. (Photo by Kirk Amyx)
Silkscreen printed in Facebook's Analog Research Lab
Brand visual vocabulary for Akamai - ‘Fast Forward’
A few of the websites designed for Hot Studio clients
The challenge: Produced biannually by the AIGA SF, CompostModern is a forum for the design community to learn about trends, programs, and technology behind designing in a more ecologically productive way. The conference is a service to the membership, and it is also a primarily source of funding for other AIGA SF programs. High attendance and profitability has always been critical.
The work: Working with event producer Sarah Kennon, Henrik provided overall creative direction for every aspect of the conference. Joined by Perin Rambhia and a set of AIGA board members, there were delightful collaboration sessions around themes, venues, aesthetics, and speakers. While providing creative direction and guidelines, Henrik also was ‘hands-on’ with many of the individual event applications. From stage design to social marketing campaigns to event name tags, the design system was thorough.
The results: The conference was very well attended, with over 540 participants during the 2 days. This was approximately 35% more than previous years, regardless of the increased registration price. Feedback around the event was extremely positive. Several participants suggested: “given the production value and content, an even higher price would have been easily accepted.” The buzz for the event was enormous.
The long single page site was designed with parallax animations. Site was built by Hot Studio. Design was collaboration of Henrik Olsen and Perin Rambhia,
To open each day of the event, this animation piece was created by filmmaker Max Batt. Creative Direction by Henrik Olsen. Music by 'Birds & Batteries'. Aerial Photography by Gilles Roux.
Logo design comes out of a collaborative and thoughtful process around developing a brand strategy. The essence of a company's mission, vision, and values must be expressed, and yet the logo must be simple enough to remember instantly, and strong enough that all constituents can rally around it.
With every logo I've designed, there is a meaningful story that evokes that spark of a company. From tech giants like Facebook and Lucent, to fast moving start ups like SpringStreet or Dave Eggers' non-profit 'Once Upon a School'.
