MS Redesign 1 - uploads-ssl.webflow.com

SAROD.COMSarod.com Website Redesign Assignment

By Yuhui Mao

12/19/2019 PDT

PROMPT“Please redesign the website www.sarod.com by looking and thinking of concepts and ideas from a fan’s perspective. This is the website of Maestro Amjad Ali Khan and his son’s Amaan and Ayaan.”

http://www.sarod.com

DESIGN PROCESS

Understand Background

1

Understand Target User

Usability Review

Ideate & Redesign

Iterate & Deliver

2 3 4 5

Total Time Used: 10 Hours

GOALSREDESIGN GOALSBased on information provided by the stakeholder, below is a list of redesign goals for this project:

• Update the visual UI of the site to be more modern

• Responsive web design which will work on mobile devices

• Improve the usability of the site from a fan’s perspective

• Innovative designs to keep fans engaged

• Potentially be beneficial to the musicians

BACKGROUNDBACKGROUNDSarod.com is the website of Maestro Amjad Ali Khan as the main title of the site shows.

The site is used for showcase the musicians’ accomplishments, life stories, music and videos, tour information, etc. to the fans.

The site also provides entry points to his son’s Amaan and Ayaan’s sites, introduction of the instrument and the museum of sarod.

COMPETITIVECOMPETITIVE ANALYSIS

A competitive analysis was conducted with a Japanese instrumentalist site, one local band, two famous artist to find out how other bands/musicians structured their homepages.

I audited information structure, layout, tone and navigation.

John Legend’s Taylor Swift’s

Pearl Jam (local band) Seattle Japanese Taiko Group

KEY FINDINGS1. All sites employed simple and elegant full-page imagery banner design to showcase the musicians and set the tone.

2. Simplified navigation menu with on average 6 menu items, which indirectly reflects fan’s primary needs:

1.News 2.Music 3.Video 4.Tour 5.Store 6.Subscribe

3. The local band Pearl Jam also includes a section About to introduce the band for first timers.

4. The homepage displays an overview of news, music/video, tour dates and shop in particular.

RESEARCHUSER RESEARCHWith user needs indirectly reflected by other site’s homepages design, to find more about fans’ needs, I quickly phone interviewed 4 people with prior fan experience and ask about the following:

• What information do they want to see from the musician’s

site that they follow?

• Rank the information in the order of importance for them

KEY FINDINGS1. 5 types of information on average were mentioned by interviewers in the following importance order:

1. News/Updates 2. Schedules 3. Tour Information 4. Music 5. Video

2. They expected to find the information they look for by scrolling the homepage without using the menu.

TESTINGUSABILITY TESTINGGOAL: • Understand usability issues and painpoints with the

current homepage

METHOD: • Heuristic evaluation

USABILITY ISSUES1. NAVIGATION

The current navigation menu consists of 12 items. Information is not well organized and prioritized, creating visual

and exploration fatigue for fans.

Additionally, there are 4 links at the bottom of the page which are not noticeable.

USABILITY ISSUES2. INCONSISTENCY - ALIGNMENT

There are inconsistencies

on the alignment of

content on the

homepage, shown on the

left with yellow lines.

USABILITY ISSUES2. INCONSISTENCY - LAYOUT

There are inconsistencies in the layout of content, in

terms of the size, location of each section and

additional links as shown by yellow boxes. Sections

overlap (e.g. View All button next to LATEST

PROJECTS) and are not in alignment with each other.

USABILITY ISSUES2. INCONSISTENCY - CLICKABLE CONTENT & NAMING

There are inconsistencies in which content is clickable. Unlike other sections, in the “IN THE NEWS” and “TOUR

DATES” sections, users are not able to click on each content item and see detail, but to click on the “View All” or

“More” which have inconsistent naming.

USABILITY ISSUES3. ACCESSIBILITY

There are a couple of noticeable accessibility issues on the homepage. The newsletter sign

up field has no description. Additionally, the page is full of images of text including the title

image with the name.

Thus, I ran a whole page accessibility test and found out more issues in terms of the

readability, compatibility, etc.

USABILITY ISSUES4. ASTHETIC

The visual of the site is outdated. Patterned

background and styled decorations (e.g. the frame)

create a lot of visual noise for the users and distract

them from focusing on the content. The dark color

palette make some of the content hard to see.

REDESIGNIDEATE & REDESIGNGOAL: • Due to the time constraint, the redesign will

focus on the optimization of the navigation, homepage layout and the visual.

TOOL: • Sketch

NAVIGATION

I started by redesigning the IA of the whole site to get a more prioritized, organized navigation menu items.

WIREFRAMES

Two versions of the wireframes were designed to explore different layout patterns and interactions.

The goals here are to provide viewers with just enough information on the homepage, to engage them, and to benefit the musician at the same time with the new design.

