PH!

L

client: Packed with Purpose

project type: UI/UX

project length: 3 weeks

tools: Sketch, InVision

medium: Web

High Impact B2B Gifting

> A Brief Overview

Packed with Purpose (PwP) is a design project I received during my time at Designation. Made up of three sprints, each sprint lasted one week. I worked on a team of three designers to conceptualize, design, and present multiple visual solutions.

Our task was to redesign the PwP website to stress their brand value. While the current site incorporates many PwP branding elements, we focused on attracting a corporate business audience. The founder, Leeatt, asked us to focus on delivering a sense of elegance and minimalism without losing the focus on gifting with impact.

> Project Deliverables

The following is a list of my final deliverables for this project. These files may be useful for you to get a high-resolution look at my designs. They are also what I have shared with our client at the end of the project.

1.

Moodboards. Inspiration for the creation of style tiles.

2.

Style tiles. Initial design explorations to pitch to the client.

3.

Invision prototypes. Click-thru demos of our designs for user testing and client feedback.

4.

Presentation decks. Communication between our team and the client. Showcases design progress and facilitates discussion.

5.

High-fidelity designs. Every iteration of our designs from initial mockups to final drafts.

6.

Style guide. A rulebook recommending how our designs may be used after handoff.

7.

UI kit. A collection of every component in our designs. Includes buttons, text boxes, illustrations, etc.

> Original Design

(Click on thumbnails to view full-resolution images.)

To redesign the website, our team had to reach the following goals, seen below. More on these later, as you will see how these goals will translate into a meaningful design system that our team utilized for the duration of this project.

1.

Focus on
B2B gifting

2.

Highlight
the impact

of PwP

3.

Bring in more of a human element in the design

4.

Give the impression
of a premium, quality product

1|

Research
& Style
Exploration

> Project Onboarding

Our team received the following materials from Leeatt:

1.

The current product state, including branding details and elements associated with PwP

2.

Quantitative data associated with the impact and influence of PwP

3.

Current brand guidelines, both print and digital specifications

4.

Current brand elements including logos and photography

5.

Pitch presentations and speeches

6.

Competitive research and analysis of the domain

7.

Lists of testimonials from current users

8.

List of six personas and qualities of each

After further analysis of the onboarding materials, my team developed questions and concerns to present to Leeatt for the kickoff meeting. Our first step was to learn about the current user personas associated with PwP, and to analyze their competitive space. I thought this could be a good start to learning about the client’s vision.

We introduced an activity to narrow down and focus on one or two personas. This information directed us to the very purpose of this project. We asked Leeatt to assume how a number of personas, defined by personality and job roles, interact with PwP.

> The Six Personas

Molly

Marketing
Manager

“I’m looking to make a splash and showcase my ideas to clients and management.”



Shawn

Sales
Director

“I’m looking to improve relationships with key, valuable clients.”




Olivia

Office
Manager

“I’m looking to impress the higher-ups and prove that I’m capable of more responsibility.”



Charlie

CEO

“I’m looking for something new that will uphold my reputation and make people see a different side of me.”



Sally

Sustainability/
SRC Executive

“I’m looking for practical ideas to advance the social impact missions of the company.”


Ally

Executive
Assistant

“I’m looking for reliable services that can represent the company well to clients.”



[Persona] is most likely to  (_______)  Packed with Purpose.

1.

Discover

2.

Try

3.

Enjoy

4.

Recommend

5.

Rave About

> Insights from Persona Activity

We agreed that the persona activity gained us valuable information regarding which personas to focus on in our designs. The following, listed below, are who made the cut.

Molly, Marketing Manager

Molly likes to explore opportunities about products and their impact. She intends to do research to learn about everything a gifting service has to offer. The idea of impact helps her feel good about herself along with the client she is gifting to.

Shawn, Sales Director

Shawn wants to find products to help him connect and interact with people. Along with the feel-good aspect of the gifting service, Shawn wants to brag about the gifts he purchases.

Charlie, CEO

