2Kasa Class: DePaul HCI 430 Prototyping and Implementation Activities: Design Charrettes, Storyboard, Moodboard, Personas, Interactive Wireframes, Usability TestingProblem: Users want to easily find places for rent/saleSolution: Location based real estate mobile applicationDuration: 7 weeks

Andrew Cha | Ann Junker | Kimberly Porter | Louie Primero | Silpa Vipparti

Description

2Kasa is a location-based real estate program. Imagine driving in your car

through an interesting neighborhood and wondering if there are any homes

for rent or sale in that area. Just set a pin via voice command to your car

navigation system or your phone. When new listings are available from the

major real estate sites and classifieds sent to your account, you are notified

and can browse on your device of choice.

The information provided includes relevant information like demographics,

nearby restaurants, apartment amenities, pricing, crime rates, and school

ratings.

Combined Storyboard

Each team member sketched how they perceived the idea. We combined the best elements from each to

refined workflow.

Moodboard

A collection of design ideas to get

a better idea of what exactly we

are looking for in our prototype.

● Information display

● Navigation system menu

● Preferred colors

● Fonts

https://in.pinterest.com/ann_junker/hci-430-mood-board/

Persona 1 - James Adams

“I really want to live somewhere close to the EL and with a few good bars or restaurants in walking distance.”

Age: 27 Education: BA in Graphic Arts Computer Expertise: Digital native. Almost always has his iPhone in hand.

Goals/motivations: Lives in the suburbs with his parents. Has a new job downtown and would like to move there for the experience and a shorter commute.

Frustrations and pain points: Not very familiar with the city. Most of his friends still live in the same suburbs as he does, and when he does come into the city, he goes to the same places. Would like to expand his choices.

Narrative: James grew up in the west suburbs of Chicago, and often drives into the city to visit his friends Jane and Tom who live in Logan Square. He’s always wanted to live in the city but he’s been comfortable living with his parents. But now with the new job in the Loop, he’s seriously considering moving. As a visual person, he often sees buildings or streets and thinks, “This street looks nice, I wonder what the rent is around here?”. Since he would be starting his work life, he would like to try and save some money. So he is looking for economic houses or he hopes he could find someone he can share the place with.

Persona 2 - April Kim

“I’d like a backyard and a good school system”

Age: 38 Education: MBA Computer Expertise: Digital native. Uses her car nav system at all times.

Goals/motivations: Has been living in an apartment in the city but is thinking of starting a family with her husband Charles, and would like to get a bigger place.

Frustrations and pain points: Not very familiar with the suburbs and anywhere outside of the city limits.

Narrative: April and her husband live in Lincoln Square and would like to keep living in that neighborhood but the prices are too high. They recently visited her sister in Batavia to go kayaking. She really enjoyed it and liked the little town feel, so she and Charles have been taking drives to other towns nearby, especially ones along the Fox river.

Mobile Wireframes - Mid-Fidelity Design Choices

Clean layouts are used to show the main features for the testing.

● Notification to look at location detail page

● Navigation to set preferences

● Way to contact the location manager

Content was prioritized based on what the user would likely want to use first or more often, and putting less

used content further down the page.

No color was used, which could distract the user and influenced the user’s choices during testing. Grey

containers helped define areas of content to make it easier for the user to see what content is grouped

together.

Interactions were added to closely mimic real world use, such as a notification pop up, confirmation screens,

progressive disclosure, and sliding image galleries. The goal was to maximize limited space without

overwhelming the user.

Mobile Wireframes - Mid-Fidelity

James signs up for 2Kasa to make his search for the perfect apartment as painless as possible. A quick sign-up

process has him save his preferences.

Mobile Wireframes - Mobile Mid-Fidelity

As James goes about his day, 2Kasa goes to

work for him. While having dinner with a

friend, notification of a match pops up on his

phone!

Mobile Wireframes - Mobile Mid-Fidelity

From his match, James has the options to

save, rate, ignore or contact the listing.

Mobile Wireframes - Mobile Mid-Fidelity

At any time, James can find a list of his saved

locations. While auto-sorted by highest match

percentage, James has the option to filter and

sort.

James uses the “Contact Now” option to make

an appointment to view his favorite match.

Website Wireframes - Design Choices

For the desktop version of the application, we set it up with the traditional logo on the top left that always

leads home, and in the right hand area, the space that would let the user know there were matches they could

review.

The most important info in the top right, and going down, a large search box. The thought was that on the

desktop, users would be more prone to explore and make searches.

Below the search box, we wanted to show off some large photos of the matches for the user. This takes

advantage of the larger screen for bigger photos and more information, and is a second way to guide the user

to click on the matches, which is one of our main goals. Also included is large “save,” “ignore” and “contact”

buttons, all in the same right hand area in our information grids and photos for consistency.

Website Wireframes - Mobile Mid-Fidelity

April visits the 2Kasa website to sign up and find

a new apartment.

Website Wireframes - Mobile Mid-Fidelity

April sets her preferences and sees there are matches for her.

Website Wireframes - Mobile Mid-Fidelity

April reviews one of the matches and decides it looks like a place for her. She contacts the landlord.

Website Wireframes - Mobile Mid-Fidelity

April is notified the email was sent.

Usability Testing

The motive behind usability testing is to get feedback from users about the prototypes we built, and to work

on the feedback given. We identified three individuals with whom we conducted the usability testing. Tests

were recorded while the participant was navigating through the prototypes. The team then went through the

test and identified common themes to work on for upcoming increments in the prototype such as:

● Misleading Presentation

● Use of icons

● Consistency in both channels

Usability Testing - Findings

Misleading Presentation: Users had problems with wording and

presentation techniques used in the prototype. Desktop

wireframes needed more detail.

● When navigating to set preferences for the type of house

she wanted to rent, Sylvia clicked on the menu icon

option on the right, even though the home page showed

"68% preferences" as a tab.

● Marshall comes from a smaller town. The word

neighborhood didn’t have meaning to him, as towns don’t

have named neighborhoods. Though he liked the button,

he didn’t know any neighborhoods to find this feature

useful.

● Participants felt the website prototypes were missing

information that could have helped them navigate to

certain areas of the site.

Usability Testing - Findings

Icons: Some icons were not clear to participants.

● Sylvia said there were too many icons on the homepage and

the color red was giving a wrong message to the user. It felt

more like notifications rather than a list. We modified the

icons and reduced them from five to three, before

presenting it to the next user.

● Anna was given the same task to perform, but in the mobile

prototype. She was able to navigate through the mobile

prototype without any issues, as the layout of the buttons

was pretty straightforward to understand according to her.

● On the website wireframes, Marshall opted to stick with

the content navigation rather than use the icons in the top

right. He mentioned he wasn’t sure what each icon would

do.

Usability Testing - Findings

Inconsistency: 2 out of 3 users complained that the workflow of the task is different in mobile with that of the

website.

● Participants felt the navigation needed to be more similar in both interfaces. By this, they meant that

the menu layout should be easy to learn and more or less the same in both channels. The reason being

that while doing the tasks, the user tends to learn from the interface they’re using.

● Once participants shift to another channel for the same application, they tend to find similarities

between both the channels and try to adapt to the new channel by matching it’s qualities with the

previous ones.

● We need to make sure the look and the navigation of the prototype is similar and uniform in both the

channels, which would help user to easily adapt to the application.

Usability Testing - Findings

Good information provided: All the three

participants thought the type of information

provided on the wireframes were good and the

type of information they would look for.

● Rearranging the mobile preferences

content to put the bed/bath/rent range

higher up.

● Liked the presentation of the desktop

preferences page (where bed/bath/rent

range was first) because of the clear layout

and large map.

● On the mobile location detail page,

participants liked the image gallery, map,

and the preference match.

Usability Testing - Conclusion

We believe our participant’s previous experience with searching for homes through web or mobile tools

influenced how they chose to navigate through the task scenarios we presented them.

Participants suggested similar changes to the prototypes. We made a couple of assumptions when deciding on

the design of the prototype. For instance, we thought icons would be a simple and clean way to help the user

understand the function of a button better, rather than spelling out in words what a button did, but this turned

out to be confusing for some. In a second iteration of our mid-fi prototype we worked on reducing the icons

and improving the semantic labeling of the options being presented.

Presenting the task scenarios in a different order for every user helped us to understand the learning pattern

involved in using this application. We aim to make the interface optimal so that no matter how the tasks are

presented, every user should be able to adapt with ease.

Updated Mobile Wireframes

With the usability testing feedback, we updated the

mobile wireframes and increased the fidelity. For

these updates, we only included the mobile

variation.

● Adding color

● Included images

● Updated functionality

Updated Mobile Wireframes

April finds a match, reviews the details and rates the

location based on initial impression of the area.

Updated Mobile Wireframes

April contacts the owners to get a showing of the

apartment.

Updated Mobile Wireframes

April looks for all the matches

near her, reviews the map to see

where these locations are, and

filters the locations based on

specific criteria.

Future Work

● Conduct additional usability testing on the updated mobile wireframes.

● Update wireframes for both the mobile and desktop versions based on latest usability testing.

● Create a style guide and branding to apply to both the mobile and desktop versions.

● Explore other features to add to 2Kasa in the future.

Appendix - Design CharrettesEach team member has sketched out how they perceive the main idea of the application, with respect to

the channel the user will be operating upon. These charrettes were combined to create one storyboard.

Appendix - Design Charrettes

Appendix - My Design Charrettes

Appendix - Wireframes● Mobile

● Website

Appendix - Consent FormPurpose of the research study: The purpose of this study is to collect overall user opinions on the layout, functioning and structure of the 2Kasa mobile and web application

prototype we developed.

What you will do in the study: You will participate in a research session that involves testing the prototype in front of you. These are the prototypes for the 2Kasa mobile and

web application which we have been working on, as a part of our course project. With your permission, notes will be taken and the study will be recorded. All notes and

recordings are then analyzed by us, the team members. No personally identifiable information is associated with any information provided in connection with the study.

Your participation in the research is completely voluntary. You do not have to answer any questions you do not want to, and you have the right to withdraw from the study at

any time. If you want to withdraw from the study, simply leave or state that you wish to end the session. There is no penalty for withdrawing. If you choose to withdraw, your

recording will be destroyed.

Time required: 25 minutes - 30 minutes

Confidentiality: The information that you give in the study will be handled confidentially. Your name will not be used in any report or made public in any way.

Agreement: By providing your consent verbally, you agree to participate in the research study described above.

You will be working with a mobile interface that is still under development. Any information you acquire in connection with your participation is confidential and proprietary

and is being disclosed to you only so that you can participate in the evaluation. By signing this form, you agree not to share this information with others.

Do you agree and give your consent to participate in this study?

Participant Name (printed): Interview conducted by: Date:

Appendix - Moderator Script“Welcome, thank you for participating in our session, where we will be talking about the 2Kasa mobile and web application prototypes and

will also test a few of the application’s features. My name is Ann/Andrew/Kim/Louie/Silpa and I will be leading your one-on-one session.

Today’s session will take approximately 25 minutes to complete. There will be no compensation offered, but we would be highly appreciate

your feedback as it would help us to develop these prototypes. Today, we will be discussing features that could be on this mobile application

and website, as well as ways to organize content. There are no wrong answers. All feedback is welcomed – the more you talk, the more

interesting the session will be, and the faster it will go. We recommend that you think out loud, which can help us understand your thought

process. We will be taking notes as we talk, and I may also ask you some follow-up questions. Do you have any questions for me before we

begin?”

Appendix - Moderator Script“We have a few initial questions before we start our exercise.”

Interview Questions

● How old are you?

● What is your profession?

● Have you used any rental app/ website before?

● If yes:○ Which application?

○ Was it easy to use?

○ On a scale of 1-5 (1 being the lowest and 5 being the highest) how would rate your experience with the application?

○ Why do you rate it that?

● If no:○ How did you go about searching for a house if you had to find one to move in?

○ Did you know that there are apps/websites to help you?

○ If yes, why did you not use them?

Appendix - Moderator Script2Kasa Introduction

“Our application 2Kasa deals with helping a user find their perfect home based on the preferences he/she enters while using the application.

The user can enter the qualities they are looking for i.e. number of bedrooms, bathrooms, rent range, amenities, neighborhood and so on.

When the user is near a match to their preferences, they will receive a pop-up notification from 2Kasa. The user will then be provided with

information about the apartment and can contact the owner, or the user can rate and save their favorite homes in the form of a list they can

view later.”

“We will be testing the 2Kasa interface prototypes as implemented on our two main channels: mobile and computer. We have a couple of

scenarios we would like to try testing with you. Is that okay?”

If yes, “Without further delay, I shall present to you the scenarios through which you will be using these prototypes.”

Appendix - Moderator ScriptTask Scenarios

Scenario 1: You have lived in Naperville ever since you were a kid. You recently graduated with a undergraduate degree in Accounting and

you’re fortunate enough to find a job within a month. Your office is located in downtown–Randolph Street, to be more specific. It is difficult

for you to commute such a long distance everyday, so you decide to find an apartment to rent nearby. Since you will be living alone, you want

a one bedroom/one bathroom apartment that is around $1,000 per month at most, and that is also pet friendly. How would you use the

interface to set your preferences for your apartment search? Assume you have already logged in.

Scenario 2: You’ve installed the 2Kasa mobile application and let it know what type of place you’re looking for. Now it’s Friday night and

you’re out with your friends for dinner. The 2Kasa application gives you an alert on your mobile device stating that there is an apartment

matching your preferences nearby. Please show how would you navigate from the notification alert to learn more information about the

match, and then save the match to review later.

