inHub
Learning through Innovation & Invention with an Online Community
A reimagining of the education sector of The Henry Ford to focus on virtual learning through their innovative curriculums and resources.
Branded Education Multi-Site – Created in Association with Dogstudio/DEPT
✨
Workshop Participation
📚
Content Strategy
🏗
Architecture
📐
Wireframing
🎨
Web Design
✨ Workshop Participation 📚 Content Strategy 🏗 Architecture 📐 Wireframing 🎨 Web Design
Brief
Goal
Good education is becoming harder to come by – so we created a hub for educators to gather resources and students to learn outside the classroom. Being a tier of The Henry Ford, content accessibility between sites is key to our brand, as well as promoting the Invention Convention. The platform will utilize a subscription model to access all content and exclusive courses for professional development.
Visitors should have a clear understanding of:
inHub’s relation to The Henry Ford & Invention Convention
The types, topics, and age ranges for education resources
Distinction between virtual and in-person learning experiences
What’s included in a subscription with ease of sign-up
Analysis
To gain a deeper understanding of all the business connections and current content strategy – we aimed to align and empathize with these users to deliver cross-connections of content effortlessly 😌
Workshop & Ideation Exercises
To gain a deeper understanding from everyone at the table, we conduct exercises aimed towards the project goals
📝
🗺
🔎
🎯
Content & Features Identification
With user journeys fresh in the mind, we follow up the activity by defining the content users need, the features users need, and anything the client wants to communicate to the user.
Content & Features Prioritization
As the saying goes ‘if you cater to everyone, you cater to no one’, so we take everything uncovered and plot it on a priority of what is the most crucial to the user vs what is most crucial to the client.
🖼
Moodboards
A selection of imagery formed into sets of moods. Clients are asked to give a quick reaction to the general mood, then we dive into the details on each board – focusing on likes and dislikes with rationale.
💡
Access to Invention Convention through inHub, seamlessly
💡
Forms need to be streamlined and user-friendly
User Journeys
Putting the primary personas on the path to achieve their main site goal. Together we shine a light on thoughts and feelings the users have at each touch point while simultaneously identifying pain-points and opportunities to keep users feeling good through the experience.
Persona Review
A moment for the client to empathize with our persona proposal and edit any information while uncovering additional personas.
New Points of Interest
Post-workshop, we can identify new insights to translate to the project
💡
Modern, kid-friendly design reflective of the new inHub brand
💡
Lead with The Henry Ford created curricula and experience
💡
inHub is the parent product of Invention Convention
💡
Both brands should be apparent in the ecosystem
Content & UX Strategy
Focused & Friendly Navigation
Navigation Structure
Current users were struggling with identifying who’s who and what’s what between the Invention Convention and all the offerings The Henry Ford has on and offline. With the brand representation goals already in mind – and the new inHub service – we wanted to expose the ecosystem through navigation and discovery flow.
By focusing on navigation grouping that represents each service, we quickly give the user enough insight to understand this is a product. Plus the additional links in the navigation to jump to the parent site shows the users the hierarchy of THF’s system.
Flexible & Practical
Component Design System
Content being number one, we knew we needed to shift our mindset from focusing on the page design to component design first. inHub has different topics, documents, and courses to display – so let’s give them the blocks to build it themselves. With the guide of a rigorous functional document, we’re able to show the connection between the Invention Convention and inHub ecosystem as well as provide key development insights, asynchronously.
Our most in-depth functional document to date. This is just a sampling of one component breakdown for all the properties within. We made it aware to the client how the elements work behind the scenes – and more importantly what they can and can’t manipulate.
With our dual sites, there are some minor discrepancies in image ratio or decorations, which you can see marked in orange for Invention Convention and blue for inHub.
Brand Application & UI Design
Connected Through Learning
Brand & Content Flow
inHub’s brand celebrates the joys of education while representing the community connection elements with linear details. We expanded on this system of connection to guide the user to important pieces of content on each page. The central line leads you, while animated bursts and bullets show you when to stop and engage. Our big moment here is our subscription push, enlarged in its own moment along the path.
Innovate & Inspire
Brand Reimagining
E-learning platforms are nothing new, but inHub’s angle of innovation for all by offering free resources is inspiring. We bring that feeling of inspiration and innovation throughout the UI of the site. A modern, clean setting lets the content be the star, while the tones of blue with splashes of yellow bring gentle emphasis to the elements. Coupled with our secondary palette of teal and violet, we are able to utilize these unexpected, scientific colors for actionable elements.
Two Looks, One System
Color Design System
Blending two brands is a delicate dance, especially ones that share that same site structure. Each brand has a different primary audience – one being for educators, the other being for K-12 students. Thanks to shape and color, both brands come to life when they need to in the user’s journey. inHub being more sharp, cool, and scientific – Invention Convention being bubbly, friendly, and warm. As an extra push for the Invention Convention experience, you can find your way to more through the orange actions on inHub.
Credits & Roles
Design
Megan (Jax) Jackson
Lead UX/UI Designer
Simon D’haenens
UI Designer
Megan (Jax) Jackson
Motion Design
Development
Jeff Kelley
Lead Full Stack Developer
Thao Delefortrie
Lead Frontend Developer
Strategy
Anthony DuPont
Technical Direction
Maxime Rimbert
Creative Director
Larry Gerard
Lead UX Designer (Workshop)
Leadership & Production
Henry Daubrez
CEO & CCO
Nicolas Moies-Delval
CGO & Managing Partner
Brian Cicero
Lead Producer