MAKING MOTO MAKER

---

Creating personas for Moto Maker involved developing comprehensive profiles to deeply understand and represent the target audience. These personas captured essential details such as demographics, behaviors, goals, and challenges, ensuring the design remained grounded in the real needs of users.

The personas were instrumental in highlighting the diversity of users, from those passionate about customization and self-expression to those seeking the latest technology as an extension of their personality. This approach allowed the team to anticipate user expectations, preferences, and potential pain points, ensuring that the platform catered to various customer motivations, whether it was personal creativity, functionality, or style.

By centering the design process around these personas, the team ensured that every decision—from interface design to feature prioritization—was aligned with the user's perspective, delivering an experience that resonated across a wide spectrum of customers.

Techie | Hipster | First Adopter | Fashion-Forward

Competitive analysis involved studying over 30 companies across various industries that utilized configurators from automotive to Retail experiences like Nike. The goal of this was to map out features, common functionality, and key content areas to define a content strategy for Moto Maker.  

We identified Three Main Common Content Areas in Configurators: 

1. View Port: Housing all the images and image manipulation tools (zoom, pan, rotate, etc)  

2. Selection Panel: Housed all the functionality to customize and purchase a device

3. Header: Housed items like premade templates, saved designs, and allowed for additional navigation into and out of the experience.

Technology & Platform Analysis: involved a deep-dive to understand the best tech stack to build this experience on that would allow for various screen sizes and connectivity types from: no-connectivity, limited, and high speed connection and high-performance/responsiveness. 

This was important when designing edge cases with high-image quality to help with the user with the perception of time when items take longer to load. Since design worked in agile fashion we were able to work with development team to determine best loading scenarios that would create the best responsiveness by either loading asynchronously or synchronously at the page or component level.  

View Port Controls and Enhances Image Manipulation: We looked at everything from advanced features like 3D Web Views from WebGL and other image manipulation tools giving the user the best control while providing the responsiveness and speed needed. The decision to was to go with fixed views and permutations that would allow for a 360 spin without the load and poor quality of standard 3D tools. Also took a look at various load and rendering engines out of Keyshot that would allow for seamless transfer from our talented Industrial Designers and identified a workflow from their Prod environment in Moto Maker without the use of external rendering agency. 

Heuristic Analysis: Allowed us to take assessment of Version 2.0 (post enhancements) to see if there were any items that we wanted to keep and areas of enhancement or improvement. 

Co-Branding: Identified areas where we can brand and co-brand this experience for special promotions, materials, events, and movie launches (star wars) extending the reach of the Moto Maker experience and a great PR opportunity.

Competitive Analysis | Technology & platform Analysis | Heuristic Analysis | Feature Mapping | Platform Compatibility | Scalability Assessment | Co-Branding | Image Manipulation

Mapping the customer journey visualizes every touchpoint a user interacts with, highlighting pain points and opportunities. This holistic view helps refine the product’s flow, ensuring a seamless and satisfying user experience.

1. Retail Experience: Enter Store  > Approach Kiosk > Learn about Device (PDP) > Configure Device > Purchase > Upsell Flow > Carrier Plan Flow > Porting Info > SIM Setup > Purchase Complete > Order Sent to Factory based on Country > Built > Phone Activated at Factory > Sent > Last Mile Status: Shipped, IN-Transit, Delivered Status > Unboxing and Set Up: Google Account Activation > Log In or New User > Phone Authenticated >  Sign in > Transfers Data.

2. Online Experience:  Learn about Device (PDP) > Configure Device | Purchase > Upsell Flow > Carrier Plan Flow > Porting Info > SIM Setup > Purchase Complete > Order Sent to Factory based on Country > Built > Phone Activated at Factory > Sent > Last Mile Status: Shipped, In-Transit, Delivered Status > Unboxing and Set Up: Google Account Activation > Log In or New User > Phone Authenticated >  Sign in > Transfers Data.

Defining the Minimum Viable Product (MVP) involved us to take all the research findings and distill the experience down to one that will meet the business and design objectives in the simplest way moving forward while without loosing or users engagement. 

The key elements needed for the Moto Maker MVP redesign were: 

1. PDP

2. Configurator (Viewport, Selection Panel, and Header)

3. Enhanced product renders limited to 9 views. 

MVP | PDP | Configurator (Viewport, Selection Panel, Header) | 9 Enhanced Renders for 360

Prototyping allowed up to test various interaction models allowing teams to test and select an option based on weighted system when going through the below concept flows. Selected concepts was based on these conditions: (1) Choosing the right product (2) Ease of use (3) Fun Factor (4) Confidence in final design (5) Confidence in purchase since Direct to Consumer vs In Store  (6) Checkout process (7) Cost to Maintain (8) Scalability. 

Tested Three Versions:

1. Story Telling & Configuration All In One:

This was a dynamic PDP.that took the user down a journey allowing them to learn about the device as they configured it and before they knew it they built a phone taking the presure off of configuration and abandonment scenarios by distracting with other information as oppose to just focusing on design which can be intimidating for some. The phone would stay static and as the user scrolled it would take them on journey in the background via parallax from device selection  > Customization > Upsell > Purchase > Share > to Check Out 

2. PDP > Templated:

This experience starts with a traditional PDP and take the user to "build now" experience that contains an array of images in a montage of design options to start the process in a deductive way. There will also be start from scratch for those that prefer an additive approach and not scared to design their own. 

3. Plane Jane (Winner). 

This experience had a traditional PDP and take the user to build now experience that contained a blank design you can from scratch all within a standard template but with the device always insight. No scrolling up and down as you go through features.Design is simple and focuses on the product while emphasizing the UI elements and controls. 

Please Note: There is known paradox of choice (great book if you have the chance to read it) that occurs with modern western culture leading to paralysis in decision making. By having a template to start out with we can eliminate that burden and make the user one step closer to purchase.

Three Different Designs | IXD | Prototyping | Testing with Customers | Overall Cost

Interaction design stage focused on creating intuitive and meaningful user interactions, from navigation to selection, to purchase, and beyond,  This step ensures a smooth, engaging, and efficient experience across all touchpoint at the macro and micro interaction level and helped create a template were other devices can easily be ported into this experience. 

Image Manipulation & Control | Selection Panel | Financing Flow | New vs Existing Customer Flow | Authenticated User Flow | Google Preloaded Flow | Device Credential Flow | Activation Flow (SIM, Phone Number, etc) | Upsell Flow | Cart Flow | Warranty Flow | 

User Interface (UI) design established the presentation layer and overall look and feel across various elements and controls of the UI. 

Button Styles | Type | Color | Form Fields | Icons | Co-Branding | Loading indicators | Motion

A design system was created to ensure continuity within the experience and reduce rework across the Moto Maker experience as it expanded from a Moto X, to smart watches, and eventually Moto Mods.

IXD Patterns | UI Style Guide | Images Views & Render Angels | Content Strategy | Co-Branding | Logos | Third-Party Promos