My Design Thinking Steps for My Interaction Design Capstone Project
Hi, my name is Gioconda and I am very happy to share with you my Design thinking steps I went through on my last course — “Interaction Design Capstone Project” from the Interaction Design Specialization at the University of California, San Diego via Coursera’s platform. My mission was to design a Digital Interactive Prototype for mobile devices based on one of the provided briefs.
There were 3 briefs provided and we had to choose one. The briefs were:
Time: Redesign the way we experience or interact with time.
Change: Design an interface that facilitates personal or social behavior change.
Glance: Find people and design a personal dashboard tailored to their needs.
I chose “Glance”, and here are the steps in the Design Thinking Process.
Step 1: Needfinding
Needfinding is the process of finding needs or opportunities, and we do this by interviewing and observing people with the objective to learn what they do, feel, say, and how they interact with a specific product or system.
I had interviewed and observed 3 people with the goal to learn how, when and why they use their smartphones. In addition, my interview questions were related to their daily activities including weekends even if they do not use a digital device. Two of the interviews were done in their homes, and one in my cousin’s restaurant.
I did not find breakdowns, but I found design opportunities. One of my interviewees needs a way to glance quickly her business sells while on the go or at home and have the possibility to relate excel files to some of her web pages. The other one was very happy with her smartphone but she complained about memory issues because she cannot run or install new applications due to messages she receives from the operating system stating that some functions will be restricted on these applications. Also, she was not happy with her Samsung J1’s virtual keyboard because she thinks her fingers are too wide to press a single key.
Finally, the last one was more focus on entertaining his grandchildren while being on adult parties, and he was very happy with his smartphone’s features that he uses while commuting and working at his restaurant. However, he complained about his phone physical memory because he needs to clean files all the time.
Step 2: Ideation
Ideation is the creative process of generating ideas or images in someone’s mind. These ideas can be crazy or good ones, but the purpose is to find meaningful design opportunities. A crazy idea can help us to come up with a great one as one of our instructors said. Ideas are like seeds that grow and mature during the time.
Strategies we had used on this step:
Brainstorming: A strategy for rapidly generating a lot of ideas.
I have generated 16 ideas based on the interviews and observations done and articulated them as user needs.
Point of view: A High-level strategy to improve an experience.
I selected the most useful ideas from the previous step and came up with my point of view.
“Smartphone’s Home interfaces are intrinsic because users download/select apps to represent these ones as icons on the initial interface, but the world and new creative designs offer new ways to get/see key information at the glance that they do not know yet. My interviewees are very happy with their initial interface (just app icons), but they have not been exposed to other alternatives”.
Inspiration board: A place where we can collect existing designs that can help us to get inspired when working on a project. We look at what is out there in the world. It could be an existing application, artifacts, products, services, or anything that relates to our Point Of View.
One of the sites that inspired me was www.tableau.com. They have a section called “Determine the dashboard context and focus”. This section talks about the importance to narrow down what the user needs to see on a mobile device. They have great questions such as:
“When I am on the run, I might need to see my {blank}
My answer:
“When I am on the run, I might need to see my business selling points and status.”
At this point, it was clear to me that I wanted to design a dashboard that will show as a shell and navigates with the user on the smartphone. The dashboard could contain some widgets/pages’ URLs that can help users to see updated information all the time. I thought voice recognition could be a great feature for the dashboard; many apps use already this technique.
Inspiration words: Words that relate to our design idea or Point Of View. We needed to keep these words on our inspiration board, so we could always come back and look at them to focus on what we were designing.
My inspirational words were: Elegant, friendly, simple, soft colors, easy to use, fun to use, happiness, entertainment, Clarity, interactivity, legible text, and calm.
I could not find an existing dashboard application for mobiles on the inspiration board step; every dashboard was related to a specific application.
Step 3: Prototyping
A prototype is an early sample, model, or release of a product built to test a concept or process or to act as a thing to be replicated or learned from. This is a definition from www.wikipedia.org.
In our design context we built 2 paper prototypes, but first, we created 2 storyboards. The storyboards illustrate two different design ideas that engage the chosen Point Of View to address a user need.
Storyboard # 1:
Storyboard # 2:
My initial paper prototypes:
At this phase of the process, I had named the dashboard “Smart Dashboard” because of the smart things it can track and do.
Prototype # 1: I had named this prototype “Calling your web pages using voice”.
My idea was to store the address of web pages or web page’s URL on the dashboard, so users can access their important web pages using voice recognition. These pages can be your business sells (this addresses one of my interviewees’ needs), insurance information or your home appliances. You might see these pages on a daily basis or once in a while, however, the information is important when needed. Also, the idea is to have not too many web pages’ URL stored on the dashboard, just the important ones. In addition, you can attach documents, images, Excel and audio files to each page.
2 key interfaces out of 10
Prototype # 2: “Your Top Videos”
My idea was to present a list of top videos based on the user’s habits. Also, the dashboard will show up as a shell on a specific day and time playing a video if that is what the user does frequently. In addition, the dashboard will show your virtual memory status listing all the open applications in memory and giving the option to close the ones you do not need anymore. This idea addresses some needs from my last two interviewees.
1 key interface out of 7.
Step 4: Design Heuristics
Designing with heuristics is a method that allows us to use a technique called “Heuristic Evaluation” to find usability issues in our prototypes.
What is a Heuristic Evaluation?
Heuristic evaluation is a usability engineering method for finding usability problems in a user interface design, thereby making them addressable and solvable as part of an iterative design process. It involves a small set of expert evaluators who examine the interface and assess its compliance with “heuristics,” or recognized usability principles. Such processes help prevent product failure post-release. This is a definition from www.interaction-design.org.
My set of usability heuristics or principles was:
I used the ten usability heuristics from Jakob Nielsen and added “Security” to this list to protect the sensitive data that can be seen at a glance easily on the Smart Dashboard.
Peer Heuristic Evaluation:
This is the first step I took. I let one of my peers test my prototypes with the heuristics I had provided because it was important not to waste users with issues that can be found automatically by peers. This will allow real and potential users to find the main issues as Professor Scott mentioned in one of the lectures.
Heuristic Evaluation for a Peer: This is the process of conducting a Heuristic Evaluation for a learner’s paper prototype. I conducted this process for two peers.
First Iteration
I polished my prototype # 1 and redesigned my paper prototype # 2 based on the issues found on the peer heuristic evaluation.
For Prototype # 1: My peer liked the idea of having a dashboard that navigates with you on the smartphone. Also, she liked the voice recognition feature.
For Prototype # 2: My peer stated the sides of the cubes were too small for adult fingers to consistently click without errors. Also, she thought this idea was neat but a lot for a user to remember, so to decrease the user’s cognitive load, she suggested showing just the video’s thumbnail, and beneath some links for video information. I think her suggestions were great, and I agreed with her that it is important to decrease the user’s cognitive load, then I decided to redesign the main interface as shown below:
Then I translated most of the interfaces into Spanish, so my In-Person- Evaluator could interact with the prototypes.
In-Person Evaluation: This is the process where a user critiques or gives feedback about the prototypes. I created a task for prototype # 1, and let my evaluator explore prototype # 2.
Assigned Task for Prototype # 1:
Add a web page on the dashboard, add an image to this page, and then call your created web page using voice.
One of my interviewees was the user who interacted and gave feedback about my prototypes. I recorded the evaluator’s hands interactions for both prototypes to watch those videos later and find usability issues on the user interfaces having my usability heuristics set as a guide.
Some of the issues found were:
For Prototype # 1
I learned from this user that she needed to tap on the help icon on one of the interfaces to proceed with the assigned task. The interface was not intuitive enough. She did not recognize the trash icon on the main interface. Also, she mentioned the need to have web pages listed by websites and attach Excel files to these.
For Prototype # 2
Gladys liked the video’s additional information the app presents. Also, she thought that the RAM status per each video was very helpful. She wished she could use voice within the help sections.
Second Iteration
I fixed the important issues found in the in-person evaluation.
At the end of this step, I had to choose a prototype that I would work on for the rest of the course based on the heuristics evaluations conducted.
I chose Prototype # 1 — “Calling your web pages using voice” because my In-Person and potential user liked the voice recognition safety feature when accessing a web page. I thought this prototype was going to be useful for her and for other users that need to access their important web pages easily. In addition, some of these web pages might not have all the important information for them, but they can attach files to these ones based on their needs. It is like creating a “folder” where you keep what is important for you. It could be your important web page and all the collected images, audio files, and documents that you keep physically in some place, but now you can attach digitally those ones to your important web page and have them in one place when needed.
Step 5: A Plan & a Skeleton
On this step, we had to create a development plan that lists concrete and actionable goals for all the core screens of the chosen prototype and for all the tasks of the remaining steps of this process (steps 6, 7, 8, and 9) with the objective to follow this plan on each step. Also, we had to provide the prototype ’s skeleton (home + 2 mayor interfaces) on a digital format with interactivity. I had learned how to use the basic features for the InVision application in order to make the digital prototype interactive.
Users I am designing for:
I am designing for one of my interviewees and for all the users that need to glance quickly their important information stored on their important web pages.
Step 6: Ready for testing
On this step, we had to design/draw the rest of the paper interfaces in a Digital Design Software in order to come up with a Digital Prototype for mobiles.
Before proceeding with this step, I let another peer conduct a Heuristic Evaluation on my paper prototypes to find other usability issues. I had fixed the important issues related to Prototype # 1.
Step 7: Testing my prototype
On this step, we had to test our Interactive digital prototype in person with two people to find usability bugs & potential improvements, but first I had tested my prototype on an Android smartphone.
Assigned Task
The user ’s task was to configure a web page from the Bosch Appliances web site on the Smart Dashboard, add an image, and call the added web page using the microphone provided on the Smart Dashboard Tab.
Users needed to imagine that they have bookmarked their “registered Bosch appliances” web page as a favorite one on the Google Chrome browser.
The purpose of having this particular scenario was that the users could see how easy is to add a favorite web page from another browser into the Smart Dashboard. The Smart Dashboard will present most of the information already created on other browsers. Of course, you can add a web page from scratch to the Smart Dashboard.
I had tested my digital prototype with two potential users, gave them an Android smartphone showing the Smart Dashboard application, video recorded their hands’ interactions with the goal to watch these videos later and find usability issues.
I had made a list of changes based on what I found. One of my major concerns was when a user could not find easily the “plus” icon to add a web page on the dashboard. I had explained to her that the “plus” symbol means adding something, and the word page on the icon means “adding a web page” on the dashboard.
Third Iteration
I have fixed all the issues found in this step.
Redesigning for an A/B Test
What is an A/B Test?
A/B testing is a randomized experiment with two variants, A and B. It includes an application of statistical hypothesis testing or “two-sample hypothesis testing” as used in the field of statistics. A/B testing is a way to compare two versions of a single variable, typically by testing a subject’s response to variant A against variant B, and determining which of the two variants is more effective.
As the name implies, two versions (A and B) are compared, which are identical except for one variation that might affect a user’s behavior. Version A might be the currently used version (control), while version B is modified in some respect (treatment). This is a definition from www.wikipedia.org.
On this step we had to identify and redesign one component of the prototype that resolves a breakdown or leverages an opportunity with an outcome that users can be binary classified into, e.g. clicked or didn’t click. The redesigned component needed to be noticeably different from the original design.
As I mentioned above, one of my users on the in-person test could not find the “plus” icon on the interface. I thought this could be my component or element that I could redesign for the A/B experiment because this is an important icon on the main interface. It is important that users understand the purpose of it, and find the icon easily.
The original element was partially colored (Screen A), so I decided to make the redesigned element full colored (Screen B) as shown here:
My hypothesis was:
The “plus” icon on the Screen B is easier to find than the “plus” icon on the Screen A.
My measure was the “time” it takes users to tap/click on this icon once they land on the interface that contains the mentioned icon.
Step 8: Results!
On this step, we had to launch our A/B test on the User Testing web site, www.usertesting.com. I had provided two prototype’s links. The prototypes were assigned randomly to 4 users. Prototype A (containing screen A) was assigned to 2 users and the other two got the Prototype B (containing screen B).
I had run 2 sessions and got data for 7 users that interacted with my two prototype’s links. The users used the “think-aloud” protocol when interacting with the prototypes. This means that they are asked to say aloud whatever comes to their minds while performing the assigned task. The sessions were video recorded by the web site, and then I watched the videos analyzing how the users interacted with my A/B screens and with the other interfaces of the prototype.
Results:
I had summarized the “time” per each user on the A/B screens taking into consideration the “think aloud” protocol they used because this delays their actions taken. Then, I had analyzed my user’s comments based on a post-question I had for them that asked if it was easy to find the “plus” icon and if they understood the purpose of it. I did not use the chi-square test as a statistical test to find a significant difference between the two elements because my measure is time and not clicks.
I had concluded that either icon was easy to find on the screen or interface based on their time on the screens, their comments, and my observations in regards to their movements while watching their videos. However, I had chosen Screen B which contains the full colored “plus” icon because the colored word “PAGE” adds some liveliness to the whole icon bringing the user’s attention to it. Then, I had created a list of changes that applied to all the interfaces in order to improve my prototype.
Four Iteration
I had fixed all the usability issues related to this prototype version leaving some user’s suggestions for future releases.
Step 9: Show and Tell
In this step, we have to share publicly this post and make a video presenting the prototype as well as sharing the final prototype’s URL.
Digital Smart Dashboard Prototype: Not available at this moment.
I hope you enjoy this post, and I thank my Professors Scott Klemmer, Elizabeth Gerber, and Jacob O. Wobbrock for their teachings. I learned a lot, and I feel very happy about that. Also, I thank my peers and users/testers for their feedback on the Smart Dashboard Prototype. Lastly, I thank the support team at the InVision Company and the User Testing websites.
