sunbeam project
UX · Web Design · Figma · Webflow · Prototyping · Wireframes
Project overview
My fellow e-design interns at Newell Brands were tasked to create two products for Sunbeam (a subsidiary of Newell) that would attract Gen Z. We had two weeks to deliver a presentation with the finished products, a UX product assessment, and a website. The goal of the sprint was to let us experience a scrum lifecycle of a Newell Brands product.
my contributions
My role was to create the marketing website for the teams products. The website needed to be targeted to Gen Z, just like the products were, but also welcome the older generations as well. The website prototype was made in Webflow, using elements made in Figma and Adobe Dimensions. I also had an opportunity to teach my manager, Marcus, on how to use Figma.
company
Newell Brands - Sunbeam (Subsidiary of Newell)
date/time range
2021 / 2 Week Sprint
team
Marcus (Manager)
Dean (UX research intern)
Nick (Industrial design intern)
Sanae (Industrial design intern)
Dean (UX research intern)
Nick (Industrial design intern)
Sanae (Industrial design intern)
product brainstorm
On the first day, all the interns and their managers met up for a group brainstorm to decide the products. We collected some research and ideas on a Miro board. What the research showed was that people in Gen Z are often very stressed and likes to buy products that help them relax.
We decided on two products, the Soothe and the Sanctuary. Nick was responsible for designing the Soothe, which were little rock-shaped devices that provided heat and vibrations. They were to be put on the body to relieve tension and pain. Sanae was responsible for the Sanctuary, which was a large headset that had different modes. It would be placed on the neck and the user would be able to connect to bluetooth for sound. It also has two modes, focus and relax.
We decided on two products, the Soothe and the Sanctuary. Nick was responsible for designing the Soothe, which were little rock-shaped devices that provided heat and vibrations. They were to be put on the body to relieve tension and pain. Sanae was responsible for the Sanctuary, which was a large headset that had different modes. It would be placed on the neck and the user would be able to connect to bluetooth for sound. It also has two modes, focus and relax.
WIREFRAMES AND PROTOTYPES
When creating this site, I wanted to differentiate the products from the other products from Sunbeam because the target audience is different. That is why the website was a microsite instead of a page within Sunbeam. Each product had their own separate tab that had the same sections, highlighting features and specs.
The wireframes were created in Figma and the prototype was made in Webflow. I used Webflow because I wanted to be able to create animations and working buttons.
The wireframes were created in Figma and the prototype was made in Webflow. I used Webflow because I wanted to be able to create animations and working buttons.
Product Specs
An important section on the website was the product specs that highlighted the different features. Since these products were brand new, there had to be a part that explained the different components. I created these diagrams on Figma that detail the Soothe and Sanctuary for new users. There were also hero shots of the products in action to help explain the usage and placement of the product. The photo below is an example of the Sanctuary in use made in Photoshop.
Call To action
Since our products were fake and not actually being developed, the website needed a closing section that tied everything together. The last section is a call to action to preorder for the product. It was a nice way to tie everything together. The graphic was made in Figma and the form was made on Webflow. It is completely working and the emails go to our Webflow database.
animations
One of the goals of the website was to have contemporary sections compared to the original Sunbeam website. I was already working on some animations for my A11y project (on the next page), so I was able to integrate an "animate on scroll" feature. I wanted the website to look more modern in order to capture a younger audience. I found LottieFiles and downloaded and customized an animation that I liked. I think this small animation was able to capture the tone I wanted, but not being too drastically different from the original Sunbeam site.
Animate on Scroll
Sunbeam soothe and sanctuary
Click to View Project
Sunbeam soothe and sanctuary
Group Project at Newell Brands
This project was a group project for the interns at Newell Brands. It was made up of 2 industrial designers, 1 user experience intern, and 1 E-design intern (me). We had a week to create two products from scratch and create a website for it under the Sunbeam brand. The two industrial designers each created a product, the Sanctuary on the left and the Soothe on the right. Then the user experience intern in the group did some testing with each of the design concepts and I designed the website
The website (shown on the right) was comprised of lots of different aspects. It featured, animate on scroll, call to action on the bottom, scroll to top button, separate tabs for each product, and iconography.
The photos below are some process photos done in Figma.
