THE PROBLEM:

Use semantic interaction design to create a useable and useful interface for the staff of MatchDog, a non-profit dog shelter.

This project was coursework for SJSU’s ISE218: Interaction Design I, Spring 2021.

MY ROLE:

Designer, B2E Dashboard

I collaborated with two other team members to design a branded suite of tools (enterprise dashboard, public website, mobile app) to support MatchDog staff and clients. In addition to designing the B2E dashboard, I provided team leadership for scheduling and milestones.


Strategy, Scope & Structure:

The first step in our design process was to understand the client’s needs and empathize with our users. Our team identified personas that would be important users of the MatchDog service, brainstormed several user stories, then created a journey map to follow the experience of one specific end-user: a first-time dog owner. For my part of the project, I focused on designing for Trish, a MatchDog employee.

One of five key user personas

One of five key user personas

By thinking through the user stories for our various personas, we built out grammar tables (objects, actions, and attributes) that would form the basis of our designs. As a team, we merged and compressed these tables to create a ‘dense’ grammar that would provide users with a clear and consistent experience that minimizes cognitive load.

Using the compressed grammar, each team member constructed a prioritization matrix for their platform and drafted one or two user flows for key user goals. For the B2E dashboard, this process highlighted the importance of being able to easily manage the inventory of dogs and their adoption process.

Prioritization Matrix for B2E Dashboard

Prioritization Matrix for B2E Dashboard


Skeleton & Surface:

With this prioritization matrix in mind, I sketched three possible layouts that were either object-focused, action-focused, or a hybrid. I chose to make the primary navigation object-focused, so that employees could quickly find a specific dog or customer. I then made a wireframe of the grid-to-grammar design used a swim-lane layout for the home page, and a catalog page layout for the dog and customer (object) pages.


Interactive prototype:

The B2E dashboard interactive prototype was built in Axure RP9.


wrap up:

What I learned from this project:

  • Basics of Axure RP design software for wireframing & interactive prototypes

  • The main concepts of semantic interaction design (aka “UX Magic”)

  • Focus on the needs of the target user, and don’t overdesign features that were not explicitly listed in the design brief MVP

  • How to experience and learn from a design critique