responsive Site design

During an intensive User Experience Design course at General Assembly, I began the process of redesigning a site for a group called secondnature - a techno music/arts collective and record label which throws events in the Seattle area.

The group’s current site is on a tumblr platform and does little to highlight each individual artist in the collective. In terms of functionality, the current site is unresponsive on mobile and lacks visual hierarchy or a clear indication of the intended user flow. 

Please note: this project is still in progress and will be updated regularly. The intent of this sample is to show the steps taken thus far.

SN-current-site.jpg

GOALS

I approached the project with the intention of creating a site that would (1) work harder to raise the profiles of artists within the collective, (2) establish a clearer link to the secondnature record label, and (3) make it easier for the collective to capture interest of potential event attendees.

 

Competitive Analysis

Referencing several sites with similar missions as secondnature and evaluated them based on the criteria noted below. I ranked each competitor based how well their site performed in each category.

i) Artist Display: How clearly are artists displayed? Does each artist have a bio and a pic associated with them?

ii) Event Display: Are future events listed? If not, are past events listed?

iii) Visual Design: Is the site responsive, visually accessible, are the colors fresh and current?

iv) Merch integration: Is merch stored on a reliable site (ie. Big Cartel) and well-displayed?

 
Screen Shot 2019-03-07 at 12.36.22 PM.png

User INTERVIEWS

I interviewed four users to capture their reactions to the secondnature site and the site of a collective based in New York called Discwoman. I wanted to see how users reacted to a site with a more simple design verses one which is more visually intense. 

My testing revealed that 75% of the users had browser issues while navigating the Discwoman site and found it visually confusing whereas most of the users I interviewed preferred the simplicity and approachability of the secondnature site.  About half the users I interviewed felt that the secondnature site looked unprofessional and “old school.” These findings informed my approach to the site design.

User Flows

User Scenario 1: How might we buy tickets to the next event?

USER-FLOW-3.png

User Scenario 2: How might we discover new music?

USER FLOW 3.png

paper prototypes

paperprototypes.png

INITIAL WIREFRAMES

After testing the paper prototypes I developed, I started creating lofi wireframes. I had the opportunity to test the lofi experience with different classmates, and got some feedback on details of the site layout which helped inform my hifi design. I’ve indicated the user path in blue and notes from classmates in red. User Scenario: You just heard about secondnature and want to make sure you get a ticket to their next event. 

Lofi Screenshot.png

REVISED WIREFRAMES

After testing my initial wireframes, I revised my lofi designs to incorporate my classmates’ feedback. I also reduced the number of clicks for the user by incorporating a “Buy Tickets” form module earlier in the user journey.

Revised-wireframes-3-5.png

Visual Design

This phase is in progress with the collective.