Final Project - Declaration & Stories

PART 2: STORIES: Notes from 2-3 interviews with potential users of your UI. What pain points do they have given their current workflows? Why do they engage in those workflows? What is the desired outcome of the workflow?

One pain point users had was not knowing what board size was right for them Another pain point users had was not having enough control over the design of the wooden board, as websites only allowed predesigned options Users noted that they had trouble knowing which components were compatible with their in-progress skateboard build The last main pain point came from users being sometimes overwhelmed with the all the different options on the screen at the first time Users engaged in these workflows with the goal that they could acquire a new skateboard, or skateboard parts Users engaged in these workflows because they had more options than going to a store in person The desired outcome of this workflow is that the user has an easy, yet fulfilling process designing and ordering their skateboard

Shape your story's character as a truthful composite of your interviewees: Who is the character? Name, background, current occupation, time in the occupation, awareness of tech, etc. (only info that's relevant to your task)

Name: Ben Roter

Background: Ben is a 21-year-old skateboard enthusiast who started skating as a teen. He’s built some skateboards in the past, either in skate shops or online, but is always looking to improve his setup. He currently works as part of a digital marketing agency, designing graphics and creating campaigns. As a result, he has some experience with graphic design, and works on his own art in his free time. He has experience working with a host of different design and web technologies. He has worked as a digital marketer for the past 2 years, and has a keen eye for detail.

What are their responsibilities, values, and/or personal goals?

Coming from a design background, Ben holds creativity in high esteem. He keeps note of things he finds interesting or unique. He likes to stay up to date with the current technologies and design trends coming out. As a marketer, Ben values efficiency. Part of his job is getting things done in the best way possible, and he appreciates when others value that. He’s very good at managing multiple different tasks at the same time, and frequently interacts with a diverse range of people. He hopes to create a skateboard that he can ride to work in the mornings, or can practice on at the local skatepark. He wants his board to be unique to him, and express his creativity and personal style. Additionally, he hopes that he can create the board without having to learn another design tool. Story brainstorming: The ultimate goal: Why do users need to interact with your UI?

Users need to interact with my UI in order to create a custom skateboard. They will have the ability to easily choose certain colors, designs, etc. which will give them a truly unique and rewarding experience for creating their board.

