smarthost app - kristine hill design › wp-content › uploads › 2018 › ... · 2018-12-07 ·...

SmartHost App

Kristine HillART337 Interaction Design

Spring 2018

Image


The Project:Design the interface for a simple, specialized calculator app for a touchscreen smartphone. Focus the design on a specific profession or activity and create an interface that uses the principles of interaction and user testing.

Explore how observation, conventions, and feedback inform the design and function.

The Possibilities:My research taught me that specialized calculator apps mostly fall into a few categories; budgets, measurements, and trackers. Each of the categories have endless possibilites. Budgets deal with money but in a myriad of ways. Measurements can be for cooking, crafting, weightloss and so on. Trackers keep

records of time, frequency, duration, repetition, etc. There are also endless ways to combine these into new calculators.

Some of the more interesting ones that I considered:

Job Estimating

Insulin Dosage

Trip/Fuel

Vegetable Gardening

Food Storage

Wedding Budget

I began with the Wedding Budget idea, but it turned out to be extremely complicated. Too much for this project. So, I narrowed it down to parties in general. Parties all have a few things in common; a venue, invitations, entertainment, decorations, and food. Some parties use word of mouth or social media in lieu of printed invitations. Hired

performers are common, yet so are simple party games. This app allows the user to plan a party of any size and budget, and helps them stick to their plan.

The Result:After much exploration of event themed calculator possibilities, I settled on a party budgeting app called SmartHost. It assists the user in planning how they will spend their money on a party, track the current balance in relation to the target, and do the same for each category.

Overview

Research

Brainstorming

Development

Testing

Refinement

Final Product


Existing Calculator Apps

All-In-One Calculator app by Mindbox –

• Includes over 75 calculators & unit converters

• Math• Algebra• Geometry

• Unit o Area, length, weight,

temperature, speed, etc• Finance• Engineering• Health

o BMI, calories, body fat• Age calculator, days until next

birthday• Elapsed time

Final Countdown – Thangbom

• App and widget

• Counts down to events such as birthdays,

vacations, holidays, whatever• Counts up as well• Multiple countdowns at once• Share on social media• Syncs with other devices,

calendar

Construction Master Pro

• Looks like a standard calculator, but has many special buttons for construction:

• Pitch, rise, run, yds, feet, inch, length, width height, and much more

• Turns off with Home key. Backspace is a touch function on the number display

• Includes search feature with lots of help docs, tech support

MyFitnessPal app for Android

• Connected to myfitnesspal website account and database

• Log food and exercise• Calculates nutrients in foods

eaten by serving size• Displays pie chart of macro

percentages• Macros by percent compared

to daily goal• Tracks weight

Tip Calculator & Tipping Guide app for IOS

• Tipping/gratuity guide for US• Calculates tip before or after

tax• Splits bill for groups

• Tip rounding• Guide includes info for

multiple service industries• Tip guide covers 69 countries

Overview

Research

Brainstorming

Development

Testing

Refinement

Final Product


Overview

Research

Brainstorming

Development

Testing

Refinement

Final Product

Interfaces in General

By definition, and interface is “a point where two systems, subjects, or organizations meet and interact.” In our time, the word interface usually references the interaction between a computer, or other electronic device, and a person. It’s the way we communicate with a program or app.

• Linear User Flow o Specific beginning, middle, end o Complete one action with each

step• Progressive Disclosure

o Info or action only visible when needed

o Reduces cognitive overload o Improves comprehension

• Gestures with animation o Gesture based functions can be

hard to communicate to user o Animated hints help show what

to do• Content-Centered experience

o Decluttering• Remove noise• Prioritize relevant info (signal)

by putting content first o “Content over chrome” o Clear visual hierarchy• Strong visual signifiers

o Contrasting colors o Call-to-action buttons

• Full-screen Experiences o No more frames around screen o HD images and videos

• Vibrant Colors o Use colors to separate

categories of info• (color signifier)

• Emotional Experiences o Offer emotional feedback such

as a smile emoji for submitting a review

• Video o Short videos, live videos, short

attention spans o All content should be adapted

to portrait orientation because 94% of the time, mobile phones are used that way.

• Biometric ID o Face recognition over passcode

or fingerprint authentication• Conversational design

o Chatbots o Voice interface o Copywriting increasing in

importance to provide words for chatbots

