You will be designing and prototyping a mobile ecommerce application using design sprint ux/ui methodologies. Design sprint details and steps will be announced as we progress.
Part 1 - Inspiration and Patterns - 4/8
In this part, students researched mobile ecommerce applications, noted effective designs and common patterns, then we 'shared out' screen shots and discussed the design and features.
Part 2 - E-Commerce Product Ideas and Unique Value Propositions - 4/13
In this part, students came up with at least two product ideas and wrote unique value propositions for each. Unique Value Propositions (UVP) are the selling points that differentiate one product from its competitors. UVPs are typically short statements that express the value a product or services brings to its customers (how it helps them) and how that product or service is better in some unique way (how it is different). Then, we shared out product ideas and discussed which ideas might make for the best mobile e-commerce applications. Product ideas that are specific and focused on unique needs/niches may provide the best experiences for the e-commerce prototypes we will be building.
Homework: Be prepared with two product ideas for the next class/zoom session.
Part 3- E-Commerce Company Names and Branding Attributes - 4/20
In this part, students came up with a list of company and/or site names for two different product ideas, highlighting their favorite names. Then, we came up with 4-5 branding attributes/adjectives to describe the product/brand.
Part 4- Consideration of Target Audience/User Needs - 4/22
In this part, for the two product ideas, students considered the audience that might use the product(s). They profiled these users and wrote ideas about the 1) user demographics, 2) user needs and wants, 3) what users would care about, and 4) what are potential user 'pain points.' We tried to emphathize with users to understand their needs, challenges, and perspectives in relation to our product ideas.
Part 5- Exploratory Wireframes - 4/22
In this part, students created exploratory wireframes in XD. These are abstract wireframes consisting of simple boxes that explore possibilities for content and layout of a 'product page' that might display a paticular product for sale. Without having to provide labels or specific information yet, students created wireframes/boxes considering what content they might imagine they might need and possible arrangements of that content.
Part 6- Researching User Paths and Information Architectures - 4/27
Research two different mobile websites that are similar in some way to your product. In the responsive design mode, navigate to a product detail page (that displays a specific product that you can buy). Take a screen shot of each page/screen along the way to the product detail page, and take a screen shot of the product detail page.
Import your screen shot(s) into XD. Wireframe the product detail page of one of the products to get a sense of the content organization and structure, separated from visual design.
Make a content inventory, labeling the content/information sections within the design.
Part 7 - Make a Content Inventory / UI Element List - 4/29
Make a content inventory for your own product, labeling the content/information sections or UI elelments within the design. This content inventory becomes a kind of 'requirements list' for the information/elements that will be on your page.
Homework: Based on your content/UI inventory, using XD, create a wireframe layout (or two) that details the information architecture of a 'product' page.
Part 8 - Create a color palette - 5/4
Create a color palette for yoru product/brand. Consider the branding attributes that you defined and look to create a palette that will reflect these attributes and support your goals.
Part 9 - Explore Typography and Create a Word Mark or LogoType- 5/6
Explore font faces and typography to use in your user interface. Focus on creating a logotype or word mark for your app, with consideration of the branding attributes that you defined.
Part 10 - Explore Imagery and Graphics - 5/11
Explore imagery and graphics for your application, including product views. Prepare product view graphics on appropriate backgrounds (such as transparency / .png) and/or in formats lending themselves to XD prototyping (such as product sequences like this example).
Homework: Begin to design/blend wireframe and creative investigations to design a product screen/page in XD.
Part 11 - Design a Prototype of the Product Page/Screen- 5/13 - 5/20
Design/blend wireframe and creative investigations from the design sprint to design a prototype of at least the 'product' screen/page in XD (due 5/20).
Publish and Submit (DUE 5/20)
Publish and share the prototype of at least the 'product' screen/page in XD with the class. Create a root folder/directory called "designsprint" and save your .xd file into this folder. Click the menu option to "Share" and create a link (where anyone with the link can view). Add this link to your sketchblog. In addition, upload the "designsprint" folder iwth your .xd file into your "Lastname_Firstname" folder on the MAT server.
