top of page

Designing Information Sites

Website Design | Visual Design | Presentation design

Project : Academic

Role : Student at RVU M.Des Program

Skills : Research,Prototyping, Content curation and presentation design

Duration : 1 month

In this design project, I explored finding a new, fresh, and interactive way to display information on a site.

To venture beyond traditional designs that are seen being used in the majority of websites today.

I have chosen Miley Cyrus.
This website is a tribute to her life so far.

(You might know her from the show “ Hannah Montana”. Growing up, I was a huge geek for this show and I owned everything Miley/Hannah, from lunch bags to paper wallets).

This project was developed in three stages:

image.png

1. Content Curation

I watched many videos and read many articles/blogs to try to understand Miley Cyrus better.
I collected information on various topics — her life, work, family, romantic relationships, pets, and more.

I curated around :

  1. 95+ images

  2. 90 Links

  3. 30 Videos

I observed the following recurring themes while gathering this information.

  1. Miley was subjected to a lot of criticism by the media as well as fans

  2. She constantly reinvented herself

  3. She is very dedicated towards her work as an artist

I started noticing two sides to Miley -

  1. A passionate entertainer/performer

  2. A child star who was subject to a great amount of scrutiny for both her public and private persona

So, how can these two sides of her be represented?

2. Content Organization

I picked “stage” as my metaphor to strategically develop the site.

 

A stage can be looked at as having two distinct areas, where distinct activities take place:

 

  • The Frontstage

  • The Backstage

image.png

I decided to use this duality of a stage to represent my view of the two sides of Miley.

The next step was to organize this data. I decided to divide Miley’s life (from when she became famous) into six phases.
I call these her “eras”.

image.png

Each era has a ‘frontstage’ page and a ‘backstage’ page. The frontstage is to showcase her as a performer and the backstage allows users to explore her personal life in that era.

The scope of this project is to create an audio-visual experience of Miley Cyrus’s life.The site aims to be a detailed representation of her life and exploratory in terms of design.

3. Content Presentation

To design the site, the following three planes were considered:

  1. Structure and navigation

  2. Abstraction of the metaphor (stage)

  3. Layout and visual design

Structure and navigation
image.png

To abstract the concept of the stage, the following design decisions were made:

  • a.Glamourizing the frontstage

  • b.Transitioning between the frontstage and backstage

  • c.Exposing the grids of the backstage

I decided to give the entire website a dark theme, mirroring the typical dark atmosphere found in both frontstage and backstage areas.

a.Glamourizing the frontstage

 

To bring out the glamour and presence of the frontstage, visually exciting videos and audio were used.The font used to bring in the glamour is Hudsonny.Hudsonny was used for headings and small phrases, it was paired with Helvetica for body text and subtitles.These two fonts complement each other. Here is an example:

image.png
image.png
b.Transitioning between the frontstage and backstageFrontstage:

 

The curtains open to reveal the performer, they “slide open”.Backstage: The people push around props in a cart that “slides” on the floor. This “slide” action has been abstracted. The page “slides” between the frontstage and backstage and vice versa.

image.png
c.Exposing the grids of the backstage

The Backstage has an exposed structure. This was the inspiration behind my design decision to expose the grids on the site.

image.png
The layout and visual design

I designed the layout for the different pages in each era and replicated the same across the site.

image.png

The overall visual design decisions were made in three parts:

image.png
To understand the user’s perspective, I tested the site with 10 users.

 

  1. The users came with the mental modal of service websites. There was an initial learning curve, but all the users were able to successfully navigate the site after the first try

  2. The affordance of certain buttons was low

  3. The users were intrigued by the website

This testing helped me make changes that aided the user.I fixed the affordance and added introductory instructions.
Results

The final design was created after multiple iterations and refinement. First, the layouts and navigation were built and then the pages were saturated with information.

 

The file has:

  1. 6 introductory pages

  2. 30 era pages

  3. 66 backstage pages

Experience the design:

bottom of page