Charlie doesn’t have a lot of time to consider options for B2B gifting. But he wants to be more hands-on with his clients, and wants to give gifts with meaning, impact, and sustainability in mind. Charlie prefers to quickly digest the information, and to get to the point of which products to gift.

After reviewing the personas, our team felt much more confident about who we needed to design for, but we believed there were missing pieces to the puzzle. We needed to know more about Leeatt's desires for a redesign, since her site already looked professional and well-designed. To address this issue, we set up a follow-up meeting to have her identify various web and design patterns that piqued her interest.

1.

Leeatt wants the PwP brand to have a simple, minimal aesthetic to highlight the products, purveyors, and purpose of her brand.

2.

Make it clear that PwP focuses on B2B gifting.

3.

We needed to use simple, elegant designs to deliver a sense of quality and luxury.

4.

An inviting layout feels human and authentic, while keeping the design clean and professional.

5.

Large headers and hero images to highlight the level of impact.

6.

Grid-based layouts to organize content, specifically for the products and purveyors pages.

Knowing that Leeatt wanted a simplistic, elegant design and a human quality, I had a clear understanding of what solutions to apply. Eliminating the stylistic ambiguity from our original materials gave me the confidence to explore minimalist and elegant designs for inspiration.

> Analyzing the Competition

Our team started to dive into the competitive space by focusing on a few characteristics. These characteristics include layout/grid, color, typography, iconography, landing pages and photographic style.

Feel free to explore this competitive analysis below using the interactive slider. Click on the images to view at a larger scale.

This interactive slider is not optimized for mobile view. Please follow the link below to check out our team's competitive analysis presentation deck.

View Competitive Analysis

> Layout/Grid

We started with the layout/grid system, and how the organization of content influenced our designs. Since Leeatt wanted a simple but powerful approach to her brand, we looked at designs with a minimalistic influence.

We noticed a “bigger is better” mentality with the imagery and hero images, along with other elements that had the same ideal. We found these particular design elements, combined with the use of grids and minimalist approaches, put the focus on the product or message at hand.
*Images shown at a reduced resolution.

> Layout/Grid (cont.)

We started with the layout/grid system, and how the organization of content influenced our designs. Since Leeatt wanted a simple but powerful approach to her brand, we looked at designs with a minimalistic influence.

We noticed a “bigger is better” mentality with the imagery and hero images, along with other elements that had the same ideal. We found these particular design elements, combined with the use of grids and minimalist approaches, put the focus on the product or message at hand.
*Images shown at a reduced resolution.

> Color

The next element we looked at was color. We discovered that many sites that promote a luxurious, premium product used more neutral tones, and most even lacked a primary color. As a team, we decided this left room for opportunity, as the PwP brand already incorporated a primary color, albeit a muted one. CTAs also came to mind while deciding how to incorporate more color into our designs.

> Typography

Typography and iconography were next. Most of the competition settled on typefaces that looked elegant and premium, while maximizing legibility. There was a lack of boldness in these brands, to help keep the focus on the products and messages. Our team agreed that utilizing similar fonts would be beneficial for the PwP brand, to keep the communication on impact and premium products. The iconography was geometric and simple in their design, again mirroring elegant simplicity.

> Iconography

Typography and iconography were next. Most of the competition settled on typefaces that looked elegant and premium, while maximizing legibility. There was a lack of boldness in these brands, to help keep the focus on the products and messages. Our team agreed that utilizing similar fonts would be beneficial for the PwP brand, to keep the communication on impact and premium products. The iconography was geometric and simple in their design, again mirroring elegant simplicity.

*Images shown at a reduced resolution.

> Iconography (cont.)

Typography and iconography were next. Most of the competition settled on typefaces that looked elegant and premium, while maximizing legibility. There was a lack of boldness in these brands, to help keep the focus on the products and messages. Our team agreed that utilizing similar fonts would be beneficial for the PwP brand, to keep the communication on impact and premium products. The iconography was geometric and simple in their design, again mirroring elegant simplicity.

*Images shown at a reduced resolution.

> Landing Page

