Skip to content

Instantly share code, notes, and snippets.

@nlhkabu
Last active September 11, 2021 16:02
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nlhkabu/2727345dafb55e7cd87b9fd84522fd3d to your computer and use it in GitHub Desktop.
Save nlhkabu/2727345dafb55e7cd87b9fd84522fd3d to your computer and use it in GitHub Desktop.
Visual Design Exercise

Visual Design Exercise

Thanks for your application so far, we're really pleased that you're interested in working with us.

In order for us to learn more about you, we'd like to propose a small design exercise.

The point of this exercise is for us to learn how you think about problem solving and what your design preferences are.

The Components

PeopleDocUI is our internal design system. It contains a series of components that define how a small part of a PeopleDoc interface should look and behave.

The following screenshots are of a page built with PeopleDocUI.

Generic Listing Page

This page is a generic page that shows patterns for listing objects - in this case, signatures that have been requested on our platform:

screenshot from 2017-11-27 09-43-30

There are two dropdowns in the UI (bulk actions, add object arrow); each reveals a menu that looks like this:

screenshot from 2017-11-27 09-50-11

The sort select looks like this:

screenshot from 2017-11-27 09-51-07

Clicking on the checkbox next to a listing item selects it:

screenshot from 2017-11-27 09-52-14

Clicking on the checkbox at the top of the list selects all.

Reference Materials

Color scheme

This is the color scheme for the page. You are free to update it, though you should retain the same number of colours (e.g. primary, warning, success, etc.). Primary mid is the PeopleDoc brand color, and should therefore be retained.

screenshot from 2017-11-27 10-00-59

screenshot from 2017-11-27 10-00-48

Font scheme

We use Roboto for headings and Open Sans for body text (base size 15px). Open Sans must be retained as a font, but Roboto can be replaced if you wish.

screenshot from 2017-11-27 10-02-25

screenshot from 2017-11-27 10-02-32

Your Task

Your task is to:

  • Identify the components in this user interface
  • Make a list of the problems with this UI - what can be improved? Why?
  • Propose updates/improvements to the visual design of the page
  • Propose transitions for the interactive elements on the page (dropdown, select, checkbox)

Scope

The scope of this exercise is UI only. Please do not make any major changes to the page layout (e.g. moving the menu, sidebar, etc.)

What we're looking for:

  • Design adjustments that make the page clearer and easier to use
  • Design adjustments that delight the user

Presenting your work

Please do not send your completed design exercise to us. Instead, we'd like you to present your notes and design in the next interview, which will allow us to ask questions and discuss your approach.

Questions

If you have any questions about this exercise, please don't hesistate to contact Nicole at nicole.harris@people-doc.com

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment