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:
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 :
-
95+ images
-
90 Links
-
30 Videos
I observed the following recurring themes while gathering this information.
​
Miley was subjected to a lot of criticism by the media as well as fans
She constantly reinvented herself
She is very dedicated towards her work as an artist
​
I started noticing two sides to Miley -
​
-
A passionate entertainer/performer
-
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
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”.
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:
​
Structure and navigation
Abstraction of the metaphor (stage)
Layout and visual design
Structure and navigation
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:
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.
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.
The layout and visual design
​
I designed the layout for the different pages in each era and replicated the same across the site.
The overall visual design decisions were made in three parts:
To understand the user’s perspective, I tested the site with 10 users.
-
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
-
The affordance of certain buttons was low
-
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.
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:
-
6 introductory pages
-
30 era pages
-
66 backstage pages
Experience the design: