User Experience (UX) Design I

There are a couple inaccuracies with the main navigation. It jumps from a smaller mid page navigation on the front page to full page navigation when clicking a couple of the pages within the site. It isn’t consistent on what pages are full page and which are not. The drop down menus also utilize very small text and no metaphors are used other than the search icon above the nav bar (which is located at the top of the page in an expected place.)

To create an account, you will need to click on login and there isn’t any indication that this is where to create an account, this option is also very small in the upper right corner. Even though it is in an expected place in the nav, it doesn’t use a metaphor for ‘Login’ nor ‘Cart.’ Once in the account area, the navigation opens up to include more options above just ‘Login’. Why aren’t these options available on every page including the home?

Viewing the site via a mobile device, the site doesn’t sit tightly within the viewport. It can float around horizontally. While scrolling this is incredibly evident. The footer isn’t always visible via mobile devices especially iPhone users. It does show up on a couple pages but, it isn’t consistent which page it is shown. It is not shown on the home page though.

Small text in the hamburger menus can also be an issue. When tapping on a menu item, it will take you to the page requested, however, if you just want to close the menu, there isn’t an X to close it out. Tapping outside the hamburger menu box doesn’t close it as well. Tapping on the ‘Browse’ page is also problematic. Once the page is loaded, the hamburger menu gets smaller, it sits next to the Search bar (almost on top of it,) and the Search bar can be accidentally tapped because the entire page within the viewport becomes smaller. This does not occur when viewing the same page via desktop.

The site design overall has a dated and unfinished look that may turn away some users and potential customers. The long scroll (on both desktop and mobile) of most pages is overwhelming without a sticky header and a back to top button isn’t available. Having too many options can be frustrating because of how much is offered to the user all at once.

The sidebars are also inconsistent page to page and the site doesn’t seem to have a cohesive layout page to page. Social media links seem like an afterthought on most pages.

After creating the wireframes, a prototype was created in Adobe XD. This prototype included a better website layout with logical sections, a better designed navigation, and a more stable mobile experience. Due to time constraints, it was a fairly basic walkthrough of what could potentially be available to the user.

Shown here is just a snapshot of what is possible with this website, what is possible with a layout update, and it’s behavior.

To fully see how this website would look on a mobile device mockups on an iPhone were created to help visualize it.

After creation of the prototype, a presentation/report was created. This report outlined reasonings and gave a concise visual representation of the steps taken to improve the website.