Choose your language

Choose your language

The website has been translated to English with the help of Humans and AI

Dismiss

Hero 1

Level Home App • Designing a Streamlined Experience for Homeowners and Community Employees

  • Client

    Level

  • Solutions

    Mobile AppsPlatformWebsites & Platforms

Level Hero Image

Introduction

A shared goal to unlock unprecedented convenience and security.

In 2020, Level introduced the Level Bolt, a smart lock that revolutionized the smart home sector. A vision realized by former Apple employees, the Level Bolt boasts a distinctive lock design complemented by an intuitive and user-friendly software interface. Following the launch of its inaugural product, Level expanded its offerings from single family homes to multi-dwelling units in 2021, pledging to deliver a comprehensive experience through the fusion of engineering design and software development expertise. This marked the beginning of our collaboration with Level, in which we leveled-up the app and web experience to enable more connected and secure communities.

00:00

00:00

00:00

Design Foundation

Designing the future of smart communities through software and hardware engineering.

Our initial collaboration with Level began by building upon their existing foundation. Originally an access-only product, the app needed to evolve to accommodate the complexity of an expanding feature set. Together, we crafted a new visual language, incorporating key features like multiple door access points, intercom and front-door video calls, lighting and temperature controls, as well as sensors and automations.

Our Craft

We spent ample time defining new interaction patterns that would work and delight users experience-wide.

Drag
For More!

Monk Thoughts As we matured the multi-dwelling feature set, we also reimagined the original app experience to align with behavioral changes and the new visual language, ensuring a cohesive and unified UX design.

00:00

00:00

00:00

Vinny Araujo Creative Director
  • Consumer 2 1
  • Consumer 3
  • Consumer 4 5

Designing the future of community management

Enhancing self-guided tours with community management and bespoke booking.

Our next endeavor for Level involved designing a secure web platform, facilitating seamless access for visitors to Level communities. Primarily catering to two user groups—prospective buyers/renters and maintenance/services—the platform streamlined community access, eliminating the need for a community employee to guide visitors. We further complemented the visitor access tour with a web-based scheduling tool, providing community management the flexibility to allow prospects to book and manage tours into their community. Our platform expertise allowed for a holistic experience in community exploration.

Visitor
Monk Thoughts We complemented the visitor access tour with a web-based scheduling tool, providing community management the flexibility to allow prospects to book and manage tours into their community.
Agustina

A fully integrated ecosystem

Prospects can book community visits online without contacting a sales office.

  • Scheduler 1
  • Scheduler 2
  • Scheduler 3

Going beyond the consumer product

Building beyond the consumer experience.

With the new design system handed off to Level's engineering team, our focus shifted to the installer product. Leveraging our atomic design system, we repurposed and created components for the innovative app. The Installer app serves as a tool empowering Level to implement hardware and network packages seamlessly within any condominium complex. Installers can create, expand and manage a mesh network of devices for amenities, access points and individual units in the complex. All in all, our partnership with Level marked a significant step towards creating a more connected and secure living experience, a testament to our software development prowess.

  • Installer 1
  • Installer 2
Level Bolt

In partnership with

  • Level Home
Client Words The Monks operate as an extension of our team. They push the envelope on the possible, focusing not only on designing beautiful things but making sure those experiences work. That’s the hard part. Their craft and attention to detail are a cut above.
Ken Goto

Ken Goto

Founder & CTO Level Home

Want to talk platforms? 
Get in touch.

Hey 👋

Please fill out the following quick questions so our team can get in touch with you.

Can’t get enough? Here is some related work for you!

BITKRAFT Web3 Platform • Building a Game-Inspired Experience for Future Investors

  • Client

    BITKRAFT

  • Solutions

    ExperiencePlatformWeb3Websites & PlatformsImmersive Brand StorytellingTechnology ServicesTechnology Consulting

00:00

00:00

00:00

Case Study

0:00

Ready player two: the start of an innovative creative partnership.

BITKRAFT is a global, early-stage investment platform focused on gaming, Web3 and immersive technology. Positioning itself at the intersection of the real and virtual worlds, BITKRAFT invests in the future of "synthetic reality," connecting funders with founders of innovative games and technologies. The team came to us to redesign their web platform to better reflect this unique identity, while simultaneously catering to its two distinct audiences: founders who value vision, networking, and personal connection, and funders who seek deep insight, a proven track record, and trust.

