Digital Clipboard Design Specification

Digital Clipboard
A complete app design

Malorie Aaron
Digital Clipboard
A complete app design
Project Overview Requirements

This is a complete app design for Digital Clipboard. The application’s interface must be cohesive from
The design process for smart phone, tablet and one platform to another (aka they have to look like
desktop interfaces will be shown through out this the same app).
process book.
The user will enjoy using the app on any device.
The design process will involve research and
analysis of current applications and interfaces The interface is pleasing to interact with and has
that work well together. This project will explore natural mapping to make the entire experience
how people use technology to work together. The enjoyable for the user.
Digital Clipboard application will be an interface
system that can be applied seemlessly to different The interface system must be modular.
platforms and devices.
This process book will include the entire design

process starting with the research and insights of
pre-project work and activities. Next is concept
development and brainstorming (this will include
the first couple iterations of the interfaces and
functionality). Next, each iteration will undergo
user testing, analysis and refining. After many
iterations, the conclusion and final result of the
project will be presented along with a video of the
final interactive prototype of the application.
Digital Clipboard | A Complete Interface System Design
Table of Contents
5
Research
Brainstorming
8
Research
Interface Systems
9
Research
Competition
13
Activities
Interaction Principle
pg. 3 art 337r

Research
An App Interface System Design
Research | Digital Clipboard App Design
Research Brainstorming Ideas

Development
Possible App subjects
Testing - Video Editor
Conclusion - photo & video manager
Activities - recipe manager
- Quick photo editor
- Shadow Board maker (lean manufacturing)
- Note taker/ photo notes
Digital Clipboard (note taker)

My husband is a manufaturing engineer. He is often out
on the factory floor looking at something or taking photos
so that he can remember what things look like once he
gets back to his desk in the office.
It would be a very helpful tool for him and many others to

be able to take a photo with his smart phone or tablet and
add notes to that photo or draw on the photo to point out
a certain area. Then when he gets back to the office, he
can just pull open the application, sync it and have all his
photos, drawings and notes right there on his computer
ready to be refferanced. This would be a huge time saver
for inspectors and has many applications from an engineer
or inspector to a student taking notes in class.
pg. 5 art 337r

Research Interface Systems - Fitbit

Development
One of my personal favorite interface systems right now is
Testing the Fitbit application. I like how modular the application is
and how the user can personalize the different sections on
Conclusion their dashboard.
Activities
pg. 6 art 337r


Development
Testing
Conclusion
Activities
pg. 7 art 337r


Development
Testing
Conclusion
Activities
pg. 8 art 337r

Research Application Competitors - MS One Note

Development
Microsoft One Note is a useful and highly used application
Testing for note taking. The biggest problems with One Note os
the size of the application and the overloading of features.
Conclusion I had a professor that worked for Microsoft and said that
they had a huge problem with the number of features in
Activities their programs because the more features you have, the
harder it is to find the feature the user needs at any given
time.
One Noe replicates a notebook and has tabs for the

different sections in a notebook and more tabs on the right
for sections within the larger sections of a notebook. I
like how they can have different notebooks and sections
within that notebok, but the interface looks a bit older and
not super modular. Diital Clipboard will be a cleaned up,
beautiful, user friendly version of One Note.
pg. 9 art 337r


Development
Testing
Conclusion
Activities
pg. 10 art 337r


Development
Testing
Conclusion
Activities
pg. 11 art 337r


Development
Testing
Conclusion
Activities
pg. 12 art 337r

Development
Concept Development for Food Storage Tracker
Development | Digital Clipboard App Design
Research Persona - Smart Phone App

Development
Background:
Testing Robert is a Manufacturing Engineer at John Deere in Moline Illinois.
He was hired a year ago as a manufacturing Engineer and almost
Conclusion immediately got assigned to the continuous improvement team. As
part of his responsibilities, he helps to create shadow boards for
Activities different tools and pick offs. He is often bouncing between the office
and the factory floor to go look at something or take pictures of certain
tools. He often times will talk with the operators and get their opinions.
Objective:
Often times Robert will go out on the factory floor and snap some
pictures, inspect and measure tools and locations and get opinions
from operators. By the time he gets back to his desk, he has to
upload some of the pictures to his desktop and then look through his
scrambled notes on a small piece of paper.
Challenges:
Name: Robert Sanderson This process of transferring pictures and deciphering notes or
remembering what certain pictures or notes are pertaining to is often
time consuming. There are times when Robert will have to leave a
Age: 25 project for a few days in order to do something else and by the time he
gets back to that project, he can’t remember what his notes meant or
which pictures he needed. It would be really helpful for Robert to be
Home Town: Moline, Illinois able to go out on the factory floor and be able to take pictures and add
notes and even record conversations with his smart phone and then
be able to have all those notes compiled in a document that is editable
Profession: Manufacturing Engineer and accessible from his desktop. This would cut out a lot of wasted
time and confusion.
pg. 14 art 337r

Research Persona - Tablet App

Development
Background:
Testing Carine works for John Deere and is a regional supervisor for Lean
Manufacturing. She is often visiting the different facilities in her region
Conclusion to inspect, analyze and help improve each facilities implementation of
Lean Manufacturing.
Activities
Objective:
Carine will always bring her tablet with her when she visits a facility.
She takes tons of photos, makes lots of notes in a note taking app and
talks to a ton of people.
Challenges:
Like Robert, Carine often takes so many photos and notes in a day
that it’s hard to keep it all organized. She finds herself having to spend
a lot of time getting the notes and photos that go with each note and
compiling them into a document that she can share with coworkers,
the facilities management and her boss in headquarters.
Name: Carine Schultz
Age: 34
Home Town: Waterloo, Iowa
Profession: Lean Manufacturing

. Supervisor
pg. 15 art 337r

Research Persona - Desktop App

Development
Background:
Testing Frank is a John Deere Employee and has been for 20 years. He
has been working in Quality and Control for the last 15 years and
Conclusion is a senior quality and control engineer. Frank’s main office is in the
corporate headquarters building
Activities
Objective:
He usually does not find himself working out on a factory floor, but
does have several people under him that visit or work at the different
John Deere facilities in his district. Frank will get 5-10 emails a day
with peoples notes and improvement reports.
Challenges:
Each person that emails him their reports or notes formats it differently
and it takes Frank a lot of time to sort through the different reports and
figure out what is going on. It would be so much easier for Frank if he
could have all the people he’s over use the same format and clearly
Name: Frank Fisco identify what it is they are sending him.
Age: 45
Home Town: Moline, Illinois
Profession: Head Quality and Control

. Manager
pg. 16 art 337r

Research Senerios - Smart Phone App

Development
Senerio 1
Testing You are working on a new shadow board for dump truck division. You need to go out and take pictures of different tools for the engine work
station. You take a photo of each of the tools and add a note which says what the tool is and any other notes you need for that tools.
Conclusion
Activities Senerio 2
You then talk to an operator and he has a lot to say about how the tools are always out of place and he spend 5-10 minutes looking for a tool
because someone didn’t put it away properly. You think this operators frustration is a great example of why shadow boards are important.
Record the operator so that it will be a part of the note’s you are taking for that area.
Senerio 3
You just started working on another project and need to create a new notebook for that project, but still keep the other project notebook
available to use through out the week. (So you want two notebooks active).
pg. 17 art 337r

Research Senerios - Tablet App

Development
Senerio 1
Testing You just got to the DesMois facility and need to create a new notebook for your inspection here. You have a couple minutes before the lean
manufacturing personnel for that facility joins you. Add a title to identify that this notebook is for the Annual DesMois 5’s inspection.
Conclusion
Take photos of the areas that are working well and add notes about the things the facility has implemented to those areas that have
improved their efficiency.
Senerio 3
Take a video of an operator and include it in your notes. Add a note below the video about what is not working well in that operators area
and other points about resolving it or tag it as needing to be addressed.
pg. 18 art 337r

Research Senerios - Desktop App

Development
Senerio 1
Testing You just got into the office and open the Digital Clipboard app. You see that 3 of your supervisors have sent you the annual reports for 3
different facilities. Check to see which facilities have been shared with you and begin reviewing the documents.
Conclusion
You just got back from the meeting with all the supervisors. Everyone was adding notes during the meeting and you noticed that your had
spelled something wrong as you were reviewing the notebook. Edit your note and correct the misspelled word.
Senerio 3
You are having a meeting with all of the supervisors that you are in charge of. Make a new notebook for the meeting and share it with all
the supervisors so that everyone in the meeting can make notes in the notebook. (Create and allow all your supervisors to collaborate in a
notebook).
pg. 19 art 337r

Testing
User Testing and Analysis for Food Storage Tracker App
Testing | Digital Clipboard App Design
Research Sketches - Smart Phone

Development
Testing
Conclusion
Activities
pg. 21 art 337r


Development
Testing
Conclusion
Activities
pg. 22 art 337r


Development
Testing
Conclusion
Activities
pg. 23 art 337r

Research Sketches - Tablet

Development
Testing
Conclusion
Activities
pg. 24 art 337r


