North Shore Swell Website
UX, IA, Wireframes, UI

The Overview

This project was solely completed for design exploration as it has no affiliation with any established North Shore brand. I created the brand, North Shore, and developed its corporate identity. I designed the logo and the entirity of the website. Along with these elements, I also created a business letterhead and envelope featuring the brand's logo. The following showcased data and research is all based on real life data from actual statistics documents about people who surf.

chart image

The Need

While conceptualizing the North Shore Swell brand, I brainstormed and thoughtfully crafted a user need for this brand as a whole and also the need for the brand's main website. Crafting this need allowed me to explore the surf world, the people who surf, and the desire of learning and mastering the sport. From that information that was unveiled to me, I was introduced to a whole new world about statistics of a potential and likely user base of this brand. Conceptualizing that this brand would be based in areas where the surf is always a ten, the need for this brand became even more important.



User Segmentation

Once the conceptualization stage had been completed, it was time to start researching a potential user base and seeing what kind of information I could seek out about who would be using this brand's website.From various research around the web, reading surfing documents on statistics of the sport and of the typical people who take part in the sport provided me with enough information I needede to construct user segmentation documents in order to thoughtfully design a website intuitive for those who'd be using it.

north shore swell user segmentation
north shore swell user segmentation


User Personas

I was then able to utilize the creation of the user segmentation in order to craft together user personas. This helped me make the users real by giving them a name and a face. Throughout the design process, I can always refer back to these personas so I can always have what "Jane" or "John" needs this website to be and how it should work.

north shore user personas
north shore user personas
north shore user personas
north shore user personas


Information Architecture

As another part of this project, I created an information architecture map to organize all the pages of the website, where they should live, under which category they fall, and to simply have a hierarchical structure present behind the interface of the site. It's not what the page is, it's why the page is where it is.

north shore information architecture


Process Flow Diagram

Since I was creating a website for the brand, I wanted to map out a user process flow of part of the site. The brand's website is a mix between an informational website and an eCommerce website. For the process flow, I mapped out a user's journey through the website with a goal of making a purchase. This included showcasing selecting an item, customizing the item, adding it to the cart, becoming a member, and journeying through the checkout process.

north shore process flow diagrams


Wireframes

Finally reaching the skeleton of the website, I was able to start planning the layout of the pages, where elements would be placed, and the overall intuitive aspect of the entire site. The wireframes go through the main home page and a subsequent page that shows an eCommerce structure of a clothing layout.

north shore wireframes
north shore wireframes
north shore wireframes


User Interface Design

Once I had the wireframes finalized for not only how I wanted them to be, but also they are designed in the best way possible to optimize the users' workflows.

north shore wireframes
north shore wireframes