Project Overview
KEXP has been re-designing its website based on initial designs from HUM Creative. Designs were handed off, and KEXP engineering then had to do the hard work of adapting those designs to real world business and technical requirement without the benefit of an integrated design team. Now that launch of the site is imminent it’s a good time to take this opportunity to evaluate the experience from a holistic level.
Over the course of six weeks my teammate Brianna and I have partnered with KEXP and Blamo design firm, to do the following:
Goals & Outcomes
UX evaluation of v2 KEXP website primary task flows. W will create a in prioritized Backlog of design items as well as complete wireframes for some key experiences. Activities & Deliverables: UX eval of key areas from both mobile and web views. These are included but not limited to: taking a fresh look at the “UI” (“design audit”). Ensure users understand menu structure and nomenclature (usability study with specific goals). Video experience: document/evaluate/design/own: (consumption, browse, search, etc.) Template improvements: especially in listen/podcast sections. Understanding user engagement: how do they arrive and stay? Understanding user engagement: how to keep their flow through site? Synthesis of that feedback resulting in prioritized list of design work items. Wireframe designs for key task flows in each of those high priority areas. Prep designs for KEXP development team. Create prototypes of website.
Roles: I was In charge of the Desktop version of the site and Brianna was in charge of the mobile version of the site. Anything related to the desktop version of the site, including research and user testing, is my work.
Tools used: Invision prototyping tool, Illustrator, Lucid Chart, Drop Box Paper, Photoshop.
After researching KEXP user's we came up with three user types. This informs us in our decisions of what the site needs to do and how it should function.
Website use cases based off user research. This helps us evaluate what the website needs to do and how it needs to function.
KEXP site evaluation/ audit. We wrote down every issue we found with the current experience of the site. This helped us decide what changes need to be made and how we can make it better.
This is a site map I created of the current website, showing information architecture.
Information architecture user testing. We gave 15 people cards that were labeled with the different menu items from KEXP's website and asked them to place them into categories we provided. This helped us to figure out where these items should be located on the website.
These are different iterations of the information architecture based on user feedback
Final Information Architecture suggestion for Desktop Site based off research and feedback
Wire frames of possible layout options, and reasoning behind them.
Menu Desktop Experience
Changes: Change Donate button, discard hamburger menu, create sub top menu, change search placement, move playlist to top sub menu.
Reasoning: Before the donate button looked like it was highlighted so whenever you were on a page it seemed like you were on the donate page. We wanted to treat it drastically different from any of the menu items so it stood out and wasn't confused with being part of the main navigation. Before, there were so many forms of navigation it was confusing for the user, so we wanted to simplify it and organize it. Because of this we removed the side items (events, visit KEXP , donor lounge, and playlist, removed the hamburger menu, and placed all of those items in a top sub menu. This way instead of two sub navs there is one clear sub nav. In this version everything is in one place, there is clear hierarchical differences between the main and sub nav, and everything is out in the open and easy to see and select. This drastically cleared up the navigation making it less overwhelming and organized. This will help user find what they are looking for.
Listen Desktop Experience
Changes: Changed category navigation, created side menu, created scrolling categories, changed the grey box podcast format, allow for play and pause on the podcast button itself.
Reasoning: Before, the navigation on pages were not consistent and were unorganized. For example the the sub nav on the page was larger than the main nav and the sub sub nav stood out more than both of them because they were in orange bubbles. Also having the navigation centered on the page with no organization gets confusing. Because of this we created a navigation on the side that is organized and can be repeated throughout the entire website, we also added a scrolling bar to further decide the sub categories. These have better hierarchy that will guide the user. Also side categorical menus to the left side on websites are commonly used so users will be familiar with this. We also changed the format of the podcasts to draw the listeners in. We used more of a list format instead of the large grey boxes. The boxes had no significance or purpose and made it hard to choose what to listen to. Now there is an image giving context to the podcasts and an organized list of the podcasts. You can now pause and play when you click on the podcast itself.
Watch Desktop Experience
Changes: Added categories, Created better hierarchy, added left and right scrolling videos. Changed the flow of video watching, added suggested videos after you watch one video.
Reasoning: We wanted users to be able to find the video they are looking for they can do this now by searching by category. We also wanted them to get stuck in a watching loop and stay interested in the content. Because of this we added suggested videos on the side and more videos under the category they are already watching underneath. Next video will automaticlly play when the first is done.
Read Desktop Experience
Changes: For the Read page we implemented the new side menu organization and scrolling categories.
Reasoning: This is a more efficient way to search and will simplify the search process. This will also help create consistency throughout the entire website. Having consistency will create an intuitive website and will help the users find what they are looking for and more.
Suggested flow for Listen Experience
Suggested flow for Read Experience
Suggested Flow for Watch Experience
