sciencehelper
01 INTRODUCTION
Project Brief
Problem Statement
Traditional educational methods of text and 2-dimensional models
do not support a complete visual conceptualization and understanding
of atomic structure. Students and casual learners alike struggle to
comprehend the spatial composition, motion, and interaction of atoms.
MY APPROACH
I will design an interactive tablet application that will allow users to
learn fundamental atomic structures and principles through play
and experimentation. Users will manipulate 3-dimensional models
and animations for an enhanced learning experience.
Kelly Hurlburt
User Experience & Visual Design
Chemistry Education App
02 RESEARCH
Competitive Analysis
Virtual Chemistry App
Purpose
Portable chemistry lab for tablet that allows the user to conduct
chemistry experiments and experience chemical reactions without
the real mess. Users can mix chemicals in beakers and tubes, heat
chemicals with bunsen burners, test acidity, and more. App is designed
for deeper learning without the safety risks.
Strengths
Objects are rendered 3-dimensionally, allowing the user to move and
use objects just as they would in real life, thus creating a more
realistic learning experience
Represents accurate mass, density, temperature, and volume
Allows the user the option to view the chemical reactions with or without
explosions
Multiple users can work together to perform experiments
Perceived Weaknesses
Users complain that many of the features do not function properly
Not transferrable to a mobile experience
Number of elements and experiments are limited
Kelly Hurlburt
User Experience & Visual Design
Chemistry Education App
02 RESEARCH
Competitive Analysis
Molecule 3D
Purpose
Molecular viewer that displays the molecular structure of organic
chemistry structures. Allows users to understand the spacial structure
of complex molecules like amino acids, hormones, proteins, etc. Offers
several different views.
Strengths
Focuses on doing on specific function
Limited functionality makes the included functionality easy to use
and understand
Black background contrasts the model and clearly emphasizes the
model as the most important element of the app
Perceived Weaknesses
No search function, meaning the users have to scroll through the over
300 molecules in the database to find their desired molecule
Does not display any basic molecule information, only shows the
molecule model itself
3D model does not appear to be interactive, which is a missed opportunity;
appears to rely on various views and mirrored effects to display the model
from different angles
Would have to assist teaching; could not a learning tool on its own
Kelly Hurlburt
User Experience & Visual Design
Chemistry Education App
02 RESEARCH
Competitive Analysis
Molecule
Purpose
Interactive learning app that allows the user to drag and drop elements
to create molecule. Users can view information about the molecules
created like melting point and boiling point.
Strengths
Clean, flat design
Encourages learning through experimentation and trial and error
Appears to be pretty straightforward, simple, and easy to use
Allows user to search molecules
Perceived Weaknesses
Molecules formed represented only 2-dimensionally
Does not appear to supply that much actual information about the
elements and the molecules created
Kelly Hurlburt
User Experience & Visual Design
Chemistry Education App
02 RESEARCH
Competitive Analysis
3D Chemical Bonding
Simulation
Purpose
Allows users to explore different bonds and secondary forces. Users
can manipulate particles physically by clicking and dragging them
around or by moving the sliders to control electronegatively. Also
displays electron behavior.
Strengths
Buttons and sliders are large and easy to use
Simple
Perceived Weaknesses
Interface and 3D renderings lack polish; feel very basic
and unsophisticated
Perspectice of 3D shapes is strange
Sliders are unlabeled, making it unclear what they are controlling
Doesn’t appear to give any factual information about the different kinds
of bonds or about the different kinds of secondary forces
Kelly Hurlburt
User Experience & Visual Design
Chemistry Education App
02 RESEARCH
Market Analysis
Design Trends
Gamification
Increase engagement by applying elements of
game play to non-game applications and
processes
Construct challenges or tasks for the user
utilizing topic content
Provide positive reinforcement or reward for
completing a challenge or task
Empathy-based approach
Examples of gamification include achievement
badges, progress bars, virtual currency, etc.
Kelly Hurlburt
User Experience & Visual Design
Progressive Disclosure
Maintain focus of user by reducing the
amount of content displayed at once
Reduce cognitive workload and minimize
confusion and overwhelment
Sequence information and actions across
several screens, revealing only the essentials
when they are needed
Helps the user manage the complexity of
feature-rich applications and/or complex
content
Typically moves from abstract to more specific
Minimalism
Generous and purposeful use of negative space
Limited color palette with powerful accent colors
Brings simplicity to complex content
Clarity and organization
Leads audience to decisions and prevents the
overwhelment of too many choices
Maximum signal and minimum noise
Removes unnecessary elements, placing the
emphasis on essential information
Sophisticated aesthetic
Chemistry Education App
02 RESEARCH
Market Analysis
Design Trends
3D Interaction
Users able to able to move and manipulate
objects in 3-dimensional space
Virtual space replicates physical space
Direct-hand manipulation through touch
interactions
Gives the user better spacial understanding
of objects in comparison to 2-dimensional
representation
Relies on interactive surface like a touch screen
or physical hardware to control motion
Kelly Hurlburt
User Experience & Visual Design
Ethereal aesthetic
Characterized by purity, lightness, and space,
softness, simplicity, and delicate lines
Closely tied to concepts of beauty and
sophistication
Gives content to appearance of being heavenly
or otherwordly
Presents soothing and calming tone
Often coincides with minimalism
Objects may float in 3-dimensional space
Juxtaposition of Organic
and Geometric
Graphics are both fluid and mathematical
Contrasts curved and smooth organic forms
with precise and regular geometric forms
Often used in conjunction with minimalism
and ethereal design
Particulary suited to topics of space, nature,
and abstraction
Visual interest
Plays to the interaction of the left and right brain
Chemistry Education App
02 RESEARCH
User Persona
Jeremy Buckner
Bio
Jeremy is an outgoing and busy high school student. He loves playing sports and is on his school’s varsity
basketball and baseball teams. Both teachers, Jeremy’s parents but a lot of pressure on him to do well in school.
Jeremy is really hoping he’ll get a scholarship to play baseball in college, but just in case, he works hard to
maintain at least a B in all of his classes. Science and math have never been Jeremy’s best subjects, so he
sometimes visits his teachers for extra help before practice. Jeremy learns best through visual and kinesthetic
teaching methods, and gets easily frustrated by wordy textbooks. When Jeremy’s not in school or on the field,
he loves hanging out with friends and playing video games.
“Did you see that triple play the
Yanks made last night?!”
AGE
16
OCCUPATION
Sophomore high
school student
LOCATION
New England
STATUS
Single
Active
Social
Athletic
Motivations
Do well enough in school that his parents won’t bug him
Have a high enough GPA to get into a decent college
Appear smart but not nerdy to peers (especially girls)
Goals
Pass chemistry and geometry with a B+
Find a more fun way to study for chemistry tests
Finish homework efficiently to maximize free time
Technology
Primarily uses his iPhone for Instagram,
Snapchat, and checking MLB scores
Family shares an iPad
Just got his first laptop for Christmas
Digitally native; doesn’t remember a life
without the internet or cell phones
Brands
Outgoing
Friendly
Frustrations
Reading textbooks or long paragraphs is too time consuming
Immediately writes off slow or broken apps
Not sure how knowing chemistry is relevant to his life
Kelly Hurlburt
User Experience & Visual Design
Chemistry Education App
02 RESEARCH
User Persona
Hannah Johnson
Bio
Hannah is in her second semester of freshmen year in college. Even though it doesn’t pertain to her major,
she’s currently taking an Intro to Chemistry class to fulfill her general science requirement. Hannah doesn’t
remember anything she learned from high school chemistry and could really use a quick refresher. Hannah is
an active student on campus, working in the cafeteria, acting as secretary for yoga club, and consistently
making the Dean’s List. Hannah doesn’t have a lot of down time, but when she does, she likes to de-stress by
hanging out with friends and watching Netflix. Hannah plans on going to grad school after she finishes her
undergraduate degree.
“I meant to watch one episode,
but accidentally binge-watched
the whole third season.”
AGE
19
OCCUPATION
Freshman college
student
LOCATION
Midwest
STATUS
In a relationship
Responsible
Sweet
Kelly Hurlburt
Shy
Studious
Optimistic
User Experience & Visual Design
Motivations
Needs a minimum GPA to keep her academic scholarship
Wants to make her parents proud
Genuinely enjoys learning
Goals
Maintain a good enough GPA to get into grad school
Pull less all-nighters than first semester
Have a good school, work, and social balance
Technology
Primarily uses his iPhone for Instagram,
and Facebook messenger
Uses her iPad for e-textbooks
Uses her laptop primarily writing papers and
streaming Netflix
Grew up using Apple products
Brands
Frustrations
Doesn’t have time for ineffective user experiences
Subconsciously notices poor visual design
Feels anxious when confronted with a lot of new information
Chemistry Education App
02 RESEARCH
User Stories
User Stories
Jeremy Buckner
As a highschool student, I want information to be shown
in a fun and cool way so that I don’t even realize that I
am learning school stuff.
As a casual gamer and competitive person, I want the
game to get harder as I go so that it stays interesting.
As a student, I want visuals so that I can understand
things better than reading in a textbook.
As a casual gamer, I want an app that saves my progress
so that I don’t have to do the same things again.
As a student who sometimes forgets things, i want
repetition to help me remember important concepts.
Hannah Johnson
As a conscientious student, I want an explanation when I
make a mistake during educational game play, so that I
don’t make the same mistake again.
As a busy person, I want hints so that I don’t get stuck on
certain aspects of a game for too long.
As a smart user, I want an experience that is intuitive so
that I don’t have to waste time figuring stuff out.
Kelly Hurlburt
User Experience & Visual Design
As a college student, I want an app that treats me like I
am intelligent so that I can learn things that I’ve forgotten
without feeling stupid.
As a busy college student, I sometimes want to be able
to just read information to learn instead of spending
awhile playing a game.
Chemistry Education App
03 UX DESIGN
Work Flows
App Workflow
Kelly Hurlburt
User Experience & Visual Design
Chemistry Education App
03 UX DESIGN
Kelly Hurlburt
Work Flows
User Experience & Visual Design
Chemistry Education App
03 UX DESIGN
Kelly Hurlburt
Sketches
User Experience & Visual Design
Chemistry Education App
03 UX DESIGN
Concept Models
Pick an element
Write the Electron Configuration
Choose the first orbital
Draw the orbital
Draw the orbital
Add the electrons
Add the electrons
Choose the second orbital
Congrats!
You made NEON
Kelly Hurlburt
User Experience & Visual Design
Chemistry Education App
03 UX DESIGN
High-Fi Wireframes
HEADER
UTILITIES
Electron Configuration
Lists chapter name; acts as back
navigation to the main menu
Tap to explore personal profile or
expand hamburger menu of
additional functions/options
VIDEO SCREEN
Plays short educational video
on lesson topic; tap to pause
SKIP TO EXERCISE
SKIP
Tap to proceed to skip video and
proceed to lesson exercise
Kelly Hurlburt
User Experience & Visual Design
Chemistry Education App
03 UX DESIGN
High-Fi Wireframes
Electron Configuration
WATCH LESSON
WATCH BUTTON
STEP TITLE
Select an element
Instructs user as to what needs
to be accomplished in this step
15
P
Phosphorus
36
Kr
Krypton
26
Tap to return to educational
video at any point during the
exercise; current exercise progress
will automatically be saved
10
50
Fe Ne Sn
Iron
Neon
Tin
ELEMENT CAROUSEL
Tap an element from the
carousel to begin gameplay;
Already completed elements will
be represented in full color while
unfinished elements will be
represented as a wireframe
Kelly Hurlburt
User Experience & Visual Design
Chemistry Education App
03 UX DESIGN
High-Fi Wireframes
Electron Configuration
WATCH LESSON
Write the electron configuration formula
ELECTRON
CONFIGURATION
1s 2s
2
Cursor prompts user to type
electron configuration into
empty text line
2
PERIODIC TABLE
10
Ne
ELEMENT
Displays atomic number to
aid user in writing the correct
electron configuration while
providing association with
the specific element
Selected element is highlighted
in table for user reference;
table fills with selected elements
as the user types in an electron
configuration inclusive of those
elements with the blocks of the
periodic table
Neon
Example:
When the user types in 1s2, the
two elements in the first s block
will become selected
KEYBOARD
Keyboard is modified to only
include the letters an
numbers that would be used
in an electron configuration
Kelly Hurlburt
0
User Experience & Visual Design
1
2
S
P
F
D
3
4
5
6
7
8
9
Chemistry Education App
03 UX DESIGN
High-Fi Wireframes
Electron Configuration
PERIODIC TABLE
WATCH LESSON
Choose the first orbital
Shown for reference
10
Ne
Neon
1s 2s 2p
2
2
6
ORBITALS
ELEMENT
ORBITALS
Shown for reference; serves as
back button to element selection
Tap to select the correct orbital
shape for the current block;
orbital is then added to the atom
ELECTRONS
ELECTRONS
Displayed in columns of electrons
with up and down spins; only 10
electrons displayed at once;
electrons continually populate
until the total numbers of electrons
have been displayed or used
Kelly Hurlburt
User Experience & Visual Design
ATOM
Follow instructions to add the
correct orbitals and electrons to
create a completed atom
User can physically rotate and
manipulate the 3D atom to view
it in multiple perspectives
Chemistry Education App
03 UX DESIGN
High-Fi Wireframes
Electron Configuration
WATCH LESSON
Add the electrons
10
Ne
Neon
1s 2s 2p
2
2
6
ORBITALS
ELECTRONS
ELECTRON
Click and drag to trampoline
TRAMPOLINE
Bounce electrons off of corner
trampoline at correct angle and
speed to insert electrons into
the orbital
Kelly Hurlburt
User Experience & Visual Design
Chemistry Education App
03 UX DESIGN
High-Fi Wireframes
Electron Configuration
WATCH LESSON
Add the electrons
10
Ne
Neon
1s 2s 2p
2
2
6
ORBITALS
ELECTRONS
ELECTRON
As electron enters the
‘membrane’of the orbital,
it is either accepted or
rejected based science rules
Kelly Hurlburt
User Experience & Visual Design
Chemistry Education App
03 UX DESIGN
High-Fi Wireframes
Electron Configuration
REWARD SCREEN
Congrats users after the have
successfully completes all of the
steps to build the atom
WATCH LESSON
Congratulations!
REPEAT
PLAY
AGAIN
Tap to return to the element
selection screen to begin another
round of the exercise
ATOM
Completed atom continues
to allow user to manipulate it
in 3D space
You’ve made
NEON
Kelly Hurlburt
User Experience & Visual Design
Chemistry Education App
03 UX DESIGN
High-Fi Wireframes
Electron Configuration
WATCH LESSON
Add the electrons
10
Ne
Neon
POP-UP REMINDER
Modal appears when user has
made a scientific error; Reminder
modal reiterates the specific
rule that the users have broken
ELECTRONS
RESUME
1s
2s
2p
Oops! Don’t forget
2
2
6
ORBITALS
Hund’s Principle
When filling sublevels other than s,
1 electron must be placed in each orbital
before 2 electrons are paired together.
GOT IT, THANKS!
Tap to return to gameplay
Kelly Hurlburt
User Experience & Visual Design
Chemistry Education App
04 UI DESIGN
Moodboard
Mood
Highly-rendered
Ethereal
Spacey
Minimal
3-Dimensional
Kelly Hurlburt
User Experience & Visual Design
Chemistry Education App
04 UI DESIGN
Styleboard
STYLE
Use of gradients
Dark with bold
pops of color
Subtle details
Simplified
HUD look
Depth
Kelly Hurlburt
User Experience & Visual Design
Chemistry Education App
04 UI DESIGN
Kelly Hurlburt
Visual Comps
User Experience & Visual Design
Chemistry Education App
04 UI DESIGN
Kelly Hurlburt
Visual Comps
User Experience & Visual Design
Chemistry Education App
04 UI DESIGN
Kelly Hurlburt
Visual Comps
User Experience & Visual Design
Chemistry Education App
04 UI DESIGN
Kelly Hurlburt
Visual Comps
User Experience & Visual Design
Chemistry Education App
04 UI DESIGN
Kelly Hurlburt
Visual Comps
User Experience & Visual Design
Chemistry Education App
04 UI DESIGN
Kelly Hurlburt
Visual Comps
User Experience & Visual Design
Chemistry Education App
04 UI DESIGN
Kelly Hurlburt
Visual Comps
User Experience & Visual Design
Chemistry Education App
04 UI DESIGN
Kelly Hurlburt
Visual Comps
User Experience & Visual Design
Chemistry Education App
04 UI DESIGN
Kelly Hurlburt
Visual Comps
User Experience & Visual Design
Chemistry Education App
05 PROTOTYPE
Prototype Statement
PROTOTYPE STATMENT
For my prototype, I will create a self-running animation that
demonstrates a user’s experience selecting a lesson and
completing a full exercise from that example chapter.
My wireframes and visual comps were designed to follow the specific use
case of selecting the electron configuration lesson and completing an
exercise from this lesson by building a neon atom. In essence, I proactively
built the storyline for the prototype through the comps themselves.
VISUAL STORYBOARD
01 - User selects main chapter
Kelly Hurlburt
User Experience & Visual Design
02 - User selects sub-chapter
03 - User selects lesson
Chemistry Education App
05 PROTOTYPE
Prototype Storyboard
04 - Lesson video begins; user skips to exercise
05 - User selects element to build
06 - User types electron configuration
07 - User selects first orbital
08 - User adds first electron
09 - User adds second electron; wrong spin
Kelly Hurlburt
User Experience & Visual Design
Chemistry Education App
05 PROTOTYPE
Prototype Storyboard
10 - Error modal displays; user taps to resume
11 - User adds correct second electron
12 - User selects second orbital
13 - User adds two electrons successfully
14 - User selects third orbital
15 - User adds first electron
Kelly Hurlburt
User Experience & Visual Design
Chemistry Education App
05 PROTOTYPE
Prototype Storyboard
16 - User adds electron to wrong sub-orbital
17 - Error modal displays; user taps to resume
18 - User adds five electrons succesfully
sciencehelper
19 - Success screen
Kelly Hurlburt
User Experience & Visual Design
20 - Credits
Chemistry Education App