Storm Stop is a one-stop website designed to help people living in hurricane-prone areas prepare for and recover from hurricanes. At the beginning of my UX Certificate Program at the School of Visual Concepts, my cohort was tasked with imagining a product line website. Being a huge tropical weather nerd and getting these instructions during the height of hurricane season, I decided to bring Storm Stop to life.
I was the sole UX Designer and completed all the work for this project alone, taking on the roles of UX Researcher, Information Architect, and Interaction Designer along the way. I received feedback from my SVC Instructors, mentor, and cohort throughout the course of the project.
There is currently no single website with hurricane resources for the entire hurricane experience lifecycle, from preparation to recovery. Also, websites selling hurricane preparation items leave much to be desired, with most having a very limited supply. I wanted to create a single website where people living in a hurricane-prone area could find information about how to prepare for a hurricane, purchase hurricane preparation supplies, and find after-hurricane support.
Before beginning, I wanted to outline my user groups and business goals for Storm Stop.
To start, I wanted to see what hurricane resources are currently available. I also wanted to find out how people prepare for and recover from hurricanes. I did a competitive analysis, user interviews, and competitive benchmarking on a competitor website.
During hurricane season, I spend a lot of time on various websites monitoring storms. I came into this project with a decent understanding of what information is out there, but I wanted to test my assumption that there is currently no single website that encompasses the entire hurricane process. I looked at forecasting websites, such as the National Hurricane Center and The Weather Channel. I also looked at websites that sell emergency preparation items, such as The Red Cross and Home Depot.
In the end, I validated my assumption that there is no single website encompassing the entire hurricane process, from preparation to recovery. I also found that online stores selling preparation products have a limited supply of hurricane-specific items. Often, they sell a wider range of preparation products that aren't as helpful during a hurricane.
Next, I wanted to talk with people who have been through a hurricane about their experiences and what they found most helpful during the process. I also wanted to talk with people who haven't experienced a hurricane to get their thoughts on what would be important for them to know before their first storm. I did six in-person and remote interviews in total, four with people who have experienced a hurricane, and two with people who have never experienced a hurricane.
After completing my user interviews, I created an affinity diagram to help me see themes in my responses. From there, I created user stories and completed empathy map exercises to help me identify with my user's feelings and needs.
Next, I wanted to see how users interact with a competitor website. Because I knew I would be focusing on the store section of Storm Stop first, I decided to do a competitive benchmarking test on the Red Cross Store. I was primarily interested in seeing how participants navigated around the site, compared products, and added a product to their cart. I ran eight moderated testing sessions, four with people who have experienced a hurricane and four with people who have never experienced a hurricane.
Now that I had a large amount of information I wanted to include on Storm Stop, I switched my efforts to the information architecture of the site. To help me organize and group information together, I ran an open card sort using OptimalSort. I created 37 cards to be sorted, spanning all areas I wanted to include on my site. 11 participants completed the card sort, four of them being moderated. I had participants with hurricane experience and participants without hurricane experience complete my card sort to capture my two main user groups.
These cards included preparation guides, evacuation and shelter information, and tips on what to do with animals during a storm.
This section included hurricane forecasts and storm coverage.
Theses cards included a community forum, community relief efforts, insurance information, and relief organizations helping communities affected by the hurricane.
Participants grouped cards with preparation items into a separate category.
Participants grouped emergency resources, such as crisis phone numbers and how to report a missing person into its own category.
As part of our Interaction Design course, we were tasked with designing our site's store. I started out by sketching a homepage, shop landing page, and product page. I also wanted Storm Stop to provide a repair service on products purchased from the store that have been damaged by a hurricane. I decided to focus on mobile designs because it was reported as the most used platform to get information during a hurricane.
Before starting, I identified three overarching goals for Storm Stop's design:
I began the design process by rapidly sketching the four main parts of my flow, keeping my three design goals in mind.
In my masthead, I decided to use a hamburger navigation icon because of its recognizability. I also displayed search, account, and cart icons.
My homepage lists out each section of my primary navigation to make users aware of everything the site has to offer without needing to open the navigation menu. I also provide contextual navigation to each section throughout. I put current storm information at the top of the page because of its vital and time-sensitive nature. I then order the rest of the navigation categories in chronological order of when users would need them during the hurricane experience.
I divided Storm Stop's shop into four main categories based on my initial research. The carousel at the top of the page shows featured products and deals. I provide a lot of contextual navigation on the Shop landing page to allow users to easily navigate to whichever part of the store they'd like.
I decided users would need to be signed into their accounts to submit a product repair request. Once signed in, they are prompted to describe the damage done to the product, upload pictures, and submit their request.
After sketching, I started wireframing in Sketch. I went through four wireframe iterations, starting with low-fidelity wireframes and gradually increasing to mid/high-fidelity. I received feedback from my Interaction Design instructor and fellow cohort-mates between each iteration.
I decided to remove the cart icon from my masthead to reduce overcrowding. I kept the search and account buttons so users can always quickly find information important to them.
I reordered my Homepage sections to make Shop the second-highest category. I wanted users to be able to see that they could buy products on Storm Stop before needing to scroll down the page.
I added preparation kits as a shop category for users who are new to the hurricane experience and may not know what preparation items they need to buy. I also mention Storm Stop's product repair service on the landing page to make users aware of it right away.
My Product Repair page stayed largely the same, but I added question mark icons that when tapped display additional information about what users should submit for their damaged products.
After several rounds of feedback from my instructor and fellow cohort, I finalized the wireframes and prototypes for Storm Stop.
I decided to add a location feature to Storm Stop to make sure users could get the most applicable storm information for where they are. When users come to the site, they're prompted to enable their location to see forecasts for the area they are currently in. The rotating carousel and text below will show forecast information based on where the user is located. If a user chooses to not enable their location or would like to see a forecast for an area they aren't currently in, they can manually change their location by tapping the current location on either the homepage or in the navigation menu and entering a zip code. If users don't want to enter a location at all, general forecast information for the biggest hurricane threat will be shown.
The homepage layout remains the same as previous iterations, with plenty of contextual navigation to encourage users to explore each area. Storm Stop aims to communicate a feeling of reassurance and support with the UX writing throughout.
I decided to go with the classic hamburger menu for Storm Stop's navigation because of its recognizability. I also decided to have a quick-access search and account button always present in the masthead so users can quickly find information important to them.
In the navigation menu, I have all five primary navigation sections displayed and allow users the option of expanding each section to reveal the secondary navigation. I also give users the option of changing their location from the navigation menu so they can have a personalized experience from any page of the site. I chose to include buttons to items in the user's cart and general help with the site. Finally, I created a navigation flow to allow users to easily and quickly get to whichever section of the site they want. This also gives users a good overview of what each section of the site offers.
In addition to the navigation menu, users are able to see where they are and get to previous pages with breadcrumb navigation links on each page of the site.
The layout of the Shop landing page is the same as previous iterations, with frequent contextual navigation allowing users to move throughout the store easily. The carousel at the top of the page still shows featured products and deals.
Because the compare feature was enjoyed so much during my competitive benchmarking of the Red Cross Store, I decided to create one for Storm Stop. Users are able to see pictures, prices, and average ratings for each product on the product category pages. They can then add the product quickly to their cart, click into the product page for more detailed information, or compare the product to another item.
When users compare two products, they're able to see the most important information side-by-side for both items. Users can then either choose to add an item to their cart when they're finished or go back to the previous page using the breadcrumbs at the top.
I started off by ordering the most important product information first to make sure users see it before needing to scroll down. Users are able to swipe or click through several pictures or videos of the product. They can select a quantity by either tapping the '+' and '-' icons or tapping the text box to bring up the keyboard. Users can add the product to their cart or their wishlist to save for later with the buttons below.
As they continue to scroll down the page, users can find detailed information about the product. They can also see if the product qualifies for Storm Stop's repair program.
Users who are new to hurricane preparation can find additional items related to the product in the Related Items section. Finally, users can see what other customers thought about the product in the Customer Reviews section. They are encouraged to write their own review with a button underneath the reviews.
Because recovering from a hurricane is so stressful and upsetting, Storm Stop wants to make the process as easy as possible by offering repairs on any applicable products purchased from Storm Stop that were damaged during a storm. This also encourages users to buy their preparation items from Storm Stop.
I aim to make the UX writing on the Product Repair page reassuring and helpful. To make submitting a request easy for both the user and the product repair team, users must be signed in to their account to use the service. If a user isn't signed in, they will be prompted to sign in to their account with a CTA button on the product repair screen.
Once the user is signed into their account, they can select the damaged product from a drop-down list of applicable products they've purchased in the past. The rest of the Product Repair page remains largely the same as previous iterations. To account for product damage that can't be captured by pictures, I decided to not make submitting pictures required. Users can submit a picture by tapping the '+' icon. After the picture is uploaded, another '+' icon will appear, indicating that more pictures can be uploaded.
If users are unsure of what to write in the text box or what types of pictures to upload, tapping on the question mark icon next to each section will bring up tips for what information the user should include.
Once the user is finished, they can submit their request to Storm Stop with the button below.
After completing my final wireframes and prototypes, this project ended and I had to move on to other projects. If I were to continue working on this project, I would:
"Storm Stop is not your run-of-the-mill 'product line site,' but it's a terrific subject for this cumulative project, and very well Ix-designed. In fact, it's one of the most thorough, accomplished, and complete projects I've seen in five quarters teaching this class."
- Larry Sisson, Interaction Design Instructor at the School of Visual Concepts
Because this was the first UX Design project I worked on, I learned a lot about going through the design process. I realized the importance of narrowing my design scope. At the beginning of this project, I had grandiose plans of wireframing and creating the entire site. However, as I dove deeper into the process, I realized how much work the design process really is and how important it is to clearly define exactly what you're trying to accomplish. Lastly, I developed a love for wireframing and Interaction Design, and look forward to using my new skills to help make life easier for people.
