MJD named Webby Award Honoree for Best Website Navigation/Structure in 2018

MJD named Webby Award Honoree for Best Website Navigation/Structure in 2018

By: Lindsey Harris

We are thrilled to announce that the American Girl ‘Create your own’ website has been named as a Webby Award Honoree for Best Website Navigation/Structure in 2018. This marks the fourth year in a row that MJD has won a Webby Honoree. In addition, the MJD Create Your Own experience also won this year:

  • W3 Awards Gold for Website Features-User Interface for Websites
  • W3 Awards Gold for Toy and Hobby Website
  • W3 Awards Silver for Shopping Website
  • Regional Addy Silver for Consumer Website
  • Regional Addy Silver for Digital Creative Technology: Interface & Navigation

"As an Honoree in the 22nd Annual Webby Awards, your work ranks in top 18% of all work entered from around the world, as judged by the Academy."

The team is currently designing and building interfaces with even higher levels of personalization for The Container Store, Levi’s, and Universal Studios. Stay tuned for new work in the Fall!

Other MJD Award Winning Work

About the Webby Awards

Hailed as the “Internet’s highest honor” by The New York Times, The Webby Awards is the leading international awards organization honoring excellence on the Internet, including Websites, Film & Video, Advertising, Media & PR, Mobile Sites & Apps, Social, Podcasts & Digital Audio, and Games. Established in 1996, The Webby Awards received more than 13,000 entries from all 50 states and 70 countries worldwide this year.

Component-Based Typography Systems

Component-Based Typography Systems

By: Svante Nilson

Creating usable components in digital design is an essential part to building a design system and systems help create consistency, which is a core tenant of digital design. The more modular our components, the more consistent the messaging and the more beautiful our experience. Modular elements need to flex to fit content and viewports. Here’s how we’re using this method at MJD to build component-based design systems from the ground up.


The typefaces are going to do a lot to communicate the character and tone of our experience. Like choosing a car it’s wise to be practical so consider legibility and flexibility but it’s also a bit of a personal decision so pick something with a personality that communicates your product’s values.

Make sure the font is legibility and flexibility. Sufficient weights, italics, international characters all need consideration. Finally, does it pair well with other fonts. Is there a brand font in place this needs to work nicely with? Or are you stuck with a poorly drawn font and style guide? Remember, there are no bad fonts only bad typographers.


Not only does your typography need to be readable in small sizes but the colors you choose should contrast with the backgrounds of your experience. Do you need a heavier weight at smaller sizes? There are a few tools online that will check your PSDs and HTML for contrast. Photoshop also has two color blindness filters protanopia (red) and deuteranopia (green).


Line lengths should be 8-12 words and leading should be approximately 1.5 x your type size. When determining units of measurement, it helps to start in PS or Sketch with pixels but we use REMs to determine relative values for different screens. This helps with our systematic approach to designing and developing our digital experiences that work in all sizes.

Modular Scaling & Device Sizes

At MJD we’ve been implementing a fluid front-end framework that scales nicely based on device size. It’s a sophisticated algorithm that is not just 1:1 to device size, there’s some magic math in the formula that controls the rate of scale, keeping things from getting too small. Traditional responsive frameworks set the values at different breakpoints, with a fluid framework the calculations are built into the system. Remember the 8-12 words per line rule? We can maintain that across all devices. Brilliant!

In keeping with the rules of good typography, you should implement some sort of mathematical  scale ratio to determine type sizes whether it’s the Golden Ratio, Minor Third or Perfect Fourth.

Style Guide

Record your work in a digital style guide. When creating systems, look to define at least 3 but up to 6 H tags. For more complex sites you might want to define subheads, body, CTA styles as well. Beyond type sizes, leading and line length make sure you’re accounting for color and tracking. The more detailed the better here. Spending the time to over-communicate here will pay dividends in the end. These practices are best implemented at the beginning of a project.

Design QA

You’re always going to need to build in time for design QA. Ideally you’ll have thought of every scenario but inevitably you’ll need to sit closely, designer and developer, and make adjustments. Designate time to test how your systems work in different viewports. Is it legible, readable and beautiful?

In Summary

When building a system of reusable components make sure you’re doing things right from the beginning. Creating this system at the outset will save countless hours in the long run. Remember, type needs to be legible, flexible, communicate brand values. Use modular scaling and vertical rhythm, build a coherent style guide and make sure to test your results.

How to Create Great Commerce Experiences in 2019

How to Create Great Commerce Experiences in 2019

By: Jeremy Duimstra

Today’s retail landscape is very interesting, to say the least. Consumer expectations are higher than ever, and we’re seeing all sorts of players — from larger-than-life corporations like Amazon to media companies like Buzzfeed — disrupting the retail space.

With all that going on, you might be wondering, how can you compete?

We can answer that in two words: commerce experiences.

Commerce what, now?

Commerce experiences are digitally-powered initiatives that let shoppers interact and transact with retailers in new and unique ways. They take traditional retail actions (like browsing products or adding items to a cart) to the next level, by making the shopping experience more immersive and exciting.

But what exactly does that look like?

The answer will vary from one retailer to the next, but upon studying brands that are doing it right, we’ve identified a number of components that contribute to amazing experiences.

Let’s have a look.

Implement omnichannel experiences

Omnichannel is no longer a trend or a hyped up idea — it’s a way of life. The majority of modern consumers move across various channels throughout their shopping journeys, with a whopping 90% of consumers moving between devices to accomplish a goal.

Needless to say, retailers that fail to provide compelling omnichannel experiences will lose out to those that are doing it right.

The successful omnichannel initiatives of the future won’t just be about letting people “buy” on different channels or devices; retailers that will win the omnichannel game will be the ones that can provide seamless brand experiences across channels.

