Envelope Ink helps you find the perfect envelope for your specific needs. They make the process of finding your desired envelope quick, easy, and enjoyable.
Envelope Ink needed a complete brand and web revamp. While working at Momentum, we out-sourced the branding and I worked on the UI/UX design. The goal was to simplify the process of shopping for an envelope. I wanted the user to quickly be able to find their envelope by providing them multiple categories to search within which are color, size, style, and usage. The second most important experience for the user was the envelope configuration process which is where the user chooses quantity and print settings.
- Strategy
- Wireframing
- UI/UX Design
Project Goal
- Improve the branding and shopping experience.
Wireframes
First Home Page Concept
The first concept I designed for the home page I focused on allowing shoppers to quickly find the specific envelope they were looking for. I reduced the amount of steps between the shopper landing on the home page to them navigating to the checkout page. To do this I created four categories to shop by and included them as the main navigation. In the hero I related the content to the categories creating a slider that would rotate through them. If the shopper moved on below they would find the most popular styles of envelopes.
Second Home Page Concept
As a team, at Momentum, we took a look at the design and critiqued it. We decided to replace the navigation and slider with the four categories in plain view. This would allow the shopper to have all the information in front of them right away to make a quicker decision.
We also changed the color usage of the main hero section to be softer on the eye. Including the icons and unique colors for each category allows the shopper to create connections quicker.
Third Home Page Concept
This is about the time when the client had thoughts about the branding being too playful. You can see this in our attempt to satisfy the client by changing the colors to more muted colors. From this point on the UX stayed the exact same. The only thing that would be changed are aesthetics.
Final Home Page Design
Once the client came to us with the new branding I went in and adjusted the design to fit mostly changing colors. I enjoyed both brands but to be honest, I thought the newer branding was a better fit for them. It screamed maturity and carried an air of professionalism.
Product Listing
The product listing page was an interesting beast to tame. I took a look at competitors to see how they executed this specific experience. I decided that the best way to display the products was in a slider where the shopper could see multiple products and their variations as well.
Of course, I designed the product sorting and filtering based upon Magento and designed them to fit the feel of the rest of the design.
Product Details
When the shopper found the product they were searching for they would land on this page, the product details. This page was also loosely based on how Magento works. The only, and most important, section of this page that was custom was the product configuration which we had to create custom.
The shopper has to decide on multiple details such as envelope color, size, and printing options. I designed it into separate steps exposing the shopper to a limited amount of info at a time. Including a progress bar at the bottom would keep the user oriented and updated on how much they have left to complete keeping them out of the dark.
