Haven_logo2.jpg

HAVEN (Copy) (Copy) (Copy)

HAVEN

 
 

MY DESIGN PROCESS

 

PAIN POINTS

When it came to the exhibition project, I had to address thepain points differently than I typically would. My teammatesand I had a clear understanding of the branding and basecontent but we were missing information that dived deeper. I was tasked with creating a website where the audience would be able to get a more well-rounded understanding of Copenhagen'ssustainability efforts. So, I approached the pain points by putting myself into the viewers' shoes trying to grasp what questions they would have after going through the exhibit. There were three main questions for each category: how did this concept get started, how was it made, and how does the community benefit for these sustainable efforts? This ultimately leads to three main subsections: history, design, and benefits. To plan what extra content I needed to find I created user personas to direct the content to those attendees.

 

RESEARCH

The research was strictly based on finding credibleresources that highlight the key moments in each category.Throughout the exhibit, the team decided to overview a wide variety of Copenhagen’s sustainability efforts. While abroad welearned about the three main sustaibable efforts: wind, solar, and waste management. These three became the main subject for the website because they were praised the most while in Denmark. After I had all of my content, I then moved to the mapping phase, where I put myself in the users’ shoes to create a proficient step-by-step on how they will navigate through the website.

 

END GOALS

This is an important step for me when it comes to the design process. I tend to get easily excited by different styles, themes, and ideas which can lead me to create something that doesn’t follow the rest of the content or brand. I create the end goals of what the website should be to keep myself accountable and always on track.

 

WIRE FRAMING

For this particular website, the wireframing was pretty simple.This step is important because it makes it easier to tweakand jot down ideas before entering the ‘skinning it up’ phase. I focused mainly on sketching my wireframes instead of doingit electronically because I wanted to keep the app as minimalistic as possible. Danish design could be centered around the concept of “less is more” therefore, I wanted to keep the design and content of the website in the same structure as the Danishcommunity.

 

ANALYSIS

The analysis step is what I like to call the “trial and error” phase. This website was going to have an array of people viewing it, so it had to make sense for multiple different mindsets. For this reason, I had a wide variety of people who walked through the website using the wireframes to see if there were any pressing questions orconfusion. Once I felt confident, all the issues were altered and I moved on to the next step.

 

PROTOTYPE

I’ve finally reached the ‘skinning it up’ phase, or in other words, making it look pretty. The website had to work cohesively with the rest of the exhibit, so I referred to the branding concept outline when creating the color palette, space, and typography.

Click here to walk through the website!

 

REFLECTIONS

Overall, the website had many positive comments when the exhibit went live. During the opening, I was able to talk with some of the guests who loved the information but still had further questions. It made me realize that I could have added more content addressing more of the subject matter. I had decided to pull back some of the content out of fear of overwhelming the viewers.What I failed to realize is that by pulling back that information, the viewers who wanted to not just get further information but wanted to dive in deep did not get all their questions answered. For future projects I’ve learned that it is better to put all of the information out there knowing viewers either will stop reading when they want to or viewers will able to get all the content they were seeking.

KOB_process.png
 
KOB_pain.jpg
KOB_persona.jpg
KOB_usermap.jpg
 
 
KOB_goals.jpg
 
 
KOB_wireframes.jpg
 
KOB_XD.jpg