TOOLS USED:
•Photoshop
•Illustrator
•Figma
•Treejack.com
THE PROBLEM
Although the Princeton Record Exchange location in Princeton New Jersey is regarded as a leading independent record store in the country, their website navigation is messy, difficult to follow, and outdated. The cluttered top level navigation makes it difficult for users to find what they are looking for in a seamless, effortless manner.
THE GOAL
Provide website visitors with an easy-to-follow navigation where they can reach their intended objective directly and efficiently. Overall, this will allow for a more clean and organized home page design to be implemented.
KEY TASKS
In order to evaluate the effectiveness of the current homepage navigation, the website should be broken down into key user-based tasks that drive the central needs of both the business and the users themselves.
The key tasks include:
Buying/selling music (records and CDs)
Buying/selling DVDs
Signing up for the mailing list
Viewing updates from social media
Viewing featured articles
RESEARCH
With the key tasks established, I am utilizing a tree test to see how well prospective users are able to navigate through the current navigation.
The following tasks were given to 15 users to complete the tree test:
1. Imagine you want to find a Disney DVD for your children. Where would you go?
2. Where would you go to find the latest Facebook posts for the Princeton Record Exchange?
3. Where would you go to sign up for the mailing list?
4. You have a collection of jazz and rock records you would like to sell. Where would you go?
5. Where would you find national publications that talk about the Princeton Record Exchange?
FIRST STUDY RESULTS
49% overall success rate
64% directness
Median time of 1m 44s
DEFINING THE PROBLEM
Only two tasks yielded a success rate above 50%. As there was a success rate below 50% overall, the website proves to be too cluttered. The majority of testers had a difficult time finding the Facebook page, selling records, and finding national publications.
The below navigation tree reflects the current navigation with edits based on color. The color coding reflects what will be changed, not what has already been altered.
The revised navigation tree below reflects the changes made from the pre-existing website.
Changes in the Navigation:
No more than six secondary items under the primary navigation
The ‘About’ and ‘Buy from US’ sections are particularly cluttered with nine and eight items under them respectively. The re-design emphasizes conciseness with no more than six secondary items.
Each primary navigation item serves a central purpose
The ‘Directions’ section was taken out as a top nav level item and moved into the ‘About’ section as it does not serve as a main function for the business. The store address is located on the top right of the page as well.
Menu names were changed to reflect the understanding of all visitors of the website
Wording changes were made such as changing the term “LPs” to “Records” which is more broad and consistent with the business name. Other small changes were made to create a more concise navigation menu. These changes are represented by green color coding below.
TESTING
Using the same five task questions from the initial research, another tree test was conducted for the newly designed navigation. The results are displayed here:
88% overall success rate - 79.6% increase
77% directness - 20.3% increase
Median time of 1m 44s - 2.9% decrease
IMPLEMENTATION
With the navigation established, the new homepage design will incorporate multiple important features such as a direct newsletter sign-up area and access to store photos with virtual tour.
From the initial wireframe, a high fidelity mock-up was created to show and example of what the new homepage may look like. Each element on the page serves a purpose correlating to the navigation.