FINAL DESIGNFont: Montserrat Avenir

Grid: 12 column

Color: Black #00000 White #ffffff Blue #3E99FF

Imagery (from FB) https://www.facebook.com/pg/sarodmaestroamjadalikhan/photos/?ref=page_internal

https://www.facebook.com/pg/sarodmaestroamjadalikhan/photos/?ref=page_internal



FINAL DESIGN - WEB

Subscribe

Listen Now

AMJAD

ALI KHAN

AAKAbout News Music Video Tour Shop

SAROD VIRTUSO & COMPOSER

3:45

New Album

SAROD EUOHONYAmjad Ali Khan

Title SongSong Name 1

Song Name 2

Song Name 3

Tickets

UPCOMING TOURS

Master on Masters Book Launch

Dec.23

New DelhiAmaan Ali BangashAyaan Ai Bangash

Stein Auditorium

Tickets

Dec.21

MumbaiAmaan Ali Bangash

Amjad Ali Khan

Thane

Tickets

Dec.20

KolkataAmaan Ali BangashAyaan Ai Bangash

Sangeet Kalamandir

Tickets

Dec.15


Stein Auditorium

Tickets

Dec.11

MuddenahalliAmaan Ali Bangash

Amjad Ali Khan

Sathya Sai Grama

Sold Out

Dec.20

PuneAmaan Ali BangashAyaan Ai Bangash

Private Event

Tickets

Dec.23

NCAmaan Ali BangashAyaan Ai Bangash

Chapel Hill

Tickets

Dec.21


Amjad Ali Khan

Thane

Tickets

Buy Now Buy Now Buy Now

Dec.20


Sangeet Kalamandir

Dec Jan Feb Mar Apr May

LATEST NEWS

A Celebration of Indian Classical Music in California

“Live music to save heritage” Concerts

December. 8th December. 8th

CONFLUENCE - ᣟ�at Signapore

December. 8th

View All

View AllView All

View All

Read More

Amaan Ali BangashSon of Amjad Ali Khan

My Father, Our Fraternity: The Story of Haafiz Ali Khan and my World

The Hindustan Times presents the world of Amjad Ali Khan

Master on Masters

$19.99 $19.99 $19.99

Contact Us Copyright Privacy Terms Cookie Policy

SUBSCRIBE & FOLLOWto get updates from Amjad Ali Khan

SubscribeEmail Address

Subscribe

Listen Now

AMJAD

ALI KHAN



3:45

New Album



Song Name 2

Song Name 3

Tickets

UPCOMING TOURS


Dec.23


Stein Auditorium

Tickets

Dec.21


Amjad Ali Khan

Thane

Tickets

Dec.20


Sangeet Kalamandir

Tickets

Dec.15


Stein Auditorium

Tickets

Dec.11


Amjad Ali Khan

Sathya Sai Grama

Sold Out

Dec.20


Private Event

Tickets

Dec.23


Chapel Hill

Tickets

Dec.21


Amjad Ali Khan

Thane

Tickets


Dec.20


Sangeet Kalamandir


LATEST NEWS





December. 8th

View All

View All

View All

Read More




Master on Masters

$19.99 $19.99 $19.99

Subscribe

SUBSCRIBE & FOLLOW


to get updates from Amjad Ali Khan

Email Address

Subscribe

Listen Now

AMJAD

ALI KHAN



3:45

New Album



Song Name 2

Song Name 3

Tickets

UPCOMING TOURS


Dec.23


Stein Auditorium

Tickets

Dec.21


Amjad Ali Khan

Thane

Tickets

Dec.20


Sangeet Kalamandir

Tickets

Dec.15


Stein Auditorium

Tickets

Dec.11


Amjad Ali Khan

Sathya Sai Grama

Sold Out

Dec.20


Private Event

Tickets

Dec.23


Chapel Hill

Tickets

Dec.21


Amjad Ali Khan

Thane

Tickets


Dec.20


Sangeet Kalamandir


LATEST NEWS





December. 8th

View All

View All

View All

Read More




Master on Masters

$19.99 $19.99 $19.99

Subscribe

SUBSCRIBE & FOLLOW



Email Address

Subscribe

Listen Now

AMJAD

ALI KHAN



3:45

New Album



Song Name 2

Song Name 3

Tickets

UPCOMING TOURS


Dec.23


Stein Auditorium

Tickets

Dec.21


Amjad Ali Khan

Thane

Tickets

Dec.20


Sangeet Kalamandir

Tickets

Dec.15


Stein Auditorium

Tickets

Dec.11


Amjad Ali Khan

Sathya Sai Grama

Sold Out

Dec.20


Private Event

Tickets

Dec.23


Chapel Hill

Tickets

Dec.21


Amjad Ali Khan

Thane

