eoTouch Warehouse -- Design Mentorship

Context

eoTouch Warehouse is a new mobile application designed to suit the needs of Warehouse users.  Designed as a utility application to replace a legacy windows mobile CF application in eoMobile, eoTouch Warehouse specifically targets smaller customers providing necessary warehouse capabilities without the price tag of eoWarehouse, a full fledged, multi-location, enterprise level warehouse management system.  For more details, check out the detailed case study for this application.In designing the various screens and workflows for eoTouch Warehouse, I had left the Home screen for the app as a co-design task between myself and Gaby.  I did this primarily because she had never designed a home screen for an application and based on early user feedback, there needed to be a datavisual element(s) to represent completed work for the day.  Gaby had never done any design work for datavisualizations either.  So a great opportunity to challenge her under very close guidance while teaching her at the same time.

‍

Existing Home

This was the Windows Mobile CF Warehouse solution with style input that worked on old motorola handheld devices. We used this as a general guide for the redesign.

Initial Ideas/Concepts and refocusing efforts

With a list of existing features needing to be accessible from the home screen, I set Gaby on the path of coming up with some initial ideas/concepts.  It was definitely a rough start, but she had the right idea.  It’s all about divergence at this point.  I do know she did a bit of sketching as well, but unfortunately, I do not have those examples.

Early ideas did incorporate most features, but the experience seemed to be more of just different renditions of the old eoMobile UI.  So, I had her look back at the initial research of eoMobile focusing on 2 key highlights.

Usage and configuration

• There was a subset of users who had access to and used every single feature, mostly warehouse supervisors.   However, Counts, Repacks, Write-Offs, Purchases, and Transfers seemed to be the most used in that order with barcode management the least used, although many only allowed supervisors to perform barcode management since they were worried about people messing up product barcodes.
• There was also a subset of users who just used the Counts, Repacks, and Write-off features.
• There was a subset that only used the Receive Purchases and Send/Receive Transfers functions.While not common, there was a customer that had some users that were only allowed to use Counts.

My key point here to Gaby, she needed to be able to account for these various configuration scenarios and cannot assume the entire UI will be intact showing every single feature available.  If you decide to dedicate the Home screen real estate to say 75% chrome representing these features, then she had better be happy with it when the user only has access to Counts.  She definitely agreed.  Then her initial thought was, well, maybe we disable the ones they can’t use.  My quick response, do you really want a user to see features that will never be allowed to use?  It was an easy no from her.

Understanding of work completed

• While users daily work could be ascertained by supervisors reviewing a number of related reports, many users complained at the lack of visibility since some of their pay per performance metrics, cases moved/touched, case counts, pallets moved, etc were not readily visible.  There were literally some people writing down there work accomplishments for the day on paper so they could get an idea of how much they made in extra incentives.
• This extra incentive pay was based on total volume with some offsets for receiving and transfer work, i.e. moving a pallet of 64 cases is far easier and faster to do, then repacking 64 cases of Miller Lite to account for broken bottles, and putting that into 48 full cases.
• Supervisors wanted to provide some high level idea of this, but did not want it to become a disincentive either.  “Oh hey, I hit my numbers, time to slack off.”  So there had to be a compromise with what we’d show to give a user the idea of performance, but not telling them, “today you made $X extra dollars.”

Jim jumps in focusing only on the top half of the screen.  When I mentor you designers, I don’t just give them a complete design.  I given them hints and clues to pieces of the whole.  In the examples below, you can see I did nothing with showing all features and instead asked Gaby to think about how to present work completed.

Continued iteration but refocusing efforts

While I don’t have the full set of iterations and related examples (see zoomed out artboard at left), Gaby went through a number of iterations and broke the cardinal rule by jumping into hi fidelity too early.  Again, I blame myself for that, but since all the other features had been fully redesigned, I think it was natural to want to do this here.  See a few examples below.  Again, she was on the right track, but by bringing in the visual design too early, she lost a little bit of focus.

I told Gaby, why not show the user some datavisualization to represent their day (i.e. timeline) while also providing some representation of cases touched/moved.  I told her to pay particular attenting to using REAL mock data as some of these are not likely to work.

I told her to specifically focus on the following 4 options:

• Just show all volume across all features on the same chart with the same axes.
• Use a secondary axis for Purchases and Transfers (volumes for these are incredibily high in comparison to say repacks...think 1000s of cases vs 20 cases).
• Separate chart entired between Purchases/Transfers and everything else.
• Try a cumulative volume chart.

1. Just show all volume across all features on the same chart with the same axes

2. Use a secondary axis for Purchases and Transfers

‍

3. Separate chart entirely between Purchases/Transfers and everything else.

No example needed.  She knew right away this wouldn’t work.

4. Try a cumulative volume chart.

‍

‍

‍

Final review and fine tuning

Now you could make the argument, that this final version from Gaby is good, and to a certain extent I would agree with you.  However, with all design reviews, when I look at a final visual comp as I do with a UX review, I dig in like I’m proofreading an essay.  So I made some slight tweaks mostly to the visual hierarchy (font weights/sizes, shadows/elevations, tightened up spacing, and made sure colors, typography generally matched/utilized the style guide from the design system).As with ANY edit or tweak I make to a designers work, I almost ALWAYS have them decide which is better.  It was no different here.  I had Gaby review both and pick her favorite.She chose the one with my tweaks to which then I explained ALL the minor tweaks I made so she understood.  That said, I realize how important it is to let designers win too and I know Gaby was proud of many of those wins, those micro-design decisions she made for this project which made it turn out so great.  I definitely was very proud of her.

“This was a fun project. Jim has always encouraged me to do illustrations, play with colors, and make designs look modern and polished. I never thought I could get something to look as awesome as this dashboard. Nor had I ever done any type of data viz. He really believed that this was possible with my skill set, and he didn’t stop pushing me to do better. He gave me tips and hints on how to make the UI look consistent, pleasing, and usable.”
Gabriela Rivera-Velázquez, UX Designer at eoStar