Scenario 3: You liked a match the 2Kasa application suggested so you saved it. Now you want to contact the owner of one to learn more about

the place and maybe schedule a viewing. From the home screen of 2Kasa, how would you go about finding your list of saved places and then

contact the owner of one?

“When performing the task(s), I must remind you to talk out loud as you can when performing the task and prompt me if you wish for

silence.” “When you are finished, please prompt me.”

Appendix - Moderator ScriptQuestions to ask during the task(s)

● What is drawing your attention now?

● What are you seeing here?

● Did you notice anything strange?

● Can you tell me what happened?

● What would you do next?

● I noticed you paused before tapping. What were you thinking at that point?

● Does the interface make sense to you?

● Why did you click on this?

Questions after task

● What do you like about the feature?

● What do you dislike?

● On a scale of 1-5 (1 being the lowest and 5 being the highest), how much mental effort do you think is required to complete this task?

Why?

Appendix - Moderator Script“That concludes the task scenarios. I will now ask questions regarding to them.”

User Debriefing Questions

● “In your honest opinion, please tell me what you think about your navigation through the app.”

● “Are there any obstacles that you’ve encountered during the scenarios?”

● “Have you faced a confusing situation that you’ve encountered and how did you coped with it? If so please explain to me in detail.”

● “Have you gotten an emotional impact during the scenarios?”

● “That concludes the debriefing. I will now ask you to participate in a quick survey.”

Appendix - Moderator ScriptUser Experience Survey Questions

● Would you recommend 2Kasa to a friend? Y/N?

● How would you describe 2Kasa in one or more words?

● How does 2Kasa compare to Yelp?

● What features of 2Kasa did you find useful? Why?

● What features of 2Kasa did you feel you would not use?

● What features would you like to see in an app to help you find your next home?

● On a scale of 1 to 5, with 1 being the lowest and 5 being the highest, how frustrating is 2Kasa to use?

● On a scale of 1 to 5, with 1 being the lowest and 5 being the highest, how easy to use do you find 2Kasa?

● If you were to review 2Kasa, what overall score would you give out of 5?

● If you could change one thing about 2Kasa what would it be and why?

Appendix - Moderator ScriptUser Closing Statement

● “That concludes the survey. Are there any questions that you would like to ask regarding what happened?”

● “With that concludes our test. Thank you so much for your time.”

Appendix - Usability Testing MethodsTesting Plan Overview

The goal of user testing was to get a sense of how easy or hard this first version of the 2Kasa prototype was

to navigate, in both the website and mobile formats. The usability of the prototype was assessed by asking

the participants to complete three task scenarios. In order to assure the greatest amount of neutrality in the

data, our three participants were asked to perform the tasks in different orders, and on a mix of the channels

- this allowed us to know that any perceived difficulty or ease of performing a task scenario was not the

result of a learning curve (i.e. completing task scenario one prepared the user to complete task scenario

three more easily). We aimed to obtain as much feedback as possible from our participants so that we can

incorporate this feedback into the next increments of the 2Kasa prototype.

Appendix - Usability Testing MethodsParticipants

We conducted the usability test with

three users. While there was no

particular screening process to

choose the participants, we tried to

gain an understanding of each’s

previous experience, if any, with

respect to finding a home through

any mobile or web application tool.

Name Age Occupation Why did we recruit him/her?

Sylvia 28 Student She uses a smartphone and she is a student who moved to Chicago the last fall. So she had the experience of searching for houses in an area unknown to her. This fits more with the persona we are trying to develop this application for.

Anna 25 Student She’s a student who moved from the suburban region to an area closer to downtown so that it would take her less time to commute to her workplace. She is not much of a tech-savvy person but she has a relaxed learning curve when it comes to adapting new technology. We think our application needs to be adaptable by such users as well and their opinion matters, in shaping the prototypes.

Marshall 33 Young Professional

He’s moving for a new job to a larger city. He doesn’t know the area well and could use help finding a new place to live. He uses his phone more than a desktop for personal use.

Appendix - Usability Testing MethodsThe prototypes were built in Axure for both the

mobile and web channels. They were then

displayed on the laptop screen for the user to

operate. The user was first presented with a

consent form and given a brief idea about what

the test would revolve around. We also let them

know that we would be recording our

conversation, as well as the screen as they

worked on it. Once they agreed, we asked a few

background questions and then presented the

scenarios designed to test navigation of the

mid-fi prototypes. These are the sequences of

scenarios presented to each user:

Name Scenario

Channel

Scenario

Channel

Scenario

Channel

Sylvia 1/Mobile 2/Mobile 3/Website

Anna 2/Mobile 3/Mobile 1/Website

Marshall 2/Mobile 1/Mobile 3/Website