Tickets


Dec.20


Sangeet Kalamandir


LATEST NEWS





December. 8th

View All

View AllView All

View All

Read More




Master on Masters

$19.99 $19.99 $19.99




FINAL DESIGN - MOBILEListen Now


Jan Feb MarDec

Tickets

Dec.23

New Delhi

Amaan Ali BangashAyaan Ai Bangash

Stein Auditorium

Tickets

Dec.23

New Delhi


Stein Auditorium

Tickets

Dec.23

New Delhi


Stein Auditorium

Tickets

Dec.23

New Delhi


Stein Auditorium

AMJAD

ALI KHAN

LATEST NEWS

UPCOMING TOURS


December. 8th

Read More

View All

View All

View All

New AlbumSAROD EUOHONYAmjad Ali Khan

Title SongSong Name 1Song Name 1

3:45


Son of Amjad Ali Khan

Amaan Ali Bangash

Ayaan Ali Bangash

Sarod Ghar

The Sarod

Read More


Buy Now


$19.99

Buy Now

$19.99

Subscribe

Email Address


SUBSCRIBE & FOLLOW

Contact Us Privacy Terms

Copyright Cookie Policy

FINAL DESIGNBased on competitive analysis and user research insights, the navigation menu items have been redesigned and simplified to 6 items + Subscribe.

• About

• News

• Music

• Video

• Tour

• Shop

Subscribe

Listen Now

AMJAD

ALI KHAN



3:45

New Album



Song Name 2

Song Name 3

Tickets

UPCOMING TOURS


Dec.23


Stein Auditorium

Tickets

Dec.21


Amjad Ali Khan

Thane

Tickets

Dec.20


Sangeet Kalamandir

Tickets

Dec.15


Stein Auditorium

Tickets

Dec.11


Amjad Ali Khan

Sathya Sai Grama

Sold Out

Dec.20


Private Event

Tickets

Dec.23


Chapel Hill

Tickets

Dec.21


Amjad Ali Khan

Thane

Tickets


Dec.20


Sangeet Kalamandir


LATEST NEWS





December. 8th

View All

View All

View All

Read More




Master on Masters

$19.99 $19.99 $19.99

Subscribe

SUBSCRIBE & FOLLOW



Email Address

With Subscribe button being more noticeable on the top of the page, the musician can benefit from getting more followers.

FINAL DESIGNFull-page imagery banner design is used to quickly set

the tone of the homepage as a site to showcase the

accomplishment of a respectable and prestige musician.

Based on research insights, News/Updates are grouped

together as LATEST NEWS and displayed on top of the

page to inform fans about what the musician has been

up to.

• Fans can use the “View All” button to enter the

detailed News page to get more info.

Subscribe

Listen Now

AMJAD

ALI KHAN



3:45

New Album



Song Name 2

Song Name 3

Tickets

UPCOMING TOURS


Dec.23


Stein Auditorium

Tickets

Dec.21


Amjad Ali Khan

Thane

Tickets

Dec.20


Sangeet Kalamandir

Tickets

Dec.15


Stein Auditorium

Tickets

Dec.11


Amjad Ali Khan

Sathya Sai Grama

Sold Out

Dec.20


Private Event

Tickets

Dec.23


Chapel Hill

Tickets

Dec.21


Amjad Ali Khan

Thane

Tickets


Dec.20


Sangeet Kalamandir


LATEST NEWS





December. 8th

View All

View All

View All

Read More




Master on Masters

$19.99 $19.99 $19.99

Subscribe

SUBSCRIBE & FOLLOW



Email Address

FINAL DESIGNSince tour dates and information are the next big

thing fans care about, I used a lot of page real estate

to display upcoming tour information.

• A slider of month is designed to make browsing

more interesting to fans.

• Tour information consists of the date, venue, location and the musicians for quicker browsing.

• A “Ticket” button can take fans directly to the

purchase site, “Sold Out” status will be reflected

by the CTA for quicker access of the desired

information.

Subscribe

Listen Now

AMJAD

ALI KHAN



3:45

New Album



Song Name 2

Song Name 3

Tickets

UPCOMING TOURS


Dec.23


Stein Auditorium

Tickets

Dec.21


Amjad Ali Khan

Thane

Tickets

Dec.20


Sangeet Kalamandir

Tickets

Dec.15


Stein Auditorium

Tickets

Dec.11


Amjad Ali Khan

Sathya Sai Grama

Sold Out

Dec.20


Private Event

Tickets

Dec.23


Chapel Hill

Tickets

Dec.21


Amjad Ali Khan

Thane

Tickets


Dec.20


Sangeet Kalamandir


LATEST NEWS





December. 8th

View All

View All

View All

Read More




Master on Masters

$19.99 $19.99 $19.99

Subscribe

