In the bustling city of Atlanta, Georgia is an innovative group of engineers and designers who excel in building extraordinary tradeshow events and interior architecture for Amazon, Fruit of the Loom, Delta Airlines, Home Depot and other recognizable brands. As a company that prides themselves in creating innovative experiences, they were unenthusiastic about the overall look of their website and it's searchability. Fascinated by my work, they wanted me to create an exceptional website- catered to their customers and their new brand. Compact with worry and triumph, read on to discover how I transformed Blue Sky EXP's website:
Redesign and develop Blue Sky's entire website following their new brand guidelines and UX research/design.
1. Conduct UX research by creating personas, job stories, analyzing Blue Sky's customers' experience with their current website and competitor analysis so that I can discover their pain points 2. Build a site map and flesh out low fidelity wireframes with a fresh look & feel of the site using the research we accumulated 3. Finally, develop their brand new site on Webflow
I followed IDEO's Human-Centered Design and Lean UX Design Thinking Process to make sure that my design decisions were supported by user research and feedback.
I began by conducting online research and hour long meetings with Blue Sky's executives and president of sales and marketing to understand what Blue sky does, what value they provide for their customers and what their customers look for so I can have a better understanding of their business. Along with personas, job stories, analyzing Blue Sky's customers' experience with their current website and competitor research I can get a better grasp of their customers' needs and pain points to help me build out their website:
Why companies would want to hire an exhibit/ tradeshow designer
Statistics On The Value Of Exhibiting At Tradeshows
What companies look for when choosing the exhibit/tradeshow designer they want to work with:
I used the Jobs to Be Done Framework to explore different contexts in which a user would use Blue Sky's website and to understand their motivation and desired outcome. The first job story demonstrates the potential clients' reason for being on Blue Sky's website which will replace the situation in the second job story that delves into the outcome they want to achieve by being on their site.
I created the following job stories based on the research Blue Sky provided me:
Based on the job stories and my understanding of the core functions of Blue Sky's website, I developed a few scenarios with a series of tasks that Blue Skys' customers would go through and give us feedback on as they navigate through their old website:
Unfortunately, we weren't able to test their customers' experience with those questions/tasks. However, based on the information given to me in our meeting in regards to their customers' experience going through their site, these are a few pain points that were observed:
Pain Point #1: Users receive the wrong impression of what Blue Sky is (the lady with the mask gives the impression of hospitality). Upon entering their site, it's not clear who Blue Sky is and what they do.
Pain Point #2: The home page is not intuitive. The user's first instinct is to vertically scroll through the different slides with their mouse pad. You have to arduously click on each individual dot to view each slide.
Paint Point #3: Lack of emotion- shares nothing about what they did for their community and how they impact their community
Paint Point #4: Difficult to determine what this service entails. Too much text to digest.
Pain Point #5: Not enough information about the service supposedly talked about on the page. Elements and organization of the page does not effectively support the main idea of the page.
Competitor research is a way to get both indispensable info and inspiration. Comparing 3-5 websites, I analyzed each of the websites...
For the purpose of this case study, I will only dive into one website that inspired the new website's service page, headers and home page- Astound:
For each website I built a page structure to understand how their UX designer organized their website. Underneath, I wrote a few ideas/ inspiration for building out Blue Sky's new website.
Page Structure
Inspiration for Blue Sky's new website:
Usability & Navigation
To test the usability and navigation of Astound's site, I went back to my 4 tasks (refer to Blue Sky Website Usability Test Tasks Image above) under usability testing and a few scenarios from the job stories. With a non-targeted group of friends, I asked them to go through the 4 tasks on Astounds site. The organization of their site from page structure to the elements in each section of their site proved to be highly effective in seamlessly accomplishing a few of the tasks. I decided to use a few of their page/ section structures as a source of inspiration for Blue Sky's redesign- every box outlined in green are sections and hierarchies I decided to get inspiration from for their new site:
As an example, the Capabilities navigation section they designed was an ingenious way for potential clients' to easily see and choose which service they want to specifically learn about.
Each service description layout is also straightforward and easy to follow when one of the services above are clicked.
Content & Design
I was inspired by their page heros and how they used capital letters for their headings:
Based on Astound' s site analysis, these are few elements that inspired Blue Sky's new redesign:
Summarizing
Pain Point #1: Users receive the wrong impression of what Blue Sky is (the lady with the mask gives the impression of hospitality). Upon entering their site, it's not clear who Blue Sky is and what they do.
Solution:
Pain Point #2: The home page is not intuitive. The user's first instinct is to vertically scroll through the different slides with their mouse pad. You have to arduously click on each individual dot to view each slide.
Solution:
Paint Point #3: Lack of emotion- shares nothing about what they did and how they impact their community
Solution:
Paint Point #4: Difficult to determine what this service entails. Too much text to digest.
Solution:
Pain Point #5: Not enough information about the service supposedly talked about on the page. Elements and organization of the page does not effectively support the main idea of the page.
Solution:
I began by creating a site map of the site based on the pain points I needed to address and inspiration from others sites that I wanted to add:
Expanding the site map, I built out the low fidelity wireframes. Each wireframe demonstrates the functionality and layout of each section, depending on their purpose:
Hey there! Writing the copy for this content is still in progress! Stay tuned ^_^!