Gamifying the immersive web experience through UX design.

With the goal to blend the worlds of gaming and investments in a manner that felt authentic and trustworthy to both, we implemented game-inspired elements throughout the user experience. The intro sequence is designed to replicate the experience of booting up a game, rather than loading an investment platform. Navigation across the site uses WASD keys and a radial menu reminiscent of using a joystick, adding to the gaming interface feel.

The immersive website design adapts to the type of content that visitors are currently viewing. For example, we opted for a clean, spacious design to draw user focus with more buttoned-up content like career-related pages. However, when discussing synthetic reality and other visionary content, we dove into the digital space with animated WebGL backgrounds for a futuristic look.

 

Our Craft

Game-inspired elements

  • Form shaped outn o0f little white cubes is floating in a dark sky with stars. The logo for BITKRAFT is placed small at the bottom.
  • Dark with in light grey cards of an avatar with a name below it. One avatar is a futuristic woman, one looks like a dark lord and one like a warrior.
  • screenshot of the website

Peek into the tech behind our website development process.

We managed data using DatoCMS, a headless CMS that enabled us to transmit data into our React and Next.js build. For the 3D elements, we created a WebGL framework in-house. The people page carousel was achieved by integrating GSAP, WebGL, and CSS perspectives and mouse events, maintaining web accessibility standards while creating a sense of depth and layering.

  1. Tech

    A deeper look behind the scenes • Inspired by video games, the BITKRAFT platform needed to be fun and smooth to navigate. We used a series of technical solutions to build a satisfying navigational experience.

  2. Our process involved a series of key challenges: enabling a playful experience while keeping W3C accessibility in mind, integrating it with DatoCMS, and creating over 100 dynamic components across two different themes (content and digital views). The bonus challenge: developing it all in a timeline of only two months.

  3. Transitions bring the experience of navigating the page to life. We synchronized the WebGL scene with the user’s scroll position, harmonizing the transition from one piece of content to the next through the use of sound and animation.

  4. To enable HTML rendering and keyboard accessibility for the radial menu, we leveraged CSS properties such as transform, mask, and clip, enabling the creation of a circular menu shape. GSAP and event listeners enhance the game-inspired experience.

  5. Inspired by collectible card games, the People page integrates GSAP, WebGL, CSS perspectives and mouse events. WebGL tracks the position and rotation of each element, while manipulating the Z position creates a sense of depth.

  6. The frontend transmits dynamic data from the CMS to WebGL, which renders each brand’s assets on the Portfolio page. We used CSS filters, to enhance the cohesion of the WebGL elements and achieve a blurry glass effect.

     

  7. Want to see it all in action? Explore the synthetic reality:

Swipe
For More!

Drag
For More!

Delivering an innovative user experience for BITKRAFT.

Together, we built a web platform that successfully offered an authentic and engaging user experience tailored to the needs of both founders and funders. The site not only reflected BITKRAFT’s unique identity in the gaming venture capital space but also added value by providing an innovative and intuitive interface for information and navigation. By incorporating game-inspired elements and adapting the website design to the content, we helped BITKRAFT reinforce their brand identity and commitment to synthetic reality. This immersive platform not only serves as a testament to BITKRAFT’s innovative approach but also sets a new standard for user experience.

Awards

  • 1x FWA

  • 1x Awwwards

Want to talk experience? Get in touch.

Hey 👋

Please fill out the following quick questions so our team can get in touch with you.

Can’t get enough? Here is some related work for you!

An U.S. Airforce jet
The earth with a U.S. Airforce logo above it

US Air Force Website • A Platform Taking Personalization to New Heights

  • Client

    US Air Force

  • Solutions

    PlatformWebsites & Platforms

00:00

00:00

00:00

Case Study

0:00

Proving the sky’s the limit for effective, personalized platforms.

As the most technologically advanced branch of the US Armed Forces, the United States Air Force has long attracted STEM-oriented, academic achievers. Together with GSD&M, we built an innovative platform that takes potential recruits on a digital journey through carefully curated content pathways tailored to their interests.

An iPad showing the U.S. Airforce website

Taking user experience to new heights.

