All my screens from this process are on Invision.
This page is documentation of my thoughts and decisions.
Before doing any design or sketching I started with some research; re-familiarizing myself with some examples of what companies are currently using in terms of file uploading. I checked places like Dropbox, Airbnb, Google, LinkedIn, Vimeo and others.
The next step was understanding what Twitch is doing right now. I pulled as many examples of file uploading on the Twitch site as I could.
I was really surprised by how robust LinkedIn’s uploader was, even though I felt like Twitch’s use cases didn’t really require filters or image editing to quite this degree. I also really liked some aspects of Youtube’s banner uploader. After my round of research I was pretty sure that I wanted the ability to rotate at least profile photos 90 degrees in both directions, the ability to adjust the crop area, and to ensure the image asset is the aspect ratio needed. I was also sure that Twitch’s drawer style uploader used on the video uploader screens I could find — I am not an affiliate so I couldn’t test myself — would be something I could get working for all other types.
I started going through the apps and the site and picking out some icons and colors I thought I’d need. Knowing that the design was to be for both a dark and light version I wanted to make sure I knew what colors would be needed for each version. I took all the colors and icons and made a little mini pattern library to allow me to work as quickly as possible.
I knew that I wanted to represent the more complicated of the flows I was thinking about, but knew that there was a whole host of other use cases where a user would upload something, and not need to adjust the image afterwards. Stuff like an offline screen, or a video thumbnail, are just 16:9 images that don’t really need to be edited afterwards. For stuff like avatars and banners I wanted to have the option to have the more advanced controls where you could zoom in, rotate, and re-position. At this point I was also starting to think about some moments of delight, but didn’t have any ideas yet.
When I started on the settings page I knew I wanted to re-design it slightly so that I could give each of the three options an individual action. This removes a click and feels more powerful then clicking on “Update”, and having to choose “Upload Photo” or “Edit Current Thumbnail”. As part of that redesign, I made the photos section feel more like the rest of the page with the same kind of formatting as the Profile Settings further down the page.
This is also where the bulk of the UX work happened. I had to figure out the general path for the "Advanced" scenario, which is the flow where you upload, then adjust. This is also where I thought about the upload progress indicator as well as the upload success screen. I knew I wanted to do some kind of cute pixel animation, but didn’t actually come up with it til kind of near the end of the design process for this flow.
For the mobile implementation of the settings screen, I think it could be very similar to the current Twitch app, but with an “Update Profile Images” button under the Profile Photo. This will trigger an action sheet with the individual options for Banner and Profile Photo. For the drawers themselves, I’d remove the background behind the buttons and shift them above the title. This would allow the buttons to be pinned to the top of the screen so they don’t get in the way on modern phones that don’t have a home button. Sadly, I didn’t have enough time to mock this up.
Take a look at all of the screens at full size showing the full process of uploading in Invision.
Stuff like what happens when you drag an image over the drag and drop area, how the button hover works, and the error states for if your image is the wrong file type or is too large.
I wanted the last screen of uploading to be celebratory both because it’s the last step in the “no adjustment necessary” scenario (eg: thumbnails and panel image uploads), and because some of the advanced uploads, like for videos, can be quite long. Having an exclamation point at the end feels appropriate.
During the upload process, I knew I’d need to have some kind of progress bar. I decided to go with a progress ring that fills up as the asset uploads. This pattern would also be used for videos so I knew the files could be pretty large, and the progress bar may not always be moving. I wanted a constantly animating thing so users would know that something is happening. That's why I wanted the looping animation of the arrow as well.
When an upload is successful I wanted to have a small celebration. Pixel fireworks ended up feeling like the perfect direction with just the right amount of gaming influence.
From a UX standpoint, I wanted a way to accommodate the kind of indecision that can happen when you’re choosing how to represent yourself online. With that in mind, I thought it was important to allow the user to upload a new photo once they’ve arrived at the adjustment screen.
The crop preview updates to the aspect ratio of the asset within the site. Banners show a wide crop, and profile photos show a square. This reduces the amount of thinking a user has to do when selecting their image, while allowing them to see how that image would look in use.
The Channel Screen, like the Settings Screen, required a click to initiate a light box, then a second click to choose between uploading a new photo and adjusting your current photo. I removed that second click by adding a third item to the dropdown menu. This continues the pattern of direct access to whatever screen you require at any time.
For the Video Producer screen I removed the drag and drop area, opting instead for a button to initiate the upload drawer so that the pattern was consistent throughout the site. The drawers for video uploads have updated copy, and error messaging.
I already knew the details screen (the video equivalent of the Adjustment Drawer) would work since the current implementation on Twitch is already drawer-based. I updated the design to be consistent with the other drawer screens, though wider to accommodate the additional input required.
When I am setting up symbols in a pattern library I generally like to make sheets like this that have concise descriptions for whatever needs some additional explanation. Having all of the components laid out in this manner allows a visual confirmation that everything is accurate and consistent.
You can see everything full size over on Invision, including some additional screens of the basic upload flows and such. I had a fun time working on this assignment. Thank you for your consideration!