Digital Flyers

Contextual Inquiry and Interactive Prototyping. Focusing on user wants and needs to improve overall business for the client.

TL;DR

A cognitive walkthrough was performed to determine if a website was in working order and easy to use. Once all technical issues with the site were discovered, it was time to talk to someone who would actually benefit from the site. A contextual inquiry was performed with a potential user and wonderful gems of information were mined from this conversation. User stories were then written to determine what prototypes should be made. These prototypes went through a painstaking process of being drawn and redrawn. Finally, high fidelity interactive prototypes were created and a walkthrough of these prototypes was sent to the client.

Overview

My Role: Research Observer and Prototype Designer

Methods: Cognitive Walkthrough, Contextual Inquiry, Wireframing, Information Architecture Diagramming, Interactive Prototyping

Tools: Google Suite, Zoom, Figma, Quicktime

Deliverables: Cognitive Walkthrough, Contextual Inquiry Script, Findings and Prototype Plan, Low-Fidelity Wireframes and Information Architecture Diagrams, Interactive Prototype Walkthrough

Team Members: Andrew Brace, Kevin Peterson, and Mar E Townsend

The Client

Digital Flyers is a Twin Cities based, black-owned business that provides entrepreneurial services to local businesses and event promoters. They assist business owners with designing digital flyers that are both displayed on their website and on their digital screens in businesses throughout the community. They also offer many additional services including website design and digital marketing assistance to local small businesses.

The Goal

Digital Flyers is looking to make adjustments to their site to improve user experience. The primary users are business owners and event promoters who want to advertise their business and events. Secondary users of the site include event goers who want to find local events. Adjustments to the site will make DigitalFlyers.com more user friendly and allow business owners to successfully promote themselves with ease.

Cognitive Walkthrough

A cognitive walkthrough, of the site, was conducted to test common tasks that an end user would complete. These tasks were then rated based on common usability criteria. The end user in mind for this cognitive walkthrough was an event goer.

Criteria:

Is an appropriate interactive model displayed?
Is the action visible?
Is accurate mapping of the system displayed?
Is appropriate feedback given to the user?

Tasks:

Use filtering feature to find flyers
Access and share content on social media
Watch videos on the site
Access event information such as contact info, location, and tickets
Add a flyer to a personal calendar

View Full Report

Contextual Inquiry

An interview was conducted with a local event promoter to gain insights on their process for getting the word out on their upcoming events. This was done to see if a promoter would find the website services useful to their business.The promoter explained they typically complete every step in the event process on their own, from setting up the talent to creating their own promotional materials. Typically they had to dedicate a lot of time to passing out promotional materials in person.

Research Synthesis

The information from this interview was gathered and synthesized using an affinity diagram. It was found that this event promoter would appreciate a service that functioned as a one-stop-shop for designing, handing out, and tracking the reach of promotional materials. This is something Digital Flyers already does however, the current site does not make this extremely clear to end users.

Findings and Prototype Plan

Once the insights from the contextual inquiry were synthesized, three user stories were developed to influence the prototype designs. These user stories became the basis for the new design prototypes.

User Story 1

As an event promoter, I want flyers created by a designer who will make my content stand out in a meaningful way so that it will be a strong representation of my business.
User Story 2

As an event promoter, I want tracking on where my flyers were distributed and their reach so that I know my projections for attendance will be met.
User Story 3

As an event promoter, I want to grow my reputation in the community by connecting my name/business to the events I promote so that I get more repeat customers.

Low-Fidelity Wireframes and Information Architecture Diagrams

The user stories were converted into design ideas which included designing a more visible about/services page, creating a tracking page for business owners, and connecting business pages with event pages.

Interactive Prototype

An Interactive Prototype was created. Some of the major recommendations included:

Updating the header to include an “Our Story” option, a “Contact Us” option, and more a visible “Login/Registration” option. The header now changes color when on a new page thus improving mapping for the user.
The “Our Story” page now has an “About Us” section that allows the business to display featured work that they created.
The business owner dashboard now has an option to view exactly where their flyers are being placed and the estimated number of daily views for a flyer.
Business pages now have a “Recurring Event” and an “Upcoming Event” section, this allows users to click on event flyers directly from a business’s page. Event pages also now have a “Business” section which allows users to click onto the business’s flyer from the event’s page. This will allow businesses to cross-promote their events with ease.

View Full Prototype

Next Steps

The next phase of this project would focus on usability testing with the prototypes. Users would need to give feedback to see if the recommendations made were actually worth it. A and B testing between the current “About Us” section and the updated section would need to be conducted as well.

Conclusion

This project relied heavily on user stories to influence final designs. These user stories truly helped guide the goals of the wireframe designs. IA diagramming made the prototyping much smoother since each page was laid out in the diagram.

I had a lot of fun writing these user stories and I would love to do some more! If you are looking for a UX designer feel free to contact me.