Development
Testing
Conclusion
Activities
pg. 25 art 337r


Development
Testing
Conclusion
Activities
pg. 26 art 337r

Research Sketches - Desktop

Development
Testing
Conclusion
Activities
pg. 27 art 337r


Development
Testing
Conclusion
Activities
pg. 28 art 337r


Development
Testing
Conclusion
Activities
pg. 29 art 337r

Research Round 01: Sketches

Development
Test 1 (Smart Phone)
Testing The user was able to add a new folder without any difficulties, however the next screen confused him a little bit because the way he added
a folder is not the same as how he adds a new note. It didn’t help that the sketches didn’t correspond very well with the senerio tasks. The
Conclusion user also was not sure what the icon at the bottom left would do. It’s to show you all the attachments in that folder (in all the notes).
Activities
Test 1 (Tablet)
The user was stumped during this test because there was actually no add new note button... Oops. He also was not sure what the sort by
icons were (list, gallery, etc) He said it would make more sense if it was larger/ full size. It would be useful to add a tag content feature to the
app.
Test 1 (Desktop)
The user was a bit confused when he got to the notes page. He was like, “well, it says I’m in the folder tab, so...” He figured it out after a few
seconds, but the fact that the user didn’t know where exactly he was is concerning.
pg. 30 art 337r

Research Round 01: Sketches Analysis

Development
Testing
Smart Phone - Refine add folder and note
Conclusion There was some confusion about adding a new note because it was not in the same location as the add new folder button.
Activities
Tablet - Add Button
Well, I suppose an add note button would be useful here. This is a perfect example of user testing helping you find the worst
problems really quickly.
Desktop - Naming Conventions

The user had a hard time understanding the naming conventions and why the main navigation was showing that He was in the
folders tab when he was actually viewing the notes page. I need to refine the main nav and organize it better.
pg. 31 art 337r

Research Round 02: Paper Prototype - Smart Phone

Development
Testing
Conclusion
Activities
pg. 32 art 337r


Development
Testing
Conclusion
Activities
pg. 33 art 337r


Development
Testing
Conclusion
Activities
pg. 34 art 337r

Research Round 02: Paper Prototype - Tablet

Development
Testing
Conclusion
Activities
pg. 35 art 337r


Development
Testing
Conclusion
Activities
pg. 36 art 337r


Development
Testing
Conclusion
Activities
pg. 37 art 337r

Research Round 02: Paper Prototype - Desktop

Development
Testing
Conclusion
Activities
pg. 38 art 337r


Development
Testing
Conclusion
Activities
pg. 39 art 337r


Development
Testing
Conclusion
Activities
pg. 40 art 337r

Research Round 02: Paper Prototype

Development
Smart Phone
Testing The user seemed to do alright with the smart phone app. He mentioned that it is a little hard because he can’t just tap on an icon and see
instantly what it does. This is a limitation of paper prototypes.
Conclusion
Activities Tablet
The user said that everything felt super large, like it was meant for kids or people who couldn’t see very well. The user brought up that the
word folder seemed more like a filing cabinet not a clipboard and recommended that I call them just notes or maybe notepads.
Desktop
The user seemed to take a few seconds longer to get himself grounded as he went from the folders page to the individual notes page. After
talking to him about it, we concluded that the way that the items are presented is just a bit too different from the folders page to the notes
page and it causes the user to have to try and figure out where he is at.
pg. 41 art 337r

Research Digital Prototype 1 - Smart Phone

Development
Testing
Conclusion
Activities
pg. 42 art 337r


Development
Testing
Conclusion
Activities
pg. 43 art 337r

Research Digital Prototype 1 - Tablet

Development
Testing
Conclusion
Activities
pg. 44 art 337r


Development
Testing
Conclusion
Activities
pg. 45 art 337r

Research Digital Prototype 1 - Desktop

Development
Testing
Conclusion
Activities
pg. 46 art 337r


Development
Testing
Conclusion
Activities
pg. 47 art 337r

Research Round 03: Digital Prototype 1 Analysis

Development
Testing
Smart Phone
Conclusion Based on the user testing for the smart phone digital prototype, I found that the user had to try a few things out/ ask what a few of
the buttons did. For example, the user wasn’t quite sure what the sort icons were depicting. I have yet to discover a convention for
Activities sorting content by icons on a smart phone. I may have to teach the user what they do, and if they never try it, it will not affect their
use of the app. I will have to test and ask users which sorting view they like best ( list form, list with image or tile form).
Tablet
The tablet had a lot of the same usability issues and the smart phone. This could very well be that it’s sort of a mix between the
desktop and the smart phone versions of this app.
Desktop
The user really likes the desktop app. It seemed to be the easiest for the user to grasp. I noticed that the user had an easier time
with the organization of the app when she could see the words describing the link, where as on the smart phone if the user didn’t
know what an icon represented, she would have to try it and see.
pg. 48 art 337r