Once users land on the US Air Force website, they’re ready to take their first steps to get to know the military service inside and out. And as they explore, the platform gets to know them better, too. Through intelligent UX design, the experience serves content based on individual viewers’ preferences and personas, helping them get a feel for what to expect from a career in the US Air Force. This way, the content bypasses time-consuming queries to identify the best career path for each qualified recruit.

Our Craft

From personalized paths to career paths.

  • A person in the Airforce with headphones on
  • The earth in space
  • A picture of the U.S. from space
  • Career screen from the U.S. Airforce website
  • Salary screen from the U.S. Airforce careers website

A data-fueled journey.

We believe that users should see a fair value exchange in return for their data. The US Air Force platform was built around this philosophy, generating each user’s path based on intrinsic and extrinsic motivators. Short breaks in the pages encourage readers to share details about who they are, what experience they have, and what they’re looking to gain from a career in the US Air Force. And these paths are always evolving; a variety of independent modules makes it easy to author and adjust bespoke pages as we learn more about the needs of the audience.

Airforce in action
A person in the Airforce standing in front of a plane

Results

  • Increased conversion rate of 47%.
  • 37% increase in qualified applicants.
  • 1x Awwward

  • 2x FWAs

  • 6x Addys

  • 1x Cannes Lion

  • 3x LIAs

  • 1x Webby

Want to talk platforms? 
Get in touch.

Hey 👋

Please fill out the following quick questions so our team can get in touch with you.

Can’t get enough? Here is some related work for you!

Pave the Path to More Personalized Learning and Lessons with Edtech

Pave the Path to More Personalized Learning and Lessons with Edtech

5 min read
Profile picture for user mediamonks

Written by
Monks

Pave the Path to More Personalized Learning and Lessons with Edtech

In many places around the world, learning disabilities and impairments often go undiagnosed due to a lack of resources and access to facilities that test for them. But when missed, learning disabilities or color blindness can oftentimes discourage children from participating and excelling in class–sometimes eroding self-confidence in the process, which in turn can lead to far-reaching difficulties later in life.

But technology can help bridge the divide in communities where traditional testing isn’t scalable or accessible to students—so when children’s multivitamin brand Pharmaton Kiddi wanted to impact kids’ lives through technology, MediaMonks’ innovation team sharpened their pencils and put their digital skills to the test. The result is an assessment designed to determine whether students may have one of the learning impairments mentioned above—all while they’re having fun by playing their way through an engaging, interactive digital picture book.

Called Kiddi World, the app takes users aged 9-12 on a journey through the charming World of Words, which is populated with living school supplies and rendered in a charming, painterly aesthetic. Our hero is a sharp, courageous pencil named Lapi in pursuit of Gomba, an irritable eraser whose rampage results in the erasure of parts of the world and words becoming jumbled together. Through a series of visual and language-based activities, kids must erase the prickly eraser’s influence on the world and set things right. The app shows what edtech can achieve through a hands-on approach that brings together data, UX expertise and best-in-class creative storytelling.

01KiddiWorld

Gomba, a rubber eraser and the villain of the story, rubs Lapi the wrong way.

Reducing Testing Anxiety with Under-the-Hood Innovation

“Kiddi World fills an empty space where you can pre-diagnose the child,” says Geert Eichhorn, Innovation Director at MediaMonks. He cautions that it isn’t meant to replace a medical professional’s diagnosis of any impairment. “It functions as an indicator based on professional tests,” he says, prompting parents’ or teachers’ attention if a child is likely to have an impairment.

Through AI, the test can measure students’ legibility with precise accuracy—for example, how much a student’s writing extends outside the bounds of a line. “It’s a matter of determining a percentage of error that allows us to apply some simple rules,” says Luis Guajardo, Creative Technologist at MediaMonks, “to tell teachers to look further into it and check in with the child.”

And that’s a good point; while children can play through the test by themselves (guided by text and voiceover instructions that lead them through timed exercises), the app doesn’t signal a reduction in the teacher’s role. Instead, it gives teachers a tool they can use to help them understand how individual students process information differently. They can apply this knowledge to how they educate their students—like making a customized lesson plan or supplementary programs—to aid in these students’ learning.

With so much happening under the hood, children are free to enjoy the assessment without feeling the pressure and anxiety that comes with being tested. Instead, the experience is designed and built to emphasize a child’s unique journey exploring the world with Lapi.

Monk Thoughts Kiddi World fills an empty space where you can pre-diagnose the child.
Portrait of Geert Eichhorn

One of the more interesting ways the app achieves this is through handwriting recognition, which aids in identifying dysgraphia automatically as students write. Many touch devices, like Apple’s iPad, natively offer handwriting recognition to translate users’ handwriting into print text. This feature is great for extracting meaning from handwriting, like if a user is jotting down notes. To detect atypical writing behavior from typical ones, MediaMonks took handwriting recognition a step further.

“We used an external tool that could measure stroke speed and density, helping us measure if a line was made fast or slow,” says Eichhorn. These variables are key for making a precise assessment for whether a student might have dysgraphia. “We employed a set of rules that identify aspects of dysgraphia that are particularly notorious and can be examined by the app,” says Guajardo.

In addition to native handwriting recognition, the team also had to disable spell check native to iOS apps. If a student’s spelling mistakes are corrected as they go, it would impact their score—an obvious, but easy to overlook, barrier to accuracy. “Instead, we use an API that determines if what a student has written is a real word, or close to a real word,” says Eichhorn.

Building Immersion Through Design

The tech under the hood is remarkable, but the designs on the surface of the experience are what bring Kiddi World to life. For every action, students write or draw something on the screen, adding to the sense of engagement as they make their mark—literally—on the story’s world. This is why the user’s avatar is a pencil: Lapi reflects the everyday tools that students use in class.

Monk Thoughts The app can measure stroke speed and density, helping us measure if a line was made fast or slow to aid in making a result.
Portrait of Geert Eichhorn

Narrative is ingrained into each of the challenges that kids must overcome in their journey through the World of Words. First, they’re tested on color blindness: Gomba has erased a path through the land, so readers have to draw it back by tracing a line that cuts through a pattern commonly used in tests to determine the type and intensity of color blindness that one might have. Users complete this challenge by drawing a series of segments of the path, which then come together like comic panels to create a full scene.

If a student is color blind and therefore can’t see one or more paths, they can simply skip that segment. This way, students aren’t penalized for something they can’t control, which is critical to how the assessment is designed and progresses. No matter how students respond or interact in any of the exercises, results aren’t telegraphed to them nor do they affect the narrative. Instead, results are saved in a report that’s delivered to the teacher upon each test’s completion.

Eichhorn notes that the narrative is constructed in a way that gives students a real sense of progress. “In the first chapter, students are working with Lapi to respond to what Gomba has already done,” he says. “In the middle, they’re about the same level as him, and in Chapter 3, they’re ahead of him and trying to thwart his plans.”

04KiddiWorld

The onboarding process gets the test off to an exciting start, inviting kids to color in Lapi however they like.

The flow (and lack of scoring interrupting the narrative) ensures students feel confident and empowered regardless of difficulties they face in the assessments—of which there are a variety. “A lot of testing is required for accuracy,” says Eichhorn. “We found that we needed maybe six times as much information than we originally imagined to come to a reliable and accurate result.”

Still, the team was able to deliver the necessary assortment of tests seamlessly integrated into an engaging narrative—a good test for partners who understand both tech, user experience and visual design. From responding to a direct regional need and offering a familiar and engaging narrative experience, Kiddi World shows that innovation doesn’t have to come at the cost of usability or accessibility. In fact, it can help us facilitate better accessibility to users who need it.

Tools like this can have a profound impact on education—not just by aiding students who might have one of the tested learning disabilities or color blindness, but by initiating more personalized educational plans. By providing measured feedback on how students process information, edtech like Kiddi World enable closer, one-to-one connections between students and teachers, helping them identify the best individualized approach to enhance a student’s learning.

Aiming to make testing for learning disabilities scalable for schools and stress-free for students, MediaMonks built a story-driven assessment employing technical innovation and best-in-class digital design. Pave the Path to More Personalized Learning and Lessons with Edtech We put ourselves to the test in finding a new way to pre-diagnose learning disabilities, paving the path to more personalized educational experiences.
Innovation UX design UI design digital narrative digital stories edtech education health pharmaceutical iPad children kids students

Choose your language

Choose your language

The website has been translated to English with the help of Humans and AI

Dismiss