Josh Magno, UI Designer

ShedWool

Bettering schedule organization and flexibility

 

ShedWool Scheduling App

Rebranding "trust" into
an ad-supported app!

 

Client:
ShedWool

Role:
UI Designer

Time:
3 Weeks

Platform:
Mobile app

Tools:
Sketch
Proto.io

Deliverables:
Hi-fi mockup
Hi-fi prototype
Style guide

- Prologue

ShedWool is an ad-supported scheduling app that allows employees and managers to access their schedules and suggest shift changes. Employees can request to drop or pick up shifts, as well as swap shifts with other employees.

Users can view their schedule over the day, week, and month views. Two other UI designers and I were tasked with visually interpreting the Profile and Schedule sections of the wireframes designed from the UX team.

As the UX team also found in user testing, “ShedWool” didn’t make sense to users since it had no direct references to schedules, and the overall branding was considered underdeveloped and unreliable.

Our main challenge?

Redesign the app’s interface
to be hip and trustworthy.

Because we were plucky and ambitious, we also took on another challenge:

Show how a ShedWool could benefit from a name and logo rebrand.

 

- Chapter I:
Sorting out ShedWool

Or, Getting to know all about EWE.

To start getting a direction on the redesign, we asked ShedWool’s CEO and developer to respond to images in a gut test (the same done in the ChiTAG redesign). By collecting their feedback on different images, we could get an idea of which direction to take the redesign. These images and their responses gave us the most direction:

The people who know ShedWool the best liked the colors, gradients, moods and high contrast of the first two images.

The people who know ShedWool the best liked the colors, gradients, moods and high contrast of the first two images.

For more abstract guidance, we asked for some adjective associations with the redesign.

ShedWool should be perceived as:

Asset 4.1.png

It should not be perceived as:

Asset 4.2.png
 

Chapter II:
Competition and Inspiration

Or, What the FLOCK?

Since many scheduling apps exist, we looked for common design patterns among competitors, and specifically what wasn’t done successfully. We decided these observations would lead us to a design vastly different from the competitors.

Comparing HotSchedulesSling, Humanity, and When I Work, we noticed trending similarities between ShedWool’s direct competitors.

Layouts are clean, but they lack personality. The logo color palettes use only blues and greens, feeling cold and corporate.

Layouts are clean, but they lack personality. The logo color palettes use only blues and greens, feeling cold and corporate.

For pattern inspiration, we looked to Asana for gradient usage, Slack for the videogame-like color palette, Instagram for ad integration, and Duolingo for branding.

We wanted strong examples of gradients, color palettes, ad integration, and branding; who better than these guys?

We wanted strong examples of gradients, color palettes, ad integration, and branding; who better than these guys?

 

Chapter III:
Making Design Principles

Or, Setting paRAMeters

We created three design principles to condense everything we learned from the gut test, adjective association, competitive analysis, and inspiration comparisons. Throughout the design process, we can use the principles as guidelines to make sure we’re creating what the app needs to be instead of what we want it to be.

 

A word from the Author:

From here on out, all designs and choices you see are purely my own, UNLESS NOTED.
You'll notice the note, I promise.

 

Chapter IV:
Moodboards and Style Tiles

Or, Cutting BAAAAAAAck on processing times

Wanting to experiment with the process, I chose fewer images as inspiration sources. These images were chosen for their videogame-like aesthetic.

I spent more time creating and iterating on style tiles, and I had a stronger idea of how each approach differed from each other. I also remembered that style tiles change over the course of the product design, so I didn’t worry about the style tiles being perfect. They were different enough show alternative approaches.

High contrast shapes and colors inspired this style tile

High contrast shapes and colors inspired this style tile

I focused on gradients and non-blue-or-green colors here.

I focused on gradients and non-blue-or-green colors here.

I gravitated towards this image for its simple and clean use of green and pink, which really stood out from the blue/green color combination of the competitors. The style tile was a user favorite because of the calendar and ad design. I continued with this board in my high fidelity design approach.

 

Chapter V:
Final Mobile Screens

Or, (Meri)NO feedback

The main issue in user tests was trying to receive constructive feedback to iterate and develop the screens upon. Throughout user testing, we typically received a neutral, “it’s fine, it doesn’t bother me” genre of feedback. More often than not, feedback focused on the functionality of the app more than the visual design.

Taking a page from the ChiTAG study, we reached out to users who had never heard of ShedWool before, but had experience or currently work with changing schedules.

My use of half-screen and condensed ads developed fast in early iterations.

My use of half-screen and condensed ads developed fast in early iterations.

I interpreted the wireframes much more literally in this project; I worked with half-screen ads and condensed ads for when the user had entered a new schedule view (month, week, or day) or just interacted with a shift, respectfully. I imagined the half-screen ad to switch with condensed ads and shift information when users tapped on a day shift.

Placement of the ads (between calendars and information cards, or underneath calendars and information cards) was established early.

Placement of the ads (between calendars and information cards, or underneath calendars and information cards) was established early.

In the evolution from wireframes to early versions of the screens to final versions, users liked when ads sat under all the schedule information instead of in between the calendar and shift details.

Development of the swap shift modal.

Development of the swap shift modal.

We focused on the swap shift flow as our eventual main prototype, so I wanted to experiment with changing the layout of the employee selection modal. I went through variations of partial screen modals, near-full-screen modals, in-modal carousels, and in-modal accordions. The best and most understood layout combined the full-screen modal and accordion patterns.

Evolution of color palette.

Evolution of color palette.

I made sure to get actionable feedback for color palette in the overall design. In each test, I asked users to associate a word - a feeling, adjective, noun, event, whatever came to mind - with the color palette. In earlier iterations, described it with “spring” and “happy,” but many also said “feminine.”

To balance the color palette to a more gender-neutral one, I introduced purple and orange to expand how each section of the app could be treated. When users said it felt too “Mardis Gras,” I minimized the palette to green, purple, and pink. This specific combination of colors felt “youthful” and “videogame-like.”

Bullseye.

 

Chapter VI:
Branding

Or, Branding is already a sheep pun.

Wanting to show how ShedWool could be renamed and rebranded, we studied how DuoLingo’s name and mascot represented the brand. If the CEO wanted to hold onto the sheep mascot - he did, and with a passion - a new name related to schedules could be used in place of ShedWool.

DuoLingo’s original owl was a nightmare monster, but the current owl is friendlier and simplified.

Renaming ShedWool easily could have taken up the three weeks we used to redesign the app; we wanted to show, however, how the overall product could be renamed and rebranded while holding onto the mascot.

We went back to ShedWool’s function - allowing users to access their schedules and request changes to their shift - and brainstormed possible names.

We went back to ShedWool’s function - allowing users to access their schedules and request changes to their shift - and brainstormed possible names.

For my name approach, I chose AllDay, a reference to the restaurant origins of the app. I wanted users to know that the app shows their overall schedule.

 

A word from the Author:

In her spare time, a super talented teammate generated placeholder icons
combining the sheep mascot and our respective color palettes.

 

It's also worth noting that each of my teammates chose names in their redesigns. We wanted the CEO to take time to rename ShedWool; with our approaches, he could see how it could theoretically be done well.

 

- Chapter VII:
A Video of the Prototype

Or, SHEAR animation skills here!

To build this prototype, I knew cards would move more frequently than the calendar. I transitioned between each state by having cards slide in and out of view.

When placed in user tests, users pointed out the intuitive and simplicity of the shift swap process. Little to no commentary was made on the color palette, but the functionality was self-explanatory and easily understood. One user commented on how she felt used to ads thanks to Facebook and that she naturally looks for the information she needs.

 
 

Similar to ChiTAG, building the prototype for my ShedWool approach was a fun and simple process. I wanted to keep animation transitions to a minimum since the user was exposed to a lot of information on top of ads.

 

- Chapter VIII:
Style Guide

Or, SHEPHERDing future recreations.

In the possible event that ShedWool would take my redesign into consideration for the actual product, I wanted to leave behind an easy-to follow guide that developers and future designers could follow when creating the rest of the app. A shortened version is provided below.

 
 

You can download an in-depth copy of the style guide here.

 

- Chapter IX:
Project Takeaways

Or, Opinions must be HERD.

I think this project helped me take a more methodical and well-paced approach to design. It helps that the CEO and developer expressed a lot of openness to any and all branding possibilities; this amount of freedom is probably rare in the design industry.

Was this design freedom too liberating?

Iterating without polarized feedback, I never reached the ‘aha!’ moment indicating a good direction. While I think my design is strong and fulfills the needs of the project, I prefer to have more opinionated clients and testers.

That being said, I recommend the following to strengthen my design approach and ShedWool itself:

Striped elements and a countdown timer were proposed in the original style tile, but discontinued in the final design.

Striped elements and a countdown timer were proposed in the original style tile, but discontinued in the final design.

Subtle gradients across blocks of color would add another level of depth and detail.

Subtle gradients across blocks of color would add another level of depth and detail.

I did learn that an entire style tile can be pulled from one visual. Since the style tiles and approaches were developed from three already drastically divergent images, inspiration can come from any amount of resources.

I did learn that an entire style tile can be pulled from one visual. Since the style tiles and approaches were developed from three already drastically divergent images, inspiration can come from any amount of resources.

Overall, I learned to be more efficient in design choices and selecting feedback. Iterating instead of restarting from square one is a comforting and proud moment to have as a designer.