UI Exercise: Box’s Web File Preview
As one of my new year resolutions, I aim to write a post a week around the topic of user interface design. I never written a blog before so it’ll be interesting for me. There are plenty of posts and articles that delve into theory and guidelines of UI design, so I will mainly stick to my own thought process and how I arrive at the solutions. I call these exercises, rather than redesigns since I’m working without much context, isolating small cogs of the bigger machine and applying my own thoughts. Redesign of any scope is part of a much bigger conversation and require much more high level thinking and in depth knowledge of both sides of the product.
This week I explore Box’s Web UI File Preview section.
Box’s Web File Preview UI
For this week’s exercise I want to keep it as simple as possible. I find Box’s web file preview UI a bit scattered and no clear visual hierarchy. For this exercise, I will tackle specifically layout and grouping of similar functions on the file preview interface.
Sketches and Organizing the Main Elements
I start by sketching the current user interface and listing/organizing the main elements/features.
Original User Interface
Then sketching out the new layout and organization.
New Layout Sketch
Wireframe
Moving on to wireframes, where I can color code the features and make everything nice and tidy and refine if necessary. The new layout organizes all navigation to the left hand side, giving the main buttons more prominence (which will be in the pixel design part). With color coding, you can see the visual hierarchy clearer. Lighter blue represents features that does not directly tie with the previewed file. The darker blue represents features that are directly tied with the previewed file.
Wireframe of Original Layout
The new layout organizes all navigation to the left hand side, giving the main buttons more prominence (which will be in the pixel design part). I shuffled and grouped the main call to action buttons, as well as adding global buttons – such as uploading a file no matter where you are in navigation/structure. Also provided a bigger area for the preview file, and flipping the 2 columns – users are more used to the navigation column located on the left instead of right.
Wireframe of New Layout
Pixels/Design
After nailing down the layout and feature locations, I move to building it in Photoshop. Below is the origina/current design.
Design Original
In the new design: left hand column features global call to actions, folder navigation and files (within the selected folder) navigation. Right hand area features buttons that applies to the file previewed.
Design New
Pixel Perfect Images
I’ve uploaded the images on InvisionApp, you can navigate them quickly using the left and right arrow keys on your keyboard. View them here.
I’ll tackle more user interface exercises next week!
Please feel free leave any thoughts/comments/critiques.
Thank you for this step-by-step exercise, Jimmy!
It would be great to see clickmap of both designs later.
The link in “View them here.” is broken.
@Petr Thanks!
@Axel Yeah I had to take it off since it reached the limit of the display service I use. Trying to figure out the best way to display it – probably just going to upload them to Dribbble or the PSDs.