Packed with Purpose
Increasing visibility of a corporate gifting e-commerce site's social impact.
15 Minute Read
Project Time Frame: 2 Weeks
Skills: Desktop Design, UI/UX Design, User Testing
Tools: Sketch, InVision
Deliverables: Moodboards/Style Tiles, Prototype
Packed with Purpose sells corporate gift boxes sourced from socially impactful businesses. CEO Leeat explains that most of her major clients learn about PwP through word-of-mouth. However, recent news publicity has increased the awareness of socially impactful corporate gifting, and she needs a visual redesign to better accommodate increasing direct and organic traffic.
For this project, she asked for a desktop e-commerce site that feels like a premium B2B marketing site and communicated clearly each product’s direct social impact. After aligning with Leeatt on a design direction, I built out high-fidelity screens for five key pages and conducted user tests to confirm that the design was successful.
I first took note of UX and UI issues with the site. The major UX issue was that navigation by specific social causes was difficult or non-existent. Despite the main value proposition, there weren’t many features supporting it.
On the UI side, the site did not feel quite luxury or premium due to the overly condensed blocks of text, lack of darker colors, and evenly lit photography. Also, most of the social impact message was delivered by lengthy text blocks rather than visually.
Facilitating Alignment on Project Goals
During the kickoff meeting, I asked about her traffic source. She stated that direct search was the primary source due to word-of-mouth marketing but recent publicity in corporate gifting has caused organic search to increase. She also noted a below average bounce rate and a two minutes average session time. I interpreted these as the result of word-of-mouth marketing where users come to the site with prior knowledge about PwP. However, with increasing organic traffic, these metrics might dip significantly if some of the UI/UX issues go unresolved.
In onboarding material, Leeatt provided six different user personas. To help align us on the site's users, I conducted a quick activity to narrow the list down. I asked her to list the most likely and second-most likely to engage with her site from five different angles.
Based on these insights, we narrowed it down to the Marketing Manager and the CEO, a rather unexpected response compared the other options but given her word-of-mouth strategy, made sense.
We concluded that the site needed to deliver information quickly like a B2B marketing page, improve visual communication, and increase site discoverability by social impact causes.
Establishing Context for Exploration
Deliverables: Competitive Analyses, Design Principles
To understand the space, I first looked at direct competitors to get an idea of visuals used in premium gifting. I looked up gifting services with social impact messages to see how they delivered the message. All made good use of icons, narratives, and testimonials.
For more UI inspiration, I analyzed out-of-category sites that straddled appearing as B2B and B2C. I looked specifically for elegance blended with professionalism.
Most direct competitors were focused on showcasing products and encouraging browsing. The out-of-category sites had more straightforward designs, variations in layout and content for visual flair, and conclude with clear call-to-action. After careful discussion with Leeatt on blending the two approaches, I arrived at three design principles for the entire project.
The design should emphasize the personality of the gift makers and the thoughtfulness of the curator.
The site should be sleek and modern, communicating to users that the service is top-notch.
The site’s information should feel simple and intuitive by mixing visuals and text.
Deliverables: Moodboards, Style Tiles
I explored three distinct visual directions by emphasizing different aspects of premium branding.
White space, dashes of saturated colors, and larger tiles express a modern e-commerce experience. The header typography is a playful slab serif. The subhead and body copy is a warm, rounded sans-serif.
Simple white space, black text, high-contrast photography communicate a minimalist luxury brand. The green and cream highlights add some levity to the design and prevent it from feeling too cold.
The dark navy and seashell beige offer an interesting contrast of art and corporate aesthetics. Each element is in careful balance with surrounding elements.
High Fidelity Screens
Deliverables: High Fidelity Screens
During kickoff, Leeatt was open to exploring different color palettes. After looking at the proposed directions, she liked Natural Shell, but instead of navy blue, she wanted to stick with a purple similar to her current brand. She also wanted the warm beige to go into a gold range. As such, I scoped out five key screens and created high-fidelity mocks.
Landing Page - Hero Image
The original hero image felt ambiguous in setting and purpose. I chose a darker photograph that combined natural and professional aesthetics. For the message, I selected keywords like “client,” “business,” and “social impact” to reinforce key aspects of Packed with Purpose.
Landing Page - Social Impact Message
Direct competitors used specific narratives to effectively communicate social impact. I wanted to showcase specific examples of purposeful purveyors. I originally started out with a tab pattern, where the icons changed the content underneath. However, quick user feedback showed this concept to be too abstract and underused. I removed the interactive tabs and focused on a carousel of purveyor stories, with one open on default.
Landing Page - CTA
Some unresolved questions I had with the redesign was the effectiveness of each CTA. I placed three different CTAs for calls, emails, and chat. Testing and data analytics would be needed to determine user preference or if one should be prioritized over another.
I spotlighted a single product in order to showcase the new impact icons. While beyond the scope of this project, I proposed as a future change to make the impact icons clickable links to a page showing all products supporting that cause. That would help resolve the UX navigation issues.
I focused on removing the large text block and making the page feel more visual. I gave sections more distinct presentation and breathing room. The final design has a nice sense of rhythm and distinct areas of visual interest. Information was presented in bite-sized chunks that felt easily digestible.
Purposeful Purveyors Page
This page underwent the least amount of change from the original. I added a hero image and improved the legibility of the preview text underneath each purveyor.
Single Purveyor Page
The original lacked content and needed more thought out information. I made use of testimonials to better communicate the social impact. To help with the mentioned UX discoverability issues, I ended it with a product suggestion section as a natural way to drive traffic back into relevant products.
Deliverables: High Fidelity Prototype
I conducted ten-minute user tests with five working professionals using an InVision prototype. Color and layout elicited positive feedback. The added impact icons significantly helped users understand the purpose of each gift box and the site as a whole. They expressed interest in clicking on each icon to see all products supporting that cause, a suggestion I anticipated.
In a final meeting with Leeatt, she gave positive feedback on many of the changes such as overall layout and design, saying that it felt clean, professional, and warm. She approved of the increased visualization through photography and icons to better communicate Packed with Purpose’s message.
Many of the pages and functionality were out of the scope due to the short timeframe. The cart, product customization, and product filtering are all worth considering. The product customization aspect would be an interesting issue that would require additional UX research to understand user expectations for co-branding.