KRETSCHMAR DELI APP AUDIT SITE

A website for administrators to keep track of auditors’ grocery store audits and perform other administrative tasks.

THE PROBLEM

Smithfield Foods needed administrators of their Kretschmar brand to have a web interface that would allow for an easy way to keep track of auditors’ grocery store audits and perform other administrative tasks. 

 

It needed to allow administrators to:

 

  • View a dashboard of audits, issues, and trends
     

  • View a list of audits
     

  • View a list of product issues
     

  • View and edit a list of products
     

  • View a list of stores and their audit history
     

  • View a list of auditors and their audit history
     

  • View and create a list of announcements sent out to auditors

KEY GOAL

Account for all features in a clear, natural, consistent design that will make data easy to digest and administrative duties seamless.

TIMELINE

It took me 8 weeks (starting from a basic list of needed features) and 6 prototype and design iterations.

MY ROLE

I was the designer of this project and was starting from stratch, with only the above list of features to go off of. 

 

I received iNput from my design supervisor, Christopher Cacho, Tony Buckingham (who is now developing the design), and Nicole Pletka, the project manager.

THE PROTOTYPE

You can check out the prototype here for yourself, or you can watch a video of me explaining it below.

MY PROCESS

I used InVision’s Freehand tool to draw the wireframe. I then used Sketch and a 12 column bootstrap grid to create the high-res design. And I linked it all together into a prototype using InVision. 

 

I went through the design and prototype phase 6 times, getting and implementing feedback from my team during design reviews.

 

Below, I’ll show some screens to convey the evolution of each section.

Note: Due to the wonky way Wix's galleries work, you are unable to click on a picture and get a larger view. Therefore, I made it so that once you click on a picture, you are provided a link to a larger view that will open up in a new tab. I understand that this is not exactly user-friendly, but it is the best work around I could come up with.

DASHBOARD

This section allows administrators to view a dashboard of recent audits, issues, and trends.

AUDITS

This section allows administrators to view a list of audits with the ability to drill down into a detailed view of each audit.

List View

Detail View

The detailed aduit page presented me with one of my major design challenges.

 

This was the first design I tackled because it defined the look and feel of the rest of the site. I wanted to make sure each of the audit’s issues were easy to skim through, and I thought it best that the issues take up a smaller container in the center so that the elements above and below, such as the actual product name and the auditor’s comments about the product, would take up a wider space and thus communicate that each issue is a subset of each product.

 

The challenge came in displaying the six pictures that the auditor was required to take. Though the solution looks simple, it was only through a bit of trial and error and ultimately breaking the grid that it came to be.

 

That was the essence of this challenge: learning when to align elements to the grid and when to break out of it.

ISSUES

This section allows administrators to view a list of issues (each audit is a collection of issues found with a product). A list of issues allows administrators to view problematic trends without having to drill down into each audit.

 

Note: The issues section was only decided upon by my team and I towards the end of the project, hence why I have no wireframe or early Sketch versions. Creating it was only a matter of borrowing from other design elements and didn’t take much effort.

List View

Detail View

PRODUCTS

This section allows administrators to view a list of products, as well as the ability to edit, add, and remove them.

 

Note: In the wireframe phase, the list view and detail view were combined into one screen, hence why they are repeated below.

List View

Detail View

Q: Why did you make such a drastic change from the wireframe design to the Sketch designs?

 

A: In the wireframe phase, I started the Announcements section first, and it made sense to base it off of Microsoft Outlook since it also allows the writing and sending out of messages. The Products section easily fit into this design as well.

 

I later decided to go away from this design because as this is a website and not an app, it would be pretty difficult for the developer I was working with to turn this idea into code. I decided that the Outlook design was more trouble than it’s worth, as it didn’t offer any real advantages over the design I ened up going with.

STORES

This section allows administrators to view a list of grocery stores, as well as the audit history of each store.

List View

Detail View

Detail View

Q: Why did you remove the stats from the detail view for Stores and Users?

 

A: We didn’t know what stats our client, Smithfield Foods, wanted to keep track of. Until we knew, we would do away with the stats. This was a decision made by the project manager towards the end of the design process.

USERS

This section allows administrators to vew a list of auditors using the accompanying Kretschmar Deli Audit app, as well as their audit history, wheither or not they are actively turning in audits (and thus doing their job), their permission level showing whether they are a basic user or a fellow administrator (with the ability to change the permission level), and finally an ability to invite new auditors to the Kretschmar Deli Audit app.

List View

Detail View

ANNOUNCEMENTS

This section allows administrators to vew a list of announcements (which were sent out to auditors using the Kretschmar Deli Audit app) as well as the ability to publish new announcements (either immediatly or at a later date), save drafts, republish existing announcements, and remove existing announcements.

List View

Detail View

THINGS ADDED ALONG THE WAY

The following is a list of features and elements that were added largely across the board for all sections, that wern’t mentioned above.

 

  • Tabs to separate distinct information. 

    • For example, new issues could be found under one tab while reviewed issues could be found under another.

  • Drop-downs to filter. 

    • This makes it possible to, say, search for audits between a custom date range.

  • The ability to search for stores by text input rather than drop down filters. 

    • This is because typing in a store would be way more efficient than scrolling through a huge list.

  • A table layout, making it possible to view data in a particular order.

    • For example, clicking on the Store header of a table would show the rows in order from Store A to Store Z, and clicking on it again would show them from Z to A.

THINGS REMOVED ALONG THE WAY

The following is a list of features and elements that were removed largely across the board for all sections.

 

  • Global search functionality. 

    • My team decided that we didn’t have enough information as to how our client, wanted to use the search functionality, so we removed it until we have a better idea of how it would be used.
       

  • The card based system.

    • For most of the design, I was using a card based system (which could be switch to a row view by hitting a toggle in the upper-right of the screen). This was replaced with a table system due to easier sorting abilities.

      Although it was replaced, creating this card based sytem did make grow in my visual hierarchy skills due to the fact that:

      • Each piece of information had to use a limited number of font weights, sizes, and colors to communicate their appropriate place in the visual hierarchy.

      • Each style choice for each card had to fit in with each of the other cards. I wasn’t designing a single card, I was designing a set of cards, each of which had differing levels and kinds of information.

 

Here is an example of the evolution as I got better in my skills. This comes from the card in the Audits section:

NEXT STEPS

After the developer on my team continues to build this design into a reality, we will test it with Smithfield Foods. As with any usability test, there will be feedback, which I will incorporate into this design to even better suite their needs.

Nice to meet you!

Let's Chat!

I’m a thinker, a researcher, a listener, and a creator. When I’m not sketching on paper, or creating on Sketch, I’m walking around observing the world and pondering the ways in which an app, a website, or another expression of technology could make it better.

 

But enough about me. I’d love to hear from you. I’m open to any and all opportunities.

You can reach me at:

          geoffgparker.ux@gmail.com

          +1 512.998.4179

          linkedin.com/in/geoffgparker

© 2019 by GEOFF PARKER

Early Sketch Design

Click and you will see a link below that will take you to a full sized view.

Go to link