Maker Source

Maker Source is an online platform for new and experienced makers to learn how to build DIY projects, and acquire supplies seamlessly and reliably. This project is an experience design proposal for The Source, done over the course of 5 weeks.

The Source

The Source is a large retailer of consumer electronics, and the Canadian spin-off of RadioShack.

Business Problem

The Source is losing sales in a highly competitive consumer electronics retail space because of its inability to compete with larger retailers that offer “big box” formats, everyday low pricing, and advanced logistic systems.

Opportunity

To differentiate itself, we proposed a radical shift of their primary audience from general electronics consumers to the emerging market of makers. We realized that The Source, with its hundreds of physical stores across the nation, can act as a supplier of electronics components that the makers need.

Need for a platform

For The Source to appeal to this market, they need to provide value beyond just a retail offering. Therefore, we envisioned a platform that embodies the open-source nature of sharing and learning by letting the makers submit their own projects as well as enabling them to engage in conversations with each other.

How the platform would work between the three stakeholders.

Understanding the audience

The three segments/stages of maker, as identified by Dale Dougherty, the founder of Maker Faire. Our proposal focuses on the first two segments.

To inform our design decisions for the user interface, we created three personas: Alex (child zero-to-maker), Robert (senior zero-to-maker) and Tyler (maker-to-maker). By analyzing their needs, desires and goals, we mapped out their touchpoints in relation to the product.

Our personas, covering the spectrums of age and experience.
A customer journey map for Alex, a new maker.

Interaction design

Exploration sketches I did for the website.

Based on the touchpoints identified, we settled on four core experiences in the platform that address the needs of our audience: discovery, project view, authoring and profile. I helped create the mocks in Sketch while following a brand style guide designed by my teammate.

Prototypes

To help my team visualize microinteractions and the end-to-end flows of our users, I coded two prototypes using Framer. Framer allowed us to test input features like the interactive video scruber, which was not possible with the other prototyping tools at the time.

View Zero Prototype View Maker Prototype
Note: These prototypes are quite large, so I'd suggest not viewing them on data connection.

Discovery

Design goal: Eliminate the entry barrier for new and prospective makers.

We wanted the discovery experience to be very minimal to entice the audience’s curiosity with beautiful imagery. We also introduced a “magnetizing” microinteraction for each project that repels all the projects on the screen and attracts only the related ones. This lets the audience with limited maker knowledge to browse by their own intuition and interests.

The “explore similar” animation, inspired by the motion of magnets.

Project View

Design goal: To remove the audience’s friction on getting started with building a project.

By having one step shown at a time, we made it easy for viewers to follow along with the video. In addition, we have the purchasing process integrated right into flow, letting the user get the required components for the project quickly and reliably from The Source.

An integrated purchasing flow.

Authoring

Design goal: Reduce the friction for experienced makers to document their process on the platform.

We let makers easily create digestible step-by-step instructions with an optional accompanying video. The WYSIWYG editor allows them to focus on documenting their project quickly without worrying about the presentation later.

Profile

Design goal: Give the user a sense of progression to keep them engaged.

Makers can mark a project as completed to add it to their profile. Over time, they will be able to see a progress of their created and recreated projects with the skills they’ve learned for each project. We used a skill points system here to show measurable growth for each individual.

A maker completing a project and viewing her progress on her profile page.

Value and implications

A summary of the value the platform provides for makers and The Source.

Our proposal can serve as a model for retailers to embrace the open and growing ecosystem of makers. Instead of just selling and marketing products, retailers can look to provide value for customers by becoming a facilitator of knowledge and learning through a platform for sharing ideas.

Retrospective

This project allowed me to practice user-centered design throughout the process. By considering extreme-case personas (a child and a senior), we simplifed the UI by making it less utilitarian and more delightful. Furthermore, we used the customer journey map as a framework to define the main tasks and reject unnecessary features, leading to a focused overall experience.

Compass Listing Recommendations

interaction design

Intensive Care First Aid

freelance brand + web design

Lithium Community

interaction design

Quietly Story & Analytics

design + front-end development

Maker Source

experience design / academic

Food Repurposing Platform

experience design / academic