Re-design and Extend

Overview

In this design sprint, we will revisit one of the previous design sprints. Which project we revisit will be determined by students voting in a survey. This page will be updated once the votes are in. We will be revisiting Design Sprint #1: Design for Dimensions. However, after our in-class discussion, we will be designing two competing local ice cream parlor websites (e.g., Carolina Cone, Ben & Jerry’s, Whits, Seemingly Overzealous, Summit Creamery, Andy’s, Two Scoops, etc.). This project will involve a few components and will involve several important in-class hack sessions.

Background

Start by picking two ice cream parlors. With your groups, review their website and familiarize yourself with the contents. What makes this ice cream shop unique? What niche of the market are they trying to occupy? What is special about the product? What is special about the place/people/history/causes etc.?

I encourage you to visit the stores in person (and try some ice cream!). Like we saw with Carburritos, it’s hard to fully capture the vibe of a place using only a website. Check out these stores and what it’s like. Who shows up? What do people often buy? How is the customer service?

Comparison and Personas

Now directly compare the two locations, using the information gained from the Background step. By “compare,” you should present both ice cream stores in their best light, describing any commonalities that they share but highlighting the differences that make each store unique. Remember, if you’re designing/building a website for a company, they want you to build something that draws in customers.

With this knowledge, create two personas, one per ice cream parlor. Be sure to include the usual level of detail about your personas, then include a short scenario for why that person is now at that ice cream parlor.

Your personas and scenarios should inform your designs in your next steps so make sure they are robust and you and your teammates have removed any ambiguity.

Sketching and Mood Boards

With your teammates, sketch design options for these webpages for both ice cream parlors:

(1) For menu/flavors, you can design it like a digital menuboard – some thing that gives information but does not allow for checkout. If you want to add some sort of checkout buttons, you can, but it is not necessary since we are not designing a checkout system.

Be mindful the content of each page, both practical and aesthetic. Think about things like your information hierarchy on each page. What is a user looking for if they arrived at this page? What might be second priority? Also consider how color, shape, font, and other design elements impact the feel of each page.

You need 3 design options for each page so that you can gain useful feedback from your testers. You also need 1 moodboard per ice cream parlor to help unify your designs and strengthen the style of your websites. You do not need to test your moodboard with users.

TOTAL SKETCHES: 2 parlors * 3 webpages * 3 options per page = 18 sketches

TOTAL MOODBOARDS: 2 (one per parlor)

Accessibility within your designs

Given that everyone likes ice cream, we should include aspects of universal design in your sketches and final prototypes. Since these are webpages, refer to guidance from WCAG and class notes and class HTML activity.

Things I’ll be looking for (an incomplete list):

User Feedback

You should show your sketches to 4-5 people. One person should be from this class, the remaining people can be students, staff, faculty, or town residents.

For each session, be sure to give the user some context about the project and what you’re hoping to learn from them. Be mindful of alternating which ice cream parlor is shown first to your participants so that one isn’t biased over the other. Take notes of what they liked, didn’t like, and found confusing to use for design improvements later.

Synthesis and Design

Synthesize the feedback from your users into actionable points that your group will include (not every piece of feedback is worth acting on). Then, get designing!

For each ice cream parlor, you will use the best aspects of your sketched designs to build 3 webpage mockups (home, menu/flavors, about us). That’s 6 total mockups, and it should be clear from looking at a single webpage what the purpose of the page is and what store it belongs to. We’re looking for a strong visual identity through out.

You should build high-fidelity prototypes of these websites. You can choose to use Figma to do this, or choose other tools like Canva or even PowerPoint. The websites should also be interactive in some way – at minimum, I expect to be able to click a button on one page to be taken to a different page.

TOTAL NUMBER OF FIGMA PAGES: 3 web pages * 2 ice cream parlors = 6 pages

Evaluation

You will need to test your designs with real users, with a goal in mind. Given that you have 2 ice cream parlors and several pages per ice cream parlor, you should think about what kinds of questions you want to ask.

STOP (WORK IN PROGRESS, OLD ASSIGNMENT IS BELOW)

Evaluate