• Advanced Personalization o User location based info o Adapting UX to person• Poor eyesight, colorblind• Font size• Sound level

• Track app usage and adapt

Interface Examples

Snapseed – Photo editor

• Large buttons• simple icons

• descriptive labels

Awesome Note 2

• Notes, diary, lists, audio notes, birthday reminders• Colors, icons, tab design, ICONS, bookmarks, numerical content indicator, lock icon• I can see what to do from the photo

Color by DisneyAdult coloring app• Pre-selected color

palate based on movie picture is from

• User friendly color selection

• Easy to understand visual effects menu

• Very cool!

Clips by Apple

• Video app with super simple interface

• High quality video, pinch/zoom in or zoom out as you record

• Automatic captioning syncs captions to your voice• Cool effects and editing options• Easy to use interface• Easy sharing


Overview

Research

Brainstorming

Development

Testing

Refinement

Final Product

1An example of using color as a signifier.

2This image shows Gesture Animation; simple instructions with animation that demonstrate how to use the app.

3Linear User Flow illustrates information with lines, showing the connection between point A and point B.

4An example of Progressive Disclosure. Instructions are revealed sequentially according to the progress the user has made in the app.

SIGNIFIERS

1

2

3

4


Overview

Research

Brainstorming

Development

Testing

Refinement

Final Product

Word ListsThe first brainstorming I did was just thinking of things that need to be calculated. I thought about things I calculate frequently, and that is just regular numbers on my phone calculator app. Then, I thought about my son’s upcoming wedding and how many

things there will be to calculate and keep track of. I thought of other everyday activities like cooking, hanging pictures, and dieting. I also thought about things my husband does in his job, like estimating. Then I thought of less common things like calculating planting dates and harvest yields for a garden, or tracking food storage quantities.

My two favorite ideas were the wedding calculator and an invoice calculator, because of my son’s wedding, and my daughter’s new

home business.


Overview

Research

Brainstorming

Development

Testing

Refinement

Final Product

Party Budget CalculatorThere are still a zillion elements to a comprehensive party budget. Since food is a party constant, and has a lot of individual items to consider, I am going to focus on party food for this app project.

It will be important to get the number of

guests, and the total available food budget. A main feature will be tracking how much money has been spent and how much is remaining.

The number of guests will be used to aid in quantity decisions and extended subtotals.


Overview

Research

Brainstorming

Development

Testing

Refinement

Final Product

Narrowing the ScopeThinking on paper helps me organize what I’m trying to do. My first intention was to organize the party items by category, so I was trying to determine the best way to do that, and names to give them. I realized that the scope was still too broad.

I decided to focus just on the menu for parties. For now I’m calling in MenuBudget just for lack of time to think of something

better.

This sheet shows my preliminary organization. The Shopping List looks too much like a spreadsheet; way too much for

an app screen. This really helped me divide the process into separate screens.


Overview

Research

Brainstorming

Development

Testing

Refinement

Final Product

First Draft SketchesImagining how the screens would need to look, what information needs to come first, which things go together.

The first thing the user needs to do is enter some information about their party; how many guests, what the target budget is, and

then what their menu will be.

After the budget, guests, and menu are established, then we can start on building a shopping list. The number of servings per package could be suggested by the app and edited by the user, or they can enter it in. This version makes it look like the list is ready to

take to the store, but it isn’t.

The user will enter the price per package. Ideally, this app would link to a store and pull prices from their database, but it would still need to allow the user to enter and edit.

The total is determined by the price, # of guests, and servings per package.


Overview

Research

Brainstorming

Development

Testing

Refinement

Final Product

Second Draft SketchesThis time, I added a title to each screen to help guide the user in what they’re doing. Party budget comes first, followed by # of guests. This shows the keypad input.

The second screen uses up and down arrows for inputting the unit price. Total and balance

are shown at the bottom, with an edit button.

The 3rd screen shows the final shopping list with quantities. I’m not sure how the unit type should be determined. Maybe it should just say “units”. There is an edit button and a back button, plus menu icon and settings icon just to see how they fit.


Overview

Research

Brainstorming

Development

Testing

Refinement

Final Product

Re-thinking the AppAs I tried to simplify my app design, I quickly realized that the approach I had taken was not going to work without be overly complicated. So, I switched gears back to my original idea for a party budget app. This way, I don’t have to deal with recipes, or serving sizes, or how much comes in a package.

This version focuses on the budget. The user inputs target budget amounts and prices for the items. The app keeps them on budget by

showing how much has been allocated, the amount spent, and how much remains to be used.

Pencil Sketches

The first screen shows the Party Profile page where you enter the info about the budget and how it will be allocated to each category.

Second, shows the Target Budget, Current total Balance, and a tab for each category with it’s current or remaining balance. From this page, you can access the category details, view the budget summary, or edit the

Party Profile.

Third is the food category detail. This screen allows you to enter budget items and prices, add, edit, and delete. It also shows the category total and remaining balance.

The pink sticky notes are sketches of the “add item”, “edit item”, or delete screens. They appear when the appropriate icon is clicked.


Overview

Research

Brainstorming

Development

Testing

Refinement

Final Product

Pencil Sketches ContinuedScreen 4 should be the last screen, oops. It shows a summary of expenditures for each category. The info doesn’t fit on the screen all at once, so a scroll arrow suggestion appears at the bottom. The edit icon returns user to the Party Budget screen (screen 2) where you

can go either to a category and edit, or back to the profile to edit.

Screen 5 and 6 are two more category detail pages.


Overview

Research

Brainstorming

Development

Testing

Refinement

Final Product

WireframesAfter user testing, I divided the profile page into two screens so it isn’t so squashed.

The Balance lines on screen 3 are a bigger font size. I added the line “Click tabs to view category detail” to clarify what the tabs are for, and I added “Remaining” below the

balance so that is clearer as well. The buttons at the bottom have added words to clarify their purpose.

The totals on screen 4 are higher and the category total and balance are bold and larger. When the “edit” or “delete” icons are clicked, the radio buttons will appear next to

the items. When the user clicks a button, they will be taken to the appropriate screen to edit or delete.


Overview

Research

Brainstorming

Development

Testing

Refinement

Final Product

Wireframes ContinuedThe first two of these screens were adapted from the sticky notes from pencil sketches. A keyboard is not required for the delete screen. The “Yes” and “No” buttons take the user back to the category budget screen.

The Party Budge Summary page is editable from the Party Profile. The edit icon leads to the first screen. Arrow button suggests that there is more to see and that the user should scroll.

A classmate suggested that I add a progress bar to this page to show the percentage of

funds used and remaining. I am working on doing that.


Overview

Research

Brainstorming

Development

Testing

Refinement

Final Product

Developing the PrototypeAfter testing the wireframes, and getting great feedback from classmates and Brother Fluckiger, I realized that there was more simplifying to be done.

A strong suggestion was made that I needed to eliminate the input boxes ala Microsoft. Apps don’t need to use the standard website method of little empty boxes for inputting whatever data is required. Human Centered Design suggests that the app only needs an

apparatus for the user to input that data in the simplest form that is clearly understood.

I retained a modified version of input boxes on the first party profile page because it suited the layout and I felt like they would focus the viewer’s attention on the first tasks.

For the other inputs, I used a grid that resembles an invoice, or a ledger-type sheet. This format makes sense for tabulating budget data and adding numerical information.

It also became clear that there was really no need for the “add item” icon and separate screens for adding and deleting items. Why not just add and delete directly in the space where the information appears? It is a natural way to make changes, much like we would with a pencil and eraser.

I did some study on how to create effective icons and which icons would best convey the correct actions they are associated with. For the welcome page, I looked at balloons, layer cakes, birthday candles, party tents, and party poppers. In the end, party poppers were the least specific icon that clearly indicated “party”. I ended up only using the icon on the first two screens.

Other icons were the standard edit pencil, and direction arrows. For the link to the overview, I first created a ledger icon. But that wasn’t quite was was needed. After

much pondering and some more exploration, I drew out a list icon that

gave a better indication of what to expect from the link. I also drew out a printer icon for the overview page.

Get Started screen uses input boxes.

Budget Categories screen is an example of the ledger-style format.


Overview

Research

Brainstorming

Development

Testing

Refinement

Final Product

Test OneScreen 1- User wondered if she needed a decimal.

Add amount per guest here.

Screen 2- No enter key!

Remove item process unclear

Add servings per person section here

Screen 3- Shopping item didn’t make sense. User suggested “Grocery Item”.

No enter key, again.

Screen 4- User understood clearly

Screen 5- User understood clearly


Overview

Research

Brainstorming

Development

Testing

Refinement

Final Product


Overview

Research

Brainstorming

Development

Testing

Refinement

Final Product

Test 2Shannon

Test two was Shannon, again. Since I had revamped my entire app, I used her again. She understood most of the app. She’s my daughter and understands how I think, so that probably helps. The only thing that confused her were the two buttons at the bottom of the Party Budget page. When I gave her the task of adding $50 to the total budget, she wasn’t sure where to go. She figured it out after a misstep or two.

As a result, I changed the words on the buttons from “View Summary” to “View Budget Summary”, and “Edit Party” to “Edit Party Profile”.

She successfully removed an item from the list and added a new item, and was able to

decide where to allocate the new funds.

Cassandra

Cassandra had a little more trouble. One big problem was the size of the image. The prototype wasn’t quite full screen size and some of the print was too small.

She had a harder time understanding what she was doing. I think maybe I need to add an explanatory screen with an overview of how the app works for first-time users. Once she got into it, she understood what to do.

Cassandra made a few suggestions for improvement. In response to her suggestion and one from a classmate, I changed the supplies category to miscellaneous. She also suggested that I make the total funds spent and balance larger and easier to read. I

intend to work more on this.

Tony

Tony is my husband and knew what the app was designed to do and the basics of how it works. another friend stood me up, so he was

the only person available to test.

As Tony tested the prototype, we discovered several link problems and places where I had not updated changes in all the appropriate places. He really did understand what he needed to do, but the limitations of the prototype confused him some. For example, the radio buttons seemed like a good thing to click on to edit, so he skipped clicking the actual edit button. For the final prototype, I will make sure that isn’t a problem.

Test 3Montanna

I had made significant changes by the time Montanna tested the prototype. It was nearly finished. In the process of explaining to her what I needed her to do, I realized that I needed to change the prototype to test an existing party, rather than a new party as it was currently. I ended up making it so the tester can do either new or existing party.

The only real sticking point for Montanna was after setting up the category amounts, it wasn’t really clear what to do next. I bolded the Target Budget line and changed the color to purple to remind the user of their goal, and changed the direction arrow at the bottom to an arrow with “done” in it to make the next action clearer.

Jeremy

Jeremy wanted to try everything! He really liked the app and had no trouble navigating any of it.

Jan & Margaret

I sent my sister Jan and my mom a jpeg of the Category Summary page and asked them what they would expect to see if they clicked on the “View All” list icon. They both said they would expect to see a breakdown of the budget items, which is exactly right.

Scenarios1. You are planning a birthday party and

have changed your mind. Use the app to delete ice cream and add chips to the budget.

2. Grandma has chipped in $50 toward the party for Joe. Use the app to increase the Target Budget by $50.

3. Use the app to decide where to allocate the extra money.


Overview

Research

Brainstorming

Development

Testing

Refinement

Final Product

Refinements included finalizing the color scheme to look like a party, but not too crazy of a party.

Refinements were made to the tabs and colors carried over to the overview to provide continuity and give some feedback.


Overview

Research

Brainstorming

Development

Testing

Refinement

Final Product

Prototype Link:

https://xd.adobe.com/view/0008d56d-5e14-4c60-7ecd-30a8fba0b062-7639/?hints=off

Presentation Video Link:

https://youtu.be/qbZ14Ly6tSg


Overview

Research

Brainstorming

Development

Testing

Refinement

Final Product

ActivitiesFeedback ActivityFor the feedback activity, I asked 3 people in addition to myself to try to tie a shoe, sign their name, and send a text message with their eyes closed.

Everyone was able to tie their shoes with no problems. We’ve been doing it so long, we could all do it in our sleep.

Signing our names was not a big problem, either. I did notice that the two of us who where significantly older did better than the two who were less than half our age. More experience, I think.

I had zero success in sending a text eyes shut. I eventually thought to try sending it by voice and was successful. My husband immediately thought of sending it by voice, I think because he does it while driving a lot on the job while driving.

My two younger subjects didn’t think of using voice, but they were amazingly successful at sending texts anyway with only very minor errors in what they intended to send. I’m really not sure how they did it. With no tactile feedback, they were using muscle memory I guess.

Back in the days of button keyboards, it was easier.

smarthost app - kristine hill design › wp-content › uploads › 2018 › ... · 2018-12-07 ·...

Documents