Interact with prototype

Ping HD - EngagePHD

Ping HD is a Denver based company that provides affordable, scalable, flexible and innovative digital signage software solutions. They have numerous products and support many industries including sports & entertainment, quick serve restaurant (QSR), retail, hospitality, education, healthcare, government and transportation.

Objectives
  • Improve customer satisfaction and engagement
  • Eliminate "how do I" customer support queries
  • Design a simpler turnkey application for small businesses with little or no design knowledge and technical expertise
Solution

We focused on two areas; product management and digital signage layout. We simplified forms, redesigned the product managment mobile interface and created an easier to use and more intuitive digital design layout tool.

My roles

User Research, Wireframing, UI Design, Usability Testing, Prototype Design, preparation of slide deck and presentation.

Co-Collaborators: Tracie Mayes and Eric Johnson
Duration: 3 weeks
Tools: Paper, Sketch, InVision and Keynote

Research

The team's initial task was to review Ping HD's flagship product, EngagePHD and make recommendations on how the product could be simplified, made more efficient and improve client engagement and satisfaction levels.

What our research uncovered

What we decided to do

Analysis

Current Product List page example

Issues with the mobile version of the Product Management tool

  • Not optimized to work on a mobile platform
  • UI best practices and patterns for mobile devices have not been applied
  • Requires horizontal scrolling
  • Existing functionality is hard to use

What can be done?

  • Apply mobile best practices for managing content, lists and forms
  • Simplify the content and format it to fit a mobile footprint
  • Add functionality to make the product management process more efficient, effective and engaging
  • Apply feedback and comments solicited from users and usability testers

Ideation & Iteration

Initial sketches of possible products list page

Based on initial hand sketches I created two higher fidelity wireframes to test functionality and workflow patterns.

The usability testers understood the functionality and workflow patterns but didn't like the visual design or user interactions.

"I don't like the stripping and what are all the buttons for?"
- Remarks from a usability tester
Products List Page mockup #1
Products List Page mockup #2

The next round of usability testing focused on the visual and interaction design. I created two additional versions based on earlier feedback and usability testing, highlights include

  • Making the search always visible
  • Ability to filter display results
  • Simplifying the amount of information for each product entry
  • Removing the Copy and Delete buttons for a product record
  • Adding an enable/disable toggle to each product record
  • Adding an enable/disable toggle for all alcoholic beverages so they can all be turned off at the same time
Products List Page mockup #3
Products List Page mockup #4

Final Design Solution

Results

Based on usability testing and actual client feedback the final mobile design of the Product Management tool met or exceeded all of the objectives. If you would like to view the prototype please click here.

Reflections

Managing large amounts of content is always a challenge. Researching and applying best practices UI mobile patterns improved the visual design and user interactions. Given more time I would have liked to apply my UX process to other functional areas in the EngagePHD suite of tools.