I received my first homework for a UX Design position.
The homework that I took on was a dashboard. In hindsight, probably not the best project to take on unless you already have an intimate knowledge of the software you’re building it for or have a very detailed spec sheet to work from. Creating a dashboard with limited information just doesn’t work. But, this is just homework and the goal is to show my thought process and steps. Onward!
First off is gathering all the materials needed to layout this dashboard.
From a brief telephone call, here’s what I know that’s pertinent to the wireframe:
- The dashboard if for an app that caters to managers of managers in enterprise businesses.
- It organizes teams around objectives instead of tasks.
- Needs to show progress on goals.
- Display the pace at which work is getting done.
- Road blocks where people may need more help or time.
Some other important information I gathered from the phone call is that this is enterprise software, and is tailored to managers, who are most likely 40+ year old, busy executives. So information needs to be kept succinct, readable, and easy to understand at a glance.
To get a feeling for the users that I need to build for, I combed through the company’s website and read through their about page, profile, articles, and all of their blog posts (31 in total). I gained the most information through the blog posts, and I think I’ve got a good head for what needs to be done.
Because this was for a position as a UX Designer, we’ve got to get some user input right? I didn’t have a ton of time, but I did have access to a 5 executives who were able to give me their opinions before and after.
I grabbed a screenshot of the company’s current dashboard (A), and a flat dashboard (B) and asked these five people which they preferred. 4 of 5 preferred A. Not the best research, but now I have something to think about. Flat might be scary and not the best direction to take the design.
Just as a bonus, I pulled these persona photos from Flickr by Jason Travis. I just keep them on my desktop to make sure that I keep the right user in mind since this is going to be done much more quickly than normal.
Alright, now that the data is all gathered, let’s get sketching.
So we’ve got a smattering of sketches, and a general idea of what needs to be done. Remember, this is just for an interview, so a general idea is what we’re looking for.
First off, let’s make this thing responsive. The current layout is fixed-width and is wasting a lot of real estate. One of the problems with responsive websites is consistency. For millennials, the transition tends to be easier to understand, but keeping in mind the age range we’re shooting for, it’s imperative to keep the visual language consistent.
Now the sidebar is out to the side, with icons and text description for the link the icon is important, because when the screen size gets smaller, the sidebar will collapse to only show icons. This gives users something familiar to hold on to when the layout changes.
I also made more use out of the top nav by removing secondary navigation items (settings and help) from the sidebar. The logged in user’s name was also added to the top now for easy identification of the current user since this is for enterprise offices and there is a chance of computer sharing.
There are a lot of moving parts to this dashboard, so I kept it modular. The app is based off of team objectives, so the dashboard should show the current status towards meeting those objectives. This block displays the overall goal for the week, determined by separate Workstreams, displayed to the right. From this block, a user can easily update this week’s goal, as well as sort different Workstreams to display best performing and worst performing.
This is a separate measure that I thought would be helpful to managers to have a quick, quantitative rating for their employees. Sometimes good people get lost in the shuffle, and it would be great to be able to reminded of some hard workers. This is also sortable based on high to low, and other variables.
A very important piece of this dashboard is the Workstream snapshot. Here you can quickly and meaningfully view the number of doing, next, priority, and late objectives that need to be completed. Each of these modules has a toggle to display a sortable table that displays the action items in that Workstream. Toggling the module open will shift the other modules down.
Finally, some high-fidelity wireframes. Below are two wireframes created from the sketches I created. The first screen design is based on the current design of the app, and the second is a version with less visual clutter.
Phew. Done. Well, done with the homework. I’m sure that the wireframes could use some touchups. Ok, now we’ve got more UX work to do. I contacted the previous five again with these two wireframes and little write-up with explanations of the main sections.
I only heard back from three so far, but the findings were interesting. All of the responders preferred the flatter wireframe.
From the previous little survey, I would have assumed that they would prefer the first. This is going to require more research, but alas, my work here is done.
If anyone has any questions or comments on my workflow or process, please let me know on Twitter. I’m always available for questions or to learn anything new.