Development
Testing
Conclusion
Activities
pg. 49 art 337r


Development
Testing
Conclusion
Activities
pg. 50 art 337r


Development
Testing
Conclusion
Activities
pg. 51 art 337r


Development
Testing
Conclusion
Activities
pg. 52 art 337r


Development
Testing
Conclusion
Activities
pg. 53 art 337r


Development
Testing
Conclusion
Activities
pg. 54 art 337r


Development
Testing
Conclusion
Activities
pg. 55 art 337r


Development
Testing
Conclusion
Activities
pg. 56 art 337r


Development
Testing
Conclusion
Activities
pg. 57 art 337r


Development
Testing
Conclusion
Activities
pg. 58 art 337r

Research Round 04 & 05: Digital Prototype 2 Analysis

Development
Testing
Smart Phone/ Tablet
Conclusion I’ve gathered that the user really needs more signifiers to communicate where he should click. I asked the user to create a new
note from the smart phone and tablet and he instantly clicked in the plus icon at the top of the screen. I do not have this function
Activities implemented in the interactive digital mock up, but we discussed what he would expect. I think the most user friendly option will be
to have a pop up dialog box that asked for the title of the new note. Then the user hits done and they are brought to a page where
they begin to add stuff to the note.
In the next round of user testing, I asked the user to edit an existing note. She hesitated for a moment and then taped the title of the
note. I asked her why she hesitated and she said that she wasn’t sure if the edit button at the top of the My Notes screen was to
edit a note or what. I need to think about how to make this less confusing for the user.
Desktop
The first user was a bit confused as to what to click on first when he saw the dashboard. He looked around the whole page for a bit
and then decided to click on the My Notes tab. After that he was able to identify the last sync time and other info for each note and
how to edit it. He figured out how to delete a note and I asked if he would find it helpful to be able to delete several notes at once.
He said it really wouldn’t be a necessary feature for him.
The second user Had a hard time finding the save option for the note she “edited”. She said that it might be nice if it auto saved like
Google docs, but that she also liked that if she manually saved it, she knew for sure that it saved. I think the menu that contains the
save option would be better as a horizontal nav of icons at the top of the page. This would allow the user to access it quicker and
make it easier to find.
pg. 59 art 337r

Digital Clipboard Design Specification

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Digital Clipboard Design Specification

Caricato da

Copyright:

Formati disponibili

Digital Clipboard

A complete app design

Project Overview Requirements

This process book will include the entire design

pg. 3 art 337r

Research Brainstorming Ideas

Conclusion - photo & video manager

Activities - recipe manager

- Quick photo editor

- Shadow Board maker (lean manufacturing)

- Note taker/ photo notes

Digital Clipboard (note taker)

It would be a very helpful tool for him and many others to

pg. 5 art 337r

Research Interface Systems - Fitbit

pg. 6 art 337r

Research Interface Systems - Fitbit

pg. 7 art 337r

Research Interface Systems - Fitbit

pg. 8 art 337r

Research Application Competitors - MS One Note

One Noe replicates a notebook and has tabs for the

pg. 9 art 337r

Research Application Competitors - MS One Note

pg. 10 art 337r

Research Application Competitors - MS One Note

pg. 11 art 337r

Research Application Competitors - MS One Note

pg. 12 art 337r

Research Persona - Smart Phone App

pg. 14 art 337r

Research Persona - Tablet App

Home Town: Waterloo, Iowa

Profession: Lean Manufacturing

pg. 15 art 337r

Research Persona - Desktop App

Home Town: Moline, Illinois

Profession: Head Quality and Control

pg. 16 art 337r

Research Senerios - Smart Phone App

pg. 17 art 337r

Research Senerios - Tablet App

pg. 18 art 337r

Research Senerios - Desktop App

pg. 19 art 337r

Research Sketches - Smart Phone

pg. 21 art 337r

Research Sketches - Smart Phone

pg. 22 art 337r

Research Sketches - Smart Phone

pg. 23 art 337r

Research Sketches - Tablet

pg. 24 art 337r

Research Sketches - Tablet

pg. 25 art 337r

Research Sketches - Tablet

pg. 26 art 337r

Research Sketches - Desktop

pg. 27 art 337r

Research Sketches - Desktop

pg. 28 art 337r

Research Sketches - Desktop

pg. 29 art 337r

Research Round 01: Sketches