Periscopic.com

OVERVIEW

Founded in 2004, Periscopic has become an award-winning leader in the field of data visualization design. My first internal project with the team were redesigning Periscopic's website. The redesign was intended to highlight the impact of Periscopic's work and to delight and engage new clients.

AGENCY

CLIENT

Periscopic

TEAM

MY ROLE

1 Designer, 1 Developer, and 1 Design Director

Visual Designer
Interaction Designer
Motion Designer

Research

Research was collected and analyzed in order to make updates to the Periscopic website.

Internal Survey

What words would you say describe the current (old) state of the website?

Competitor Analysis

Through competitor analysis, we found that:

Agencies with approachable websites often have initial screens with fewer choices and less visual stimuli. The experience is more paced.
Agencies with professional websites often have sort/filter/search capabilities for projects, succinctly state their mission/business, and feature interactivity.
Agencies with a strong visual identity on their website frequently have clean typography, plenty of white space, and animations or transitions that entertain.

Goals and Audiences

The goal of the redesign was to create a website that excites clients about Periscopic’s robust skill set, extensive experience, and drive to affect positive change in the world. The redesign was also intended to present Periscopic to others in the new media field as innovators and leaders in the field of data visualization.

Design Iteration Goals

When we were designing, we aimed to address listed bullet points below in our solution.

Periscopic’s mission statement and unique business vantage should be communicated in a manner to promote consideration.
The site can take design liberties with Periscopic’s current branding, but the logo should not be adjusted unless there is a compelling reason to do so.
The experience of entering and navigating around the website should not be difficult and should be approachable and accesible.
Video should be integrated wherever appropriate but should always be mindful of download sizes.
The site should be responsive and easily viewable on tablets and mobile devices, but the mobile view that recommends users to display on their computer for accessibility purposes.

Wireframes

Use your cursor on the Figma board above to see wireframes more closely

Text Styles

Visual Design

Impact Navigation

Contact

Computer vs Tablet

In the detailed impact page transition from desktop to tablet, the combination of UI elements into the meta card makes the layout more approachable.

Mobile Design

The mobile screen size was difficult to display Periscopic’s portfolio on because many of the interactive data visualization projects were created for computer screens. We created two different interfaces for mobile screens to avoid not capturing mobile visitors' interest and to increase accessibility.