Platforms

Desktop
Mobile Web

Roles

UX & UI Design
Prototyping

Tools

Sketch
Axure RP


Objective

Design the structure of Quidsi.com from scratch to be responsive and easy to update/maintain without technical help.

Problem

Quidsi.com was the main portal for job candidates to learn about the company and apply for open jobs. However, HR was was hesitant to send traffic to the current site because it had many issues:

  • The site was not mobile friendly, and more than 50% of job seekers look up job information on their phones
  • It was difficult to update the site: the Creative team could change text and pictures, but any coding changes had to go through Tech to be prioritized and implemented
  • The site had a bounce rate of 79% with an average time on site of 2min 30s

Solution

To address HR's concerns and modernize Quidsi.com, I designed a system of responsive components that were easy to configure. 

Unfortunately, while the HR team was excited about the new responsive components, the redesign of Quidsi.com was not prioritized and worked on by Tech.

Responsive Components

Components
  • Full-width image
  • Image carousel
  • Video player
  • 1-box component (max width 990px)
  • 2-box component (max width 480px)
  • 3-box component (max width 310px)
  • 4-box component (max width 225px)
  • 5-box component (max width 174px)
Configurations

They are designed to be easily configurable, with the ability to edit the following options:

  • Content
  • Arrangement
  • Vertical padding
  • (optional) row background

Example Layouts

Example 1

Example 2

WordPress Application

Though the responsive components were unfortunately not used for Quidsi.com, I adapted the concept to WordPress, where there is also a shortage of usable layout editors that allow you to create and customize responsive page. To take the project a step further, I designed a back end system within the WordPress editor that a user would use to create a page with the responsive components.

1. Select responsive components widget

Designate the page to be laid out in responsive web components and invoke the set up modal by clicking the highlighted web component icon.

2. Enter first component settings

On the modal window, enter the following for the first component: component type, number of boxes in the component, background color or image, and bottom margin/padding.

3. Enter content

The user can enter content using the tools of the visual editor, or gain more control over the content by clicking the HTML button and inputing/editing the HTML of the box. The move button rearranges the components and boxes, the settings button opens the set up modal specific to the component, and the trash button deletes the component.

 

4. Add more components

Insert another component, either through the web component icon or the “Add Component” control in the visual text editor.