Consider American Girl’s flagship location in NYC. The store features a “makers” area called “Create Your Own,” in which guests can use in-store touch screens to create custom dolls that celebrate their individuality. That experience isn’t limited to the store, though. The “Create Your Own” tool is also available online and on mobile, so girls can enjoy the experience whether or not they’re in the shop.

Another excellent example comes from Sephora, which delivers a smooth omnichannel experience for guests who attend their in-store classes.

The classes take place offline in a special area of the store, where an instructor hand-picks products for each student and gives them hands-on training on various makeup techniques. Once the class ends, Sephora sends a follow-up email containing a “Beauty Recap” and digital makeover guide. The email also showcases the exact products used in class, so shoppers can purchase them online or on their phone.

Keep these examples in mind when crafting your commerce experience strategy. Design your experiences in such a way that people can access the information and products they need no matter what channel they’re using.

Tip: Implementing omnichannel experiences isn’t as difficult as you might think. Many retailers believe they need to rebuild their systems or make major IT or operational changes to support these initiatives, but if you’re working with a savvy technology partner (like us!), you can get your commerce experiences up and running easily.

At MJD Interactive, we can work with your existing API, IT infrastructure, and tech stack to bring your projects to life.

Embrace the need for constant reinvention

Regularly updating your store and website visuals is necessary to keep shoppers interested — and drive repeat visits in the process.

Forward-thinking retailers recognize this and are structuring their stores accordingly.

Take Story, the concept store in NYC “that takes the point of view of a magazine, changes like a gallery and sells things like a store.” Story revamps its location from the ground up every four to eight weeks, which means everything from its design and layout to the products it sells changes depending on specific themes. Doing so keeps the store fresh and gives people new reasons to come back.

Or consider Amazon’s 4-star stores, which are designed to sell products rated 4 stars and above. The shops are incredibly dynamic, as Amazon regularly updates their assortments based on what’s trending and popular online.

Take a leaf out of the playbook of these stores when designing your in-store experiences. Revamp your stores — or at least introduce new things — every few months to continuously drive excitement and intrigue.   

Tip: The most efficient way to implement this is through technology. Tools such as web/mobile applications, digital signage, tablets, and a user-friendly CMS will enable you to easily update your digital products, assets and content, so you can continuously introduce new experiences at every turn.

Promote human connections

Technology may be enabling consumers to perform a variety of tasks without leaving their homes, but the need for human connection is more important than ever. A 2018 poll by Axios found that in-person interaction is still the top communication method across multiple age groups.

This is particularly true in retail. Sure, ecommerce is making it easy for consumers to browse and buy products online, but there is still a real need for human interactions and communities in the retail sector.

The world’s most successful and forward-thinking retailers are already embracing the power of communities.

Apple, for instance, has Today at Apple — free educational sessions held at its stores that tackle topics like photography, coding, art, design, and more. First launched in May 2017, Today at Apple has expanded considerably; according to 9to5Mac, as of 2018, around 18,000 sessions are being held weekly and attended by millions.

The Container Store is another excellent example of a retailer the understands the value of human connection. Their flagship store in Dallas features the Organization Studio, an experience that helps customers overcome their organizational challenges.

Here’s how it works: Customers upload a photo or video of the space they want to organize, describe what they need help with, and then schedule an in-store appointment with an Organization Expert.

On their end, the Expert would receive the information from the shopper and would put together a tailored digital “solution board” that the customer could review, make changes to, and buy in the store or later online.

We’ve found that the warmth of that interaction and the relationship created is an extremely important component of bridging digital with physical stores.

The takeaway? Nothing can ever truly replace the human element in retail. While it’s certainly a good idea to invest in technology, you should always, always, include humans in the equation.

Tip: Want to make sure your initiative hits the mark? Do your research. When we created The Organization Studio, we tapped into The Container Store’s significant customer research to determine the right approach. We held co-creation sessions with focus groups to gain real shopper feedback and we tested the concept with current and potential customers.

We are continuing user testing of the digital product and business model to iteratively increase sales and strengthen the relationships shoppers have with The Container Store.

Ramp up the in-store experience

The in-store experience is a huge driver of in-store traffic, sales, and brand loyalty. The NRF’s 2018 Consumer View study found that nearly 80% of respondents consider the brand experience when deciding where to shop.

NRF also found that almost “six in 10 respondents said they were interested in special events and experiences hosted by retailers,” which tells us that shoppers want to get more out of their store visits.

So, if you’re not offering rich experiences in your locations, it’s high time to consider it.

American Girl, once again, does a great job in this area. Its flagship store in NYC is brimming with unique retail experiences that guests can enjoy, including the “Create Your Own” doll and apparel station, salon services, and a cafe where shoppers can grab food and drinks with their dolls.

Every component of American Girl’s store is rooted in the company’s dedication to serving modern shoppers. “As we look at girls today and millennial moms, they’re seeking brands that deliver positive, meaningful experiences, not just products,” says Wade Opland, American Girl’s Senior Vice President of Global Retail.

In creating the store, American Girl teamed up with MJD Interactive to explore ideas and conduct user design testing with girls and their moms. Doing so enabled the brand to create spot-on experiences that delight thousands of visitors.

Tip: Considering revamping your in-store experience strategy? Start by identifying the things that your target customers are craving for. What intrigues and excites them? What experiences or services can you offer that would compel them to come back to your location? The answers to these questions will help drive your strategy.

Your competitive edge lies in great commerce experiences

These days, it’s nearly impossible to “wow” customers simply by having great prices or an extensive selection. Retailers that want to thrive today and in the future need to get more creative and come up with compelling experiences that add value and make their mark.

Looking for ways to do just that? Catch MJD Interactive at the NRF BIG Show from January 13-15, 2019. Get in touch with us and let’s book a time to meet!