SUBSCRIBE & FOLLOW



Email Address

FINAL DESIGNMusic and Video are grouped together on the page

due to their interconnected relationship.

Fans can use the arrow to view more videos.

Music section has the most recent album playing as default. Previous albums are floating on the side to

create a more interesting interaction and to encourage

fans to play with images, hover and select a different

album to listen to.

Subscribe

Listen Now

AMJAD

ALI KHAN



3:45

New Album



Song Name 2

Song Name 3

Tickets

UPCOMING TOURS


Dec.23


Stein Auditorium

Tickets

Dec.21


Amjad Ali Khan

Thane

Tickets

Dec.20


Sangeet Kalamandir

Tickets

Dec.15


Stein Auditorium

Tickets

Dec.11


Amjad Ali Khan

Sathya Sai Grama

Sold Out

Dec.20


Private Event

Tickets

Dec.23


Chapel Hill

Tickets

Dec.21


Amjad Ali Khan

Thane

Tickets


Dec.20


Sangeet Kalamandir


LATEST NEWS





December. 8th

View All

View All

View All

Read More




Master on Masters

$19.99 $19.99 $19.99

Subscribe

SUBSCRIBE & FOLLOW



Email Address

FINAL DESIGNThe next section features a fun, playful image where

fans can expand the “+” icon and discover hidden

information about the musician’s sons, the instrument

and the museum for the instrument.

This provides better visibility of entry points of other

important content.

Subscribe

Listen Now

AMJAD

ALI KHAN



3:45

New Album



Song Name 2

Song Name 3

Tickets

UPCOMING TOURS


Dec.23


Stein Auditorium

Tickets

Dec.21


Amjad Ali Khan

Thane

Tickets

Dec.20


Sangeet Kalamandir

Tickets

Dec.15


Stein Auditorium

Tickets

Dec.11


Amjad Ali Khan

Sathya Sai Grama

Sold Out

Dec.20


Private Event

Tickets

Dec.23


Chapel Hill

Tickets

Dec.21


Amjad Ali Khan

Thane

Tickets


Dec.20


Sangeet Kalamandir


LATEST NEWS





December. 8th

View All

View All

View All

Read More




Master on Masters

$19.99 $19.99 $19.99

Subscribe

SUBSCRIBE & FOLLOW



Email Address

FINAL DESIGNLastly, to help the musician and recognize his

accomplishment, the Shop section displays the books available for fans to purchase.

At the bottom of the page, if fans didn’t subscribe in the

beginning, they are offered another opportunity to subscribe and follow the musician’s social media.

To avoid accessibility problem, a description has been added to the subscribe field.

Subscribe

Listen Now

AMJAD

ALI KHAN



3:45

New Album



Song Name 2

Song Name 3

Tickets

UPCOMING TOURS


Dec.23


Stein Auditorium

Tickets

Dec.21


Amjad Ali Khan

Thane

Tickets

Dec.20


Sangeet Kalamandir

Tickets

Dec.15


Stein Auditorium

Tickets

Dec.11


Amjad Ali Khan

Sathya Sai Grama

Sold Out

Dec.20


Private Event

Tickets

Dec.23


Chapel Hill

Tickets

Dec.21


Amjad Ali Khan

Thane

Tickets


Dec.20


Sangeet Kalamandir


LATEST NEWS





December. 8th

View All

View AllView All

View All

Read More




Master on Masters

$19.99 $19.99 $19.99




FINAL DESIGNFor mobile, navigation menu items are placed under the top

right hamburger menu.

Latest News section employs the horizontal sliding interaction pattern to decrease the use of mobile screen real

estate.

A “Read More” button is added to avoid accidental click on the whole section when sliding, comparing to when the

whole card is clickable in web design.

Tour section uses the same slider of month to keep the

playfulness of browsing. Tour date info has been reorganized

from 3 columns to 1.

FINAL DESIGNVideo section uses carousel-indicators on mobile for

a more intuitive mobile sliding interaction.

Floating albums for the Music section is removed

for a more feasible, smooth and clean music-playing

interaction on mobile.

“+” icons and expandable content are moved below the image, again, for a more feasible and

intuitive interaction with the fans.

Shop section employs the same sliding interaction

pattern from the Latest News section.

REFLECTIONREFLECTIONThis assignment is a very quick turnaround. With limited time, I was only able to focus on the redesign of the homepage with assumptions and limited research data.

If I have more time, I will create a more detailed documentation of my design.

I will also conduct usability testing for my redesign solutions and validate assumptions I made about fans’ mental model and behaviors.

THANK YOUThank you!

By Yuhui Mao

[email protected]

503-819-0093

mailto:[email protected]

MS Redesign 1 - uploads-ssl.webflow.com

Documents

Transcript of MS Redesign 1 - uploads-ssl.webflow.com