We discovered that every landing page left the most room for differentiation. We found that most competitors used large imagery to grab the viewer's attention, stressing the message and showcasing what they’re all about. Individual products were absent, or seldom presented, from the initial message on each landing page. We also spotted the use of animation and microinteractions to help humanize their messages. The landing page was the only page where we saw the bold use of color and imagery.

*Images shown at a reduced resolution.

> Landing Page (cont.)

We discovered that every landing page left the most room for differentiation. We found that most competitors used large imagery to grab the viewer's attention, stressing the message and showcasing what they’re all about. Individual products were absent, or seldom presented, from the initial message on each landing page. We also spotted the use of animation and microinteractions to help humanize their messages. The landing page was the only page where we saw the bold use of color and imagery.

*Images shown at a reduced resolution.

> Photography

The major takeaway our team had from our visual research was the photographic style in each design. Most product-heavy websites utilized staged photography to showcase their products. We knew much of the photography available to us was more natural, to align with Leeatt’s brand vision. The only staging used was very simple and minimal, showcasing the items associated with a product.

> Creating a Design System for PwP

Before our team diverged to explore styles, we developed design principles to serve as the foundation of our individual design decisions and create cohesion across all of our designs. Our team conceived these principles as a culmination of our research findings and the client’s values and project goals.

Human Connection

The design must reflect the humanity involved from end to end. Whether it’s the purveyor, purchaser, or end user, the human element involved must be recognized.

> Insight

We learned that to maximize the effectiveness of her message of impact, sustainability and humanistic appeal had to be applied to our designs.


Delightful Elegance

Just like the attention to detail put into the creation of the product, the design needs to match that standard of quality. The design also must invoke a feeling of joy.

> Insight

Leeatt wanted the products she features on PwP to be considered premium, luxurious and exclusive. We had to think about how our designs could mirror that sense of elegance.

Professional Reliability

The design must go above and beyond what the user expects. The design must create a one-to-one relationship with the user and guide them through their experience.

> Insight

Our team had to consider our audience. To achieve the B2B aspect of the project, we had to design our interfaces to attract professionals, executives, and businesses.

My personal exploration of style led me on a guided tour of sorts. Leeatt is the kind of client that knows exactly what she wants and how she wants it, but gave us the freedom to explore other possibilities. That level of open-mindedness gave me courage to diverge and innovate the brand. After discovering what style directions were possible for PwP, the next step was to translate our ideas and inspiration into three viable design solutions. These style tiles existed to determine Leeatt’s reaction towards my style directions and discuss changes based on her vision.

> Style Exploration

Below you will see the three design directions that I explored to present to Leeatt.(Click on thumbnails to view full-resolution images.)

Style Tile #1 - Professional & Premium

The first tile used PwP’s current purple, but as a team, we agreed there was opportunity to explore other colors. The orange color helped the design feel organic and approachable to compliment the premium appeal of the purple. I utilized transparent imagery to maximize the white space around the products to bring focus to each product and package. This also tied into the elegant appeal the brand required. The typography shared similarities to the aesthetic from competitors, and I kept the heading and body fonts light to increase legibility and the sense of elegance.

This design gave a premium, professional appearance. The photography included imagery of smiling, working people to maximize the human quality of the product, while aligning to an elegant, high-quality design.

Style Tile #2 - Professional & Energetic

The second style direction followed a more traditional approach to the idea of professionalism. Using a deep blue, I wanted to convey a sense of trust and comfort. To complement this, I used a light orange to deliver energy and purpose into the design without overwhelming the user.

The typography and iconography helped the design feel friendlier and more approachable to attract a younger audience. Referencing the personas, these design elements aligned best to our persona Molly. The condensed body font packed information into the design without sacrificing readability, while maximizing the use of white space to keep a professional appeal.

Style Tile #3 - Elegant & Luxurious

My third exploration was centered around obvious elegance, luxury, and high quality. I only used gold because other colors distracted from the appeal of the design.

