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. 

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) would 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

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

I referenced 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.

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

Event Display (column 2): Are future events listed? If not, are past events listed?

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

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


sn-vs-dwmn-homepage.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 was 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

WIREFRAMES

After testing the paper prototypes I developed, I started creating lofi wireframes. I had the opportunity to test the first lofi experience with different classmates, and got some feedback on details of the site layout which helped inform my hifi design. The sketch below shows what a user flow might look like on mobile.

Feedback from testing:

  • Indicate required fields with an astrix

  • Add the word “Upcoming” to events

  • Reduce number of clicks required before “Buy Tickets” page.

User Scenario: You just heard about secondnature and want to make sure you get a ticket to their next event.

Revised-wireframes-3-5.png

Working with Secondnature

The “nature” mood board had the most elements that the group liked.

After completing the UX Design course at General Assembly, I shared the prototypes I’d created with secondnature. At the point of course completion, I had a lot of great work, but hadn’t really nailed down a visual design approach that felt polished enough or that I thought represented the group. I decided to work with the group to get a better idea of what they wanted their site to look like.

CONCEPTS and mood boards

The group did not have too much feedback or “a vision” regarding what they wanted for the design aesthetic, so I developed mood boards to help them narrow down a look and feel.

I provided 3 approaches:

  1. Futuristic/Retro (glowing neon and reflective surfaces)

  2. Stark/Industrial (harsh with sharp edges and black and white)

  3. Nature (textures and colors from nature)

The group gravitated toward elements of each approach but particularly liked the look of the“nature” board, pictured here. For the design, I decided to focus on images capturing recurring patterns and forms found in nature paired with a tall, narrow font with heavy kerning.


Visual DIRECTION

I started by creating a desktop layout which applied the visual design direction that the group gravitated toward. The design is still in development, but the basic layout for a homepage and artist page is depicted below. On click, each section would link to sub-pages in the same category. I liked the visually compelling nature of a homepage presented this way.

(I will be adding color)

comp-mockup-5-22-home.png
comp-mockup-5-22-artist-page.png