MatchDog Build Your Portfolio Project: Grids and Grammar

by Daniel Rosenberg | | 5 min read
374 shares

Project Brief

Review the full project brief for MatchDog again.

You may draw ideas during this step from the examples in the book regarding MatchDog conceptual model options. The book intentionally scaffolds this project step with examples and discussion of various options. Two finished possibilities are captured in figure 17. However, you are the designer, and the CM should reflect your desired and optimized grammar and the supporting Information Architecture you choose to hold it. The semantic grid is a critical element in how your CM will be interpreted at first glance by the user.

Goal of This Exercise

In this exercise, you will investigate grid-to-grammar mapping alternatives to explore the possible ways to organize the content within an information architecture for MatchDog. You will also be able to compare the approximate screen count between the alternatives you explore before you are done.

Equipment You’ll Need in This Exercise

  • A computer with wireframing / prototyping software, if you choose to sketch your grids digitally
  • Pen and paper, if you choose to sketch your grids on paper

Sketch Grids and Grammar to Organize Content and Information Structure

Sketch out several variations of semantic grids to decide how you will organize the content within an information architecture for MatchDog. Two different examples are explained in figures 15–17. You can start with these or develop your own alternatives.

Note that you will need to do this step twice – one for the consumer web and again for the mobile variation. The difference in screen size alone can mandate alternative approaches, but the core grammar must remain the same. The user will likely be switching back and forth between mobile and web over the duration of the pet adoption process.

Figure 16 from UX Magic: Alternative mappings of the conceptual model

The main thing to define at this point is an IxD skeleton that can hold all your global actions and objects and create a navigation system around them in the fewest number of pages/screens for both web and mobile variations. When considering the mobile approach, you can either take into account the platform UI guidelines (iOS or Android app) or consider that this will be an HTML-based mobile experience. Avoid a hybrid mobile that can’t make up its mind if it is an app or webpage. This is not good in practice and also looks bad in a portfolio.

For the back-office administrative experience, you will need to consider that there are many more actions because the employee will need to be able to create, update and archive records of dogs, customers and adoptions.

You can do this exercise on paper or, if you like, wireframe the grid-to-grammar mapping in the prototyping tool you will later use for the interactive prototyping phase of the project.

Wrap up This Exercise

By creating several grid-to-grammar mappings, you have seen that there can be more than one effective and valid visualization foundation for your grammar. In particular, you have practiced applying the same conceptual model grammar across the web and mobile form factors to ensure optimal consistency in spite of the limitations that different devices introduce.

Author / Copyright holder: Teo Yu Siang and the Interaction Design Foundation. Copyright terms and license: CC BY-NC-SA 3.0

Topics in This Article

374 shares

Open Access—Link to us!

We believe in Open Access and the democratization of knowledge. Unfortunately, world-class educational materials such as this page are normally hidden behind paywalls or in expensive textbooks.

If you want this to change, , link to us, or join us to help us democratize design knowledge!

Share Knowledge, Get Respect!

Share on:

or copy link

Cite according to academic standards

Simply copy and paste the text below into your bibliographic reference list, onto your blog, or anywhere else. You can also just hyperlink to this article.

Rosenberg, D. (2019, December 12). MatchDog Build Your Portfolio Project: Grids and Grammar. Interaction Design Foundation - IxDF.

New to UX Design? We’re giving you a free ebook!

The Basics of User Experience Design

Download our free ebook The Basics of User Experience Design to learn about core concepts of UX design.

In 9 chapters, we’ll cover: conducting user interviews, design thinking, interaction design, mobile UX design, usability, UX research, and many more!

A valid email address is required.
316,171 designers enjoy our newsletter—sure you don’t want to receive it?

New to UX Design? We’re Giving You a Free ebook!

The Basics of User Experience Design

Download our free ebook The Basics of User Experience Design to learn about core concepts of UX design.

In 9 chapters, we’ll cover: conducting user interviews, design thinking, interaction design, mobile UX design, usability, UX research, and many more!

A valid email address is required.
316,171 designers enjoy our newsletter—sure you don’t want to receive it?