Very thin headers and body fonts, along with the use of transparent imagery, helped maximize white space and achieve the sense of elegance. With nothing to distract the user, the message of impact was clear. The content sat on the background to bring focus to the products and the purpose behind each one.

> Insights regarding Style Tiles

After presenting our progress from sprint one, Leeatt was very pleased with our work. Further validating the design decisions our team agreed upon, Leeatt was especially happy with our design principles.

I was surprised by the insight from both my team and Leeatt that the second tile resembled brands such as Walmart, Blockbuster, and LinkedIn; it felt too “old-school” and didn’t feel modern or elegant enough to communicate PwP brand values. My third tile was the most attractive to Leeatt. She liked the gold but wanted further iteration on the style because there was too much of it.

The insights from our second meeting led me to pursue a combination of my first and third tiles. The next step was to translate my intended design direction into three high-fidelity screens. Before breaking off into our own designs, our team agreed on which screens to focus on: the landing page, purveyors page, and the product collection page.

2|

Hi-Fi
‍Designs &
User Testing

> First Hi-Fi Design Iterations

(Click on snippets to view full-resolution designs.)

> Desireability Testing

The feedback that we most looked forward to receiving was on the application of the product. We wanted to know:

1.

If our initial design decisions aligned with the brand values of PwP.

2.

If our designs aligned to our design principles.

3.

If our designs aligned with Leeatt’s goals for PwP, moving forward.

4.

If there were any weak points in our designs that needed addressing.

> Testing Results

Our team developed quite a bit of surprising insights as a result from testing. We sampled a collection of various professional and executive individuals, including a group of new and current users made up of company presidents, entrepreneurs, marketing managers, and sales professionals.

We generally found that users aligned to our design intentions. They felt more drawn towards the cleaner and minimal design aesthetic that each design tried to achieve. My designs received the most subjective feedback, due to my incorporation of color, the sheer size of the design elements, and divergence from the other two sets of designs by my team.

1.

Users felt the design was overwhelming and “muddy”. I learned that hierarchy was negatively affected and users felt confused about where to look first.

2.

The pagination function received mixed reviews. Some users wanted to see every piece of information at once, while others preferred the breakup of content for readability.

3.

The colors garnered positive responses from users with the level of vibrancy and friendly, approachable nature, and tied in the human connection design principle well.

4.

The card design elements had the most positive feedback. The organization of content supported this user input. It felt natural and unhindered. This design pattern also helped with product and content differentiation, increasing legibility and decreasing visual strain. The fact that the cards felt as if they “popped” off of the page, was a plus.

The responses geared towards the aesthetic of my designs came as no surprise. The large size of almost every element felt disproportionate to users, which threw the hierarchy off. My biggest hurdle for the next design iterations would be to familiarize myself with traditional web patterns to determine the relationship between design elements.

> Second Design Iterations

Using the feedback we have received from users, my second iteration of high-fidelity designs were created. This design iteration is in the form of an InVision prototype. Download the prototype below.

download prototype

> Client Presentation & Leeatt's Thoughts

After applying user feedback to our designs, my team and I brought new iterations of our designs to our second client presentation. Leeatt was impressed with the improvement and growth in our designs since our sprint #1 presentation. She appreciated the consistency between each style and the first iteration of designs, and felt the translation made sense. She also identified other key areas in our designs.

Her individual feedback was great! I felt as if the path ahead was clearer and more direct and was eager to further iterate on the designs.

1.

She felt that the designs aligned with her values for PwP. She liked the clean appearance of all three designs from our team. She also understood the connection between the designs and the design principles we shared with her.

2.

She wanted less gold, as the current usage of the color was overwhelming and didn’t capture the brand well. It felt too luxurious and didn’t represent impact.

3.

The hierarchy problems were less prevalent, but still noticeable.

While Leeatt was sharing her thoughts on my designs, I discovered a few problem areas to address in the next iteration of designs. Her suggestions and concerns also align with what the users have been pointing out in the designs. The following considerations are as follows:

1.

Hierarchy needs adjusting to help create an easier visual flow.

2.