Brainstorm 15 possible scenarios (remember, quantity and novelty are more important than feasibility). Include all 15 in your document. (You could include a snapshot of a notebook, post-its, etc., since you'll be brainstorming by hand!)

Color Mixer - User is able to interact with a custom color mixer tool that will allow them to have solid colors or gradients on their deck

Design Tool - Users will be able to draw, create shapes, write text, make lines, etc. on their board which allows them to create a custom design

AR Visualizer - Users will have the ability to see what their design would look like in real life using an AR Visualizer tool

Community Designs - Users will have the ability to submit/copy designs to/from a community showcase that can be seen by all users on the platform

Budget Tool - Users will have access to a budget tool allowing them to create budget friendly designs and compare the prices of different items

Compatibility Tool - As users select different products for their custom board, the UI will update letting users know what other products are compatible with their current build. Users can also compare two items to see if they are compatible.

Design Guide - Users will have the option to follow a step-by-step design guide that will take them through the process of creating their first board. Almost like a tutorial.

Photo Upload - Users will have the option to upload personal photos that can be placed on their board.

3D Model - As users design their board, they will have a 3D Model preview of their board that updates in real time.

Favorite Builds - Users will have the capability to favorite boards and board designs so that they can use them in the future.

Customizable Deck Shapes - Users will have the ability to create custom deck shapes based on their needs.

Deck Sizing Guide - Users will have access to a deck sizing guide that allows them to input their height and weight and receive deck size recommendations.

Matching Clothing Bundle - Users will have the ability to transfer their design to select clothing items and receive a bundle that includes the clothing and their deck.

Design Contests - Users can participate in design contests and win rewards. The best designs will be featured in a showcase and be able to be used by other users.

Collaborative Design - Users will be able to collaborate in real time with others who they invite to a session.

Pick your most compelling story.

Design Tool - Users will be able to draw, create shapes, write text, make lines, etc. on their board which allows them to create a custom design

Imagine some details. Outline them in your document. Where is the user when they are interacting with their UI? Are there any constraints in this space that need to be noted? (Is the space small? Is the character in front of customers, investors, or children? Is the room dark? etc.) Why might the space be relevant for users of your interface?

As an e-commerce/design site, users are most likely to be at their place of residence while interacting with the UI. The most common constraint for at-home customers would be other distractions that cause them to step away from the UI. For this reason, it’s important that designs are automatically saved. We can assume users will have access to a stable network connection. Consumers are most likely to be in a variety of lighting situations depending on their home.

When is the user interacting with your UI? Is the character in a hurry? Are they hungry? Are they getting ready for bed? Why is the timing relevant to a user interacting with your interface?

The user is most likely interacting with our UI when they have some free time. They are most likely not in a rush, or in need of anything quickly. For this reason, I suspect users will most likely use the product in the evening, at night, or on the weekends. I suspect that if the user is trying to make a custom design, they would want to take their time. This is important because we want to still give the user a relatively quick process, but it’s not necessarily the most important thing.

Now, it's time to introduce a plot. How is the user going to interact with your UI? How are they going to access your UI?

The user will interact with our UI using a web interface. If I choose to include it in AR mode, it means that a mobile feature will most likely need to be added to accommodate this. They will access our UI either through a marketing link/ad, or through an organic Google search. Before having full access to all UI features, they will first need to create an account on the site.

How do they navigate through the UI (You may not have all of these details yet, so you can keep it general.)?

The user will first navigate through a simple UI prompting them to create an account. Users will be allowed to check out as a guest, but will not have access to creating custom designs without an account. From there, users will either have access to prebuilt boards, the custom design tool, build your own board, or individual components. Prebuilt boards and individual components will be similar to traditional e-commerce websites. The custom design tool will have a similar layout to Adobe Illustrator, and allow users to customize their own board. The build your own board page will take users through a step-by-step process of choosing all the components they need for a custom board. In this process, users will have a 3D render of the board as they choose to build it.

What are they thinking as they interact with it?

More than anything, the user is most likely thinking of whatever design idea they have in mind for their board. This might not be concrete yet, but it’s important that the UI allows for simple tasks to be as easy as possible, while still helping the user achieve this vision.

How will they know they've been successful in completing their tasks? Answer these questions and any others that are relevant in your design doc.

Users will know they’ve been successful in creating a custom design as it will save the design to their account. When building their own board, users will see components be replaced on a 3D render and also listed somewhere. They will know they are done building a board when the interface prompts them to add their skateboard to the cart. For simple tasks, notification banners will let users know whether their actions were successful.

Bring it all together: Write a story (~300-600 words) incorporating all the details you outlined above. Be effortful and intentional when writing your story. This story will motivate everything you do for this project henceforth. The pages you design will be those motivated by this story. The task you provide your user test participants will be the task motivated by this story. This story will appear verbatim (with some possible editing) in your final project narrative on your portfolio. This story is the foundation for your project, so make sure it is stable (or at least approaching stability).

User Story: Ben’s Custom Board

Ben Roter is a 21-year-old skateboard enthusiast with a background in digital marketing and design. After breaking his old board at the skate park last weekend, Ben is looking to build a new skateboard that reflects his personality and creative flare. His friend recommended he try a new website that allows users to customize their own skateboard decks. After a long day of work, Ben settles onto his couch and opens his laptop, excited to try this new website. Ben is looking to design a skateboard that he can ride to work in the mornings, but also at the skatepark when he has time.

Ben’s home is well-lit, with quick internet speeds. He occasionally has to get up during his web session to do various chores, or answer calls from family and friends. Upon opening the website, Ben is greeted with a well-designed page prompting him to either sign in, create an account, or continue as a guest. Since he’s not sure whether he needs an account, Ben decides to continue as a guest. From there, Ben is taken to a stunning homepage featuring popular user designs, different skate parts, and a comprehensive navigation bar. In the navigation bar, Ben sees labels for: “Skateboard Parts”, “Pre Built Skateboards”, “Design Your Own Deck”, “Build a Custom Skateboard”, and “Community Designs”. Ben is intrigued by the “Design Your Own Deck” option, and hovers over the text, revealing a dropdown navigation with more options under each main navigation item. Still interested in designing his own deck, Ben clicks on the navigation item. He is taken to a page with a grayed out background and a notification prompting him that he must create an account to design his own deck with a small button to sign in or create an account. Ben then clicks the button and signs up using his personal email.

After navigating back to the page, Ben sees that there is a blank skateboard in the center with tools on the top and side containing different icons. Being in a design field, Ben recognizes most of the icons as allowing him to draw on the board, add shapes, or change the background color. For the icons he doesn’t know, Ben hovers over them and is prompted with a description of what the tool does. Ben spends some time designing a board, and when he’s done, he saves it to his account. After saving to his account, he gets a call and closes the site, returning about 30 minutes later.

When Ben returns to the site, he navigates over to the “Build a Custom Skateboard” tab. He is then taken to a page where he can select a deck for his skateboard. There is a tab for the normal designs, and one for custom user designs. Ben selects his design and hits continue. After he hits this button, a 3D render appears with his deck design on it. Additionally, a progress bar appears at the top of the screen. Ben goes through, selecting the proper wheels, bearings, and trucks for his deck. When a type of component is not compatible with his current build, it is given a faint red overlay. Eventually, Ben finishes designing his skateboard, and chooses “Add to Cart”. From there, he follows a standard checkout interface, and after placing the order is sent a tracking number and a receipt for his purchase.