UX/UI
Select a project:
Futurelab+
Genentech and Discovery Education partner to deepen student understanding of the full biotech product development lifecycle and maximize student exposure to industry trends, practical applications of biotech skills and concepts, career paths, and industry professionals with this comprehensive ready-to-use set of courses, lessons, capture sheets, master class videos, and more.
Role: Senior Creative Director
Client: Genentech
Project sizzle reel
A 90 second tour through highlights of the Futurelab+ project.
Overview
Mission Statement, User Journeys, Visual References
The beginning of our efforts starts with understanding the project goals and current branding elements. We put together an overview document and proposed sitemap based on the required deliverables and share with the client for approval on overall architecture and visual approach.
User Testing
Research and Educator Interviews
To inform the development of the Futurelab+ website, two research studies were performed. The intent of the studies were to gain insights directly from high school educators to assess the wireframe screens for ease-of-use and clear navigation through the course, unit, and lesson pages. An iterative approach allowed the UX/UI team to refine the wireframes and re-assess their work to confirm teachers had an improved user experience after a second round of testing.
Wireframe
Project Rollout and Content Strategy
The wireframe and content strategy phase enable us to draft out the overall screen structure including content and visual blocks. We establish the overall hierarchy of the page flow and cross-promotional sections. We have established components that enable us to quickly execute an overall website system and all the visual language to differentiate each program site. During this phase, we also start positioning the overall program language tone and content strategy.
Design System
Color Palette, Font Family, Icons, and Grid Structure
The design phase includes bringing the approved wireframe structures to life with typography, color, photography and illustrations all visually aligned with the partner’s brand guidelines.
Tech for Tomorrow Technology and Innovation Program Website
Celebrating the 20th anniversary of The Tech Interactive, the launch of a national in-school initiative, provide every student a virtual pass not only to The Tech’s most exciting exhibits but also to its expanding universe of “Tech For Good” impact and innovation.
Objectives:
Nationally Scale The Tech’s Cyber Detectives, Solve for Earth, Tech for Global Good,
and The Tech ChallengeBrand Alignment and Amplification: Showcase the new face of The Tech Interactive to national audiences
Extend the impact of The Tech’s on-site programming
Role: Senior Creative Director
Client: The Tech Interactive
Overview
Mission Statement, Visual References, Content Strategy
The beginning of our efforts starts with understanding the project goals and current branding elements. We put together an overview document and proposed sitemap based on the required deliverables and share with the client for approval on overall architecture and visual approach.
Wireframe and Content Strategy
The wireframe and content strategy phase enable us to draft out the overall screen structure including content and visual blocks. We establish the overall hierarchy of the page flow and cross-promotional sections. We have established components that enable us to quickly execute an overall website system and all the visual language to differentiate each program site. During this phase, we also start positioning the overall program language tone and content strategy.
Homepage
Virtual Field Trip, registration
Virtual Field Trip, live
Virtual Field Trip
Cyber Detectives
Tech for Global Good
Solve for Earth
About the Program
Design System
Color Palette, Font Family, Patterns, and Grid Structure
The design phase includes bringing the approved wireframe structures to life with typography, color, photography and illustrations all visually aligned with the partner’s brand guidelines.