The visuals felt as if they were lacking and the appeal of the design didn’t speak to the delightful elegance design principle. Introducing more elegant design elements and design refinement to address the lack of elegance.

3.

Cut any unnecessary design patterns to clarify message.

4.

Minimize the use of color.

After our client presentation, my creative director, team and myself had a discussion regarding next steps. For my designs, I considered two important areas to focus on.

First, to help with consistency, I needed to consider each design element in regards to how I would communicate their use in a style guide. Secondly, I needed to fix the hierarchy. As one of my biggest areas of struggle, this would involve a more educated approach, using popular design patterns to achieve a more intentional design.

> Sprint #2 Takeaways

As a team, we came together and discussed a few takeaways that applied to all of our designs from user testing and our meeting with Leeatt. We discovered two points of interest. First, the message of impact and sustainability of her brand needed to be more prevalent This would involve increased emphasis on the products and the purveyors. Secondly, we had to think about incorporating more grays and neutrals into the brand without sacrificing the use of purple or gold. This change will help clean up the designs and communicate the purpose of the brand more clearly.

3|

Design
Iterations & Prototyping

> User Testing Session, Round 2

For this round, we developed a partial clickable prototype using the most recent iteration of screens. As a team, we selected more screens to design and assumed a typical user flow. The screens created for the user flow were uploaded to InVision to develop the prototype.

The two user flows we created highlights the two user personas we were designing for; Molly and Charlie. One flow was finding and ordering a product. The second flow involved exploring the purveyors on the site.

This round of user testing should take into account these flows and would help accomplish the following goals for our team:

1.

The flow should be natural and unobtrusive from page to page.

2.

The flow makes sense and nothing along the path of said flow should disrupt the user, and if there was anything in particular, identify disruptions.

3.

Gain further insight on design aesthetics.

We interviewed similar users for this round of testing, including sales professionals, managers, and business specialists. We used questions from our previous testing script to gather more insights on the aesthetic quality of our designs. This was necessary to further refine our designs to better align with Leeatt’s vision.

> Testing Insights

My designs garnered a more positive response with users this time, after applying feedback from both users and colleagues.

1.

Users generally agreed that the imagery felt impactful. This confirms the use of our human connection design principle.

2.

The elegant, decorative design elements were attractive to users and they felt that it complimented the brand very well. This conclusion ties back and connects with the delightful elegance design principle.

3.

The hierarchy problems were less prevalent, but still noticeable.

4.

The layout of the pages, cards and other design elements made the purpose of each page clearer. This helped create more trust within each user, validating the use of professional reliability.

5.

Increasing white space and decreasing the size of the card elements increased the cleanliness and organization of the purveyor and product pages.

We also introduced the use and implementation of microinteractions, even though we lacked time to develop them. In the meantime, we used InVision to simulate what the interaction points would look like. We did this by incorporating pop-up screens, modals, and expandable windows into our designs.

Users understood the purpose of each interaction point and most felt that they were intuitive. We learned through testing that users did not appreciate the use of timed modals that force the user to interact with them, especially if the user did not input anything to receive that information. We kept this feedback in mind for future considerations.

Users appreciated the creativity of certain interactions. For example, I incorporated an expanding window on the purveyor page to prevent the user from leaving the page. This interaction was inspired by Google Images, and users appreciated how intuitive the interaction was, albeit it wasn't a functional interaction yet. In summary, I learned that the simpler the interactions are, the easier it is for users to digest information. Too much flair would distract from the user experience. You can see this interaction in the final high fidelity screens below.

> Third Design Iterations

Our team applied the feedback from our second testing session to a third iteration of our designs, and using those changes, we put together another InVision prototype. Download the second prototype below.

download prototype

> Final Client Presentation & Leeatt's Reactions

Leeatt was very pleased with the results of our designs. The final prototypes made her excited to take these designs into development. I felt confident that my final design closely aligned to what she envisioned for her brand.

