UXO720 - Week 4 - Sketching and Wireframing

February 20, 2022

This week we focused on sketching, wireframing, and explored gamification purpose and methods. The focus on gamification was of particular interest as the lessons reframed how I view gamification. I've always considered gamification as a, mostly, badly executed points or badge system that offered very little in incentives for the users. After going through the session and exploring some of the design concepts, I realized that gamification can provide a real value to users. For example, in our MIV prototype we are focused on gamifying the cost savings of our app. The aim will be for users to earn eco-friendly points and badges that they can use to redeem real savings on their orders and also apply them to green certification status for their company.

With this in mind, I did a Know Your Audience activity that would help me think through and re-affirm who my target user is for this experience:

Know Your Audience

The target consumer is a procurement manager or office are a mid-sized company.

• What Motivates Them?

  • This consumer is largely convenience based, looking for a system or ordering process that is easy and saves them time and money.

  • Story matters if they are reselling or providing the product as part of their customer experience.

• What's meaningful to them?

  • Trust with their vendors

  • Time saving

• What keeps them following through on their intentions?

  • Their primary role is to procure these products

  • Desire to optimize ordering so they can focus on other key business tasks

What are we gamifying?

Reviewing the goals of MIV and their impact tracking system, I think exploring the idea of gamifying the ordering process with a direct tie to savings and impact. We can experiment with different cost savings based on the impact level you have, additional discounts can be applied to later orders, or larger orders. Essentially the larger the positive environmental impact of your orders, the more you save. We can also build in a badge system that highlights the positive impact the business is having and they can share that on their own websites and social media channels.

Map the Journey

Note: When mapping out the journey of the impact tracker, I started by mapping the checkout process. I wanted to have a better understanding of where in the process we should highlight the impact tracker and where it fits within the ordering process.

E-Commerce gets very complex very quickly, this is just the product details to checkout flow.

One challenge in the journey map is thinking through the various scenarios and how they fit together. Thinking through what options will we present the user with and how that impacts the decision tree. It seems to me that what seems to be a simple feature, can end up being a very complex feature.

Draft user flow of the product impact tracker

Another challenge was mapping out the actual levels, in my case MIV wants their impact tracker to be able to have dynamic calculation of impact levels. Mapping those levels to rewards is a much larger challenge than I have time for in this activity, but will revisit as we refine the process with MIV.

Design Studio

Part of this week included a design studio activity where I took my research from past weeks, sketched six rapid solutions, and iterated on these ideas. This was a good activity that helped me put down a lot of ideas, no matter how crazy they were, knowing that I could just drop them or iterate on them at a later time.

I did find it very challenging to come up with 6 different variations of the idea of a impact tracker so quickly, these were time boxed to 1 minute each:

After finalizing the iterations, I then moved over to Figma to develop a solid wireframe:

Figma wireframe of the product details page.

Wireframe of the impact tracker

Inspiration Review

I was able to get to a place where the concept for the impact tracker was focused on a counter on each product that highlights the amount of plastic saved per order. Based on this I wanted to explore other e-commerce websites that might be doing something similar.

I reviewed three websites that provided similar tools for inspiration on our design:

1. United by Blue - A sustainable clothing company that is focused on reducing plastic waste in our oceans.

2. Leesa - A ethical mattress company that has a mattress donation program.

3. Made Free - An ethical clothing company that focuses on helping women be free from injustice.

United by Blue

United by Blue didn’t have an impact tracker like I am attempting to design, but they did a fantastic job communicating their mission as well as their impact on reducing plastic.

United by Blue has a very clear impact statement on their website.

A great design concept for their trash impact tracker.

Leesa

Leesa has a clear mission statement for their mattress donation program. They focus on helping their consumers understand that through their purchase, they are able to help provide mattresses to those who are in need.

Made Free

Made Free communicates their mission well across their site. But one area that was most interesting was the impact tracking they do on the product page, which is what I am working on with MIV. In this case they have created their own “Days of Freedom” metric which helps communicate how much a product contributes to empowering their women employees.

A clear way of communicating the mission

The Days of Freedom calculator on the product details page.

Action Items

1. Work with MIV on feedback on the wireframe direction

2. Expand or update wireframes based on MIV feedback

---

References

Leesa.com. 2022. Leesa® Best Mattress in a Box, Pillows & More for Better Sleep. [online] Available at: [Accessed 15 February 2022].

MADE FREE®. 2022. MADE FREE. [online] Available at: [Accessed 15 February 2022].

Unitedbyblue.com. 2022. United By Blue, Sustainable Outdoor Apparel and Accessories. [online] Available at: [Accessed 15 February 2022].