You should begin by evaluating your previous website designs. You are working with new people so the group needs to decide which website and screens you all are going to work with. After you pick the website and screens (homepage/shop page/contact page/etc.), you and your team will need to decide what your evaluation criteria are:

Revisit our lecture resources for evaluation methodologies (cognitive walkthrough, heuristic evaluation, usability study, etc) and decide if one of these is fitting for your evaluation goals. A good framework for thinking about this can be found in Research Contributions in Human-Computer Interaction by Jacob Wobbrock and Julie Kientz.

Your evaluation likely involves testing with people. Feel free to reach out to friends and classmates or other potential users of your target audience. That means you should make yourself available to your classmates to participate in their evaluations. You will likely need them to participate in yours as well. Some of this can be achieved during our hack day. Some of it will likely need to take place outside of class.

By this point in the semester, your group should be able to make informed and carefully rationalized decisions about the task, target user group, number of participants, conditions, and other details of the experimental design. You will need to justify these choices in your blog posts.

When in doubt, run your evaluation ideas by me.

Iterate

Next, reflect deeply on your evaluation results. How can you use what you learned to inform the next iteration of your design? You will want to describe this reflection in your blog post and go on to implement these changes in your design. That means you will have a new prototype that reflects these design changes.

At this point, you should have plenty of feedback about your 3 screens across the 3 dimensions (watch, desktop, large-scale device). We want to consolidate this feedback to design the 3 screens on 1 dimension, the new physical prototype.

Extend

In the final part of this project, you will be expanding on your previous design using a new prototying modality: physical prototyping. You can find some examples here.

How you choose to extend your previous project can take many forms, entirely up to your group. Be sure to clearly state your goals. Depending on which project you are extending, some examples you might consider are re-designing a wearable biosensor to collect additional health data, an accessible data physicalization experience (Fall 2024), integrating tangible objects in a virtual reality art viewer, etc. You should show evidence of iteration in your physical prototying as well. Check out this article on low-fidelity prototyping for guidance.

You should redesign your 3 screens to suit this new physical prototype. If it’s a small screen, you should follow the feedback from your watch Figma design. If it’s a larger screen, you should follow the feedback from your large-scale device. I expect to see at least 3 sketches of your physical prototype ideas (I expect to see 2 or more distinct ideas, with the third sketch fleshing out the idea that you plan to execute), plus some additional sketches or notes describing how you will implement your 3 screens on your chosen physical prototype.

Tools

For this project, you will have access to tools and materials through Studio M (in room B260 in the south basement of Chambers, by Wall). Studio M has 3D printers, laser engravers, VR simulators, vinyl cutters, shirt presses, and various other tools. You also can access the DACE Studio (in the north basement of Chambers, by the flagpole). They have materials ranging from sewing machines, knitting machine, yarn and string, embroidery tools, paints, coloring utensils, paper, canvas, etc. You may also choose to use materials you find at home around the house (cardboard, plastic bottles, old tshirts, etc).

Dr. Williams has a limited budget to help purchase items, if there are additional things you need that can’t be found on campus. She will share a Supply Request Form during class, where you can request materials and justify their use.

Re-evaluate

Now, given your new physical prototype, your group should design and execute a preliminary evaluation of this extension. Refer back to slides and notes on Experience Prototyping, Heuristic Evaluation, Usability Studies, etc. This evaluation will gather preliminary feedback, but it should include well-informed and justified experimental design decisions.

Reiteration of expected outcomes for Design Sprint #4

Like in the previous design sprints, I am not looking for perfect implementations. I would rather see ambitious design plans and representations of extra features, than a design that is boring and “safe.” However, I will be looking for these components in your write-up:

  1. Evaluation of your previous designs.
  2. Reflection on the results of the evaluation and evidence of iterating on ideas for design changes.
  3. Extending three (or more) of your screen designs into a physical prototype. The physical prototype cannot be for something that already exists – meaning, you can’t design a tablet screen for Knotty and Board. Stretch your imagination.
  4. Evaluating the physical prototype.

Deliverables

Checkpoint: Wednesday, November 19

Final Deliverables

Grading: Grading will be based on the design rubric.