The concerns she brought up related to elements that didn’t communicate the idea of impactful giving or purpose. One such element was an elegant pattern introduced into the third iteration of my designs. It turned out to be problematic, for it was distracting from the user experience. It didn’t “feel” like PwP. Leeatt also mentioned that the font choices (which were changed) better aligned towards her goals. The new font choices were similar to her original brand, but had a simpler, more elegant design to them.

4|


Final
Solution

> InVision Prototype

The final prototype below incorporates final feedback from user testing and our final presentation with our client. The prototype takes the user through a typical flow of discovering and ordering a product, as well as exploring purveyors. With future consideration, the user flow will incorporate more fluid transitions from page to page and include delightful interaction points to assist the user through the flow. Download the third prototype below.

download prototype

> Final Design Iterations

(Click on snippets to enlarge designs. Use slider to view all final designs.)

5|


Conclusion

> Future Considerations

Team considerations that we have discussed included a greater emphasis on microinteractions, such as expandable windows to reveal specific content, as seen on the purveyors page. Another successful microinteraction could be a simple elevation animation as a hover state for the card elements. Microinteractions would have created a more delightful user experience for PwP.

We felt that one of our design principles was not used to its full potential: delightful elegance. Based on the feedback we have received, the message of impact and humanistic appeal was clear, as was the aspect of professionalism. Yet, the designs felt too modern, and elegance was lacking. Further iteration and more elegant treatment to elements such as type, iconography, and photography would benefit the design.

The team also agreed that the designs needed another round of user testing. We felt that we missed out on feedback regarding a few other factors that another round could reveal: more screens, microinteraction behaviors, and a full clickable prototype with embedded interactions.

> The Client’s Next Steps

Following our last meeting with Leeatt, we discussed the possibilities of having our designs developed. Her level of engagement in our design process gave us confidence that our designs won’t sit on a shelf.

During our discussion, Leeatt mentioned that she liked different design elements from each of our designs. This would allow her to pick and choose elements from each design and put them into place, possibly disregarding the rules specified in our style guides. However, we assumed that Leeatt understands her brand better than we do, and she will keep our design systems in mind while she plans to implement these designs.

> A Learning Experience

I enjoyed working on this project. One particular influence for the success of our designs was the great amount of detail and direction that Leeatt provided. She took the guesswork out of our design process, and made sure to include as much actionable feedback as possible. Knowing exactly what Leeatt’s wants, needs, and vision was for PwP, helped give us a direct guide towards the final deliverable without any surprises. As a team, we agreed that knowing exactly what the client wants makes our job easier as designers.

This project helped me grow immensely as a designer. Not only was this my first website design, but I also learned one end of the extreme for client work. Leeatt was very thorough and knew exactly what she wanted. This gave me the confidence and knowledge to make design decisions with intention and purpose.

Understanding what hurdles I had to overcome throughout the duration of the project helped me identify areas of improvement in my design process. Back in sprint #1, my biggest struggle was to find inspiration to develop three distinct styles. I had to fall back on traditional design practices to overcome these obstacles from my previous work experience.

One such practice was to sketch out a wireframe of my style tiles. This laid the foundation of the style, showing relationships between elements and how those elements would interact. A foundation of design has proved to be helpful for me as I learn to design with intention and purpose.

6|


Post-Project

> But Wait, There's More!

A few months after the conclusion of the project, Leeatt and her team stayed true to their word and applied our team’s designs to their new website. The new website was released on April 2018.

As expected, we found that Leeatt applied a handful of elements from each of our designs. However, the elements were tailored for each other, and meshed well together to make them work in unison and add to the user experience.

You can see the new design on their website, https://packedwithpurpose.gifts/

> Other Works

A Match Made in Heaven

TYPE: UI/UX

Making character-matching more immersive through a new
mobile experience.

explore

Job Hunting Made Easy

TYPE: UI/UX

Designing a web-based organization tool for bootcamp designers
looking for jobs.

explore

Big Growl Six

TYPE: UI/UX

Designing the look and feel for one of
Michiana's biggest rock & roll festivals.

coming soon!

The  portfolio  of  Philip  D.  Gallam

Let's  connect!

The  portfolio of  Philip  D.  Gallam      ---