Ryan Williams | Miljo App Design
n. (Norwegian BokmĂĽl) the environment
Ryan Williams | Miljo App Design
Core Concept
The Miljo app makes it easier for students to learn about the natural world and human impacts on the environment by encouraging fun, self-paced exploration that goes beyond the textbook.
Ryan Williams | Miljo App Design
Student Interviews Interview 1
Interview 2
Age: 13
Age: 12
Gender: Female
Gender: Male
Interests: I like marching band and being with my friends there, and I like messing around with technology. I do a lot on computers and try downloading new softwares and learning how to use tech.
Interests: I like hanging out with my friends and talking about things that we like. Science class is fun and also sometimes history class.
Learning Challenges: I struggle with focusing in the classroom particularly because the materials aren’t interesting and there isn’t any stimulation. I’m a visual learner so it’s helpful to have things to do and look at and we don’t get that a lot. Learning Motivations: I like reaching towards a goal by the end of the year, so if there was some kind of motive to have me keep working towards the end then that would help. Visual learning is really helpful in keeping me interacting with what I’m learning. Dreams: I want to go to college, obviously. I’m not sure what I want to do as a job when I’m an adult but I would prefer to do something outside of an office, out in nature or something creative. Available Devices in the classroom: Chromebooks, 30 per class so that every student has one and must stay in the classroom, SmartBoard. Primary Forms of Communication: Computer via emails, or phone texting and calling. Preferred Learning Environment: (quiet/loud, alone/group, reading/hearing/making, etc.): Small amount of people, hushed talking but not super loud. Describe a moment in the classroom in which you felt particularly good about learning: I had one of the best teachers ever in 8th grade, and I really enjoyed how he taught because he explained things in a more down to earth level and used technology in the right way. He only used it when it was helpful to his lesson and not just because he had to use it. Describe a moment in the classroom when you felt particularly discouraged about learning: A lot of times with a test I feel stressed and discouraged, and back when we didn’t have that much technology it was hard to get things done like we can now. Do you use textbooks in your classroom? For what purpose? We have textbooks and can take them home, but we don’t use them as much as we used to. We have this thing called Google Classroom where they tell us the assignments on there like uploading worksheets or posting math problems, and sometimes they put links and website for other classes.
Ryan Williams | Miljo App Design
Learning Challenges: I struggle with math and reading a lot because I don’t understand what the teacher is teaching me, or I can’t keep up with the pace of the class. Learning Motivations: I am motivated to learn when it’s a subject that I like or one that is being taught well. Understanding what the teacher is telling me is important. Dreams: I want to probably be a scientist or something similar when I grow up, maybe even play sports. Available Devices in the classroom: Our classroom has 4 computers in it and the teacher has a Smartboard and a computer, but that’s it. We can go to the computer lab down the hall if we all need to do something on the computer but the teacher has to reserve a time and sometimes it’s taken when we need it. Primary Forms of Communication: Texting and talking to my friends, I don’t really use anything else especially not talking on the phone. Preferred Learning Environment: (quiet/loud, alone/group, reading/hearing/making, etc.): I like learning with other people around but I don’t like it to be too loud. Working with other people is fun but sometimes we don’t get all of our work done in time and some people don’t do what they should. Describe a moment in the classroom in which you felt particularly good about learning: I feel good about learning when I understand what the teacher is teaching or when I have that moment when what they’re talking about clicks in my head and I finally understand what they’ve been talking about, especially in math. Describe a moment in the classroom when you felt particularly discouraged about learning: I feel discouraged when I don’t understand what everyone is learning and I can’t get the help that I need. Do you use textbooks in your classroom? For what purpose? We do sometimes when the teacher wants us to do a reading or we look at images in the books, otherwise, we usually use things like videos and websites now.
Personas: User Stories Samantha Jones “As a student, I want to complete my homework at my own pace, so that I can digest the material and take notes.”
Bobby Garcia “As a student, I want my homework to be engaging and exploratory, so that I can focus and get it done.”
Ryan Williams | Miljo App Design
Persona: User Journey 1
Samantha Jones Basic Info Age: 13 Gender: Female Grade: 7th Occupation: Student Location: Cornerville Middle School, Missouri
Teacher Assigns Homework
2
Samantha Goes Home
3
Samantha’s teacher assigns homework to the students, and Samantha becomes worried because the teacher says that they will be using an app to learn about the biomes of the world. She’s nervous that she won’t understand the technology and fall behind in class.
At home, Samantha downloads the Miljo app and sees that it’s eas to set up. She signs into an account with the information that her teacher gave her and sets up her profile. She is glad that the app is on her iPad as she more confident in using her iPad than other technology.
As Samantha gets started, she finds that navigating to the homework is easy. She sees that the work she needs to do is indicated with an “assigned” notification. She completes the challenge and learns about how humans have impacted the ocean. She is upset by how much pollution is in the ocean and is interested to learn how she can help clean it up.
Mood: Nervous, questioning
Mood: Normal
Environmental Impact Challenge
Mood: Excited about interactivity in the challenge
4
5
6
Learning Environment: structured group environment while everyone is quite and working independently, or on her own at home
Bobby moves on to the reading assignments, after looking on his iPhone to see that he has earned some iMessage stickers for his work in the challenge. When his friend texts him with a question about the homework, he responds with a sticker of a water bottle from the zone as a joke. Once he begins reading and gets the hang of using the interface, he is able to fly through the homework. Although he doesn’t like reading, he likes that the app allows him to read in small bursts and in his own order.
As he reads, Bobby realizes that he should be taking notes to look at later. He uses the Miljo menu to pull up the notepad and write with his schoolprovided Apple Pencil. He likes that the surface has palm rejection and color management so that he can take notes that he can remember. He also likes that he can drag and drop whole sections of the text from the reading into the notes so that he can look at it later without finding the specific reading again.
After Bobby has read everything that he needs to read and completed all of his objectives, he receives a notifcation telling him that he is finished and that he has earned a Miljo badge. He returns to the homescreen to see that the badge has been added to the ocean biome and that the next ngiht’s homework has unlocked. He is glad that he is done, but he is content with the homework because it was so easy and interactive that he was able to breeze through it almost painlessly, for the first time in a while.
Learning Struggles: pressure for mastery in short time and needing to discuss materials
Mood: Happy reading at own pace and completing things
Samantha is a hard working student, but sometimes she struggles with keeping up with the rest of the class. She is usually busy with extracurricular activities, as she’s interested in sports, socializing with friends, and science.
Learning Learning Styles: visual and kinetic
Ryan Williams | Miljo App Design
Moves to Reading Assignments
Taking notes
Mood: Actually enjoying taking notes for once
Finishing Reading
Mood: Content, glad to be finished with homework
Persona: User Journey 1
Bobby Garcia Basic Info Age: 14 Gender: Male Grade: 7th Occupation: Student Location: Winter Garden Middle School, Florida Bobby is a mediocre student who usually doesn’t feel like doing his school work. He prefers to focus on video games and using technology at home. He has a few friends who he is in constant contact with, usually when they are making plans to hang out or play video games together.
Learning Learning style: auditory and visual Learning Environment: structured group environment while everyone is quite and working independently, hates homework that is too long Learning struggles: easily distracted when things don’t interest him or engage him.
Ryan Williams | Miljo App Design
Teacher Assigns Homework
2
Bobby Goes Home
3
Bobby hates doing homework so he is annoyed by the assignment, but he is interested in the idea of using an app to learn. He hopes that it is more like a game and less like a written or long form reading assignment, because he gets easily distracted while reading a ton of text in a book or having to write a lot.
At home, Bobby downloads the Miljo app from the app store and gets started using it. He sets up his profile with his normal photo and gets started figuring out how to use the app. As he is interested in technology and animation with video games, he enjoys the animations in the app because they add more interest to the interactions and keep him engaged.
Bobby sees that he has assignments to completed because the bar underneath the Intertidal Zone is at 0%. He opens the assignment and first sees a challenge that he must complete. He is excited, as the challenge involves doing things in the zone beyond just reading, like dragging and dropping and interacting with organisms.
Mood: Appreciative of the app design and ease of use
Mood: Upset with pollution, ready to help clean up
4
5
6
Once she has completed the environmental impact challenge she moves on to reading. She loves the iMessage stickers that she received after completing the challenge and will send them to her friends to show them that the app connects to her phone and to talk about pollution. As she starts to read, she enjoys the fact that she can go at her own pace and explore the organisms in the zone, but also that there is some structure to the assignment as she has objectives to complete. This helps her to stay on track.
Samantha’s mom calls her for dinner so she has to leave the iPad for a while. When she returns to the home screen of the app she is pleased that the app told her that her progress will be saved. She can return to her homework after dinner and pickup where she left off, and she will know what she has completed already by looking at her objectives list.
When she comes back from dinner she continues to read. As she reads, she makes notes and drawings on the app notepad using her Apple Pencil. She likes that she can drag-and-drop text from the reading into the notepad and save it with a note. She also loves that she can share her notes with her friends who need help or have her friends send her a note in case she doesn’t understand a concept. She finishes her last reading and sees that all of her objectives are complete, and receives a badge for completing the homework.
Mood: Annoyed, then optimistic and interested
Moves to Reading Assignments
Mood: Enjoying the interaction and pace of learning
Dinner Time
Mood: Annoyed but relieved
Environmental Impact Challenge
Finishing Reading
Mood: Content, glad to be finished with homework
Benchmarking: Duolingo
Home Screen
Public Clubs
The Duolingo home screen has a list of all of the badges that the student has earned or needs to learn, and tapping on those opens the learning session. From Duolingo’s home screen and lessons, I learned about the ideas of earning badges for completing work, and having a home screen that leads to a breakdown of available lessons.
Duolingo has clubs that users can join in order to practice their language of choice. Anyone can make a group, so the group can be made up of different people from different backgrounds, or similar people from similar backgrounds. This feature made me think about incorporating community and collaboration.
Ryan Williams | Miljo App Design
Benchmarking: Swift Playgrounds
Issuing Commands
Interaction
The Swift Playgrounds app exists to teach students the basics of coding with Apple’s Swift programming language, which makes use of natural language to make coding easier. The app teaches students different strings of code, and then asks them to drag-and-drop or type in the commands to make the code correct.
The Swift Playgrounds app takes the code that the student enters and make it come to life in the game to the right. This allows them to understand the consequences of their actions in code and also to reinforce their learning.
Ryan Williams | Miljo App Design
Task Flow: Home Screen STUDENT NEEDS HER iPAD
OPEN TO MILJO APP
NAVIGATE TO CORRECT BIOME
CHOOSE A ZONE
Description: She needs her iPad to complete her homework for the night
Description: She finds and opens the app she uses for science class, which was preinstalled by the school
Description: On the home screen, she sees a list of biomes and needs to choose the one to study tonight
Call-to-action: Miljo app icon on the home screen with other apps
Call-to-action: ‘New Assignments’ badge on top of the ocean biome tab
Description: She sees a list of the zones that she can study in the ocean, and sees that all but intertidal zone have a lock, so she needs to complete it
Confirmation: The app opens to a splash screen
Confirmation: Panel expands
Call-to-action: She needs her iPad Confirmation: She has her iPad
Call-to-action: 0% and empty progress bar under the zone icon, no color in icon Confirmation: Pop-up announcing challenge to complete
Task Flow: Environmental Impact Challenge OPEN CHALLENGE
LEARN HOW TO NAVIGATE
LEARN ABOUT POLLUTION
REMOVE POLLUTION
INCORRECT ATTEMPT
Description: After tapping on the zone, a pop-up prompts the student to start the challenge
Description: She needs to figure out how to clean up the zone and notices the newspaper in the bottom corner. This will teach her how to interact.
Description: Once she know how to navigate, she wants to learn about the types of pollution. As she taps the different types, pop-ups with text about what the pollution is and how to dispose of it appears.
Description: After learning about the pollution and how to dispose of it, she drags it to the bottom to dispose of it
Description: If she attempts to place the pollution in the wrong disposal method, it will not go away
Call-to-action: Drag and drop gesture
Call-to-action: Drag and drop gesture, bounce back
Call-to-action: Tap “Let’s Go” Confirmation: Challenge opens
Call-to-action: Newspaper at the bottom Confirmation: Newspaper pops up
Call-to-action: Floating pollution throughout the zone Confirmation: Pop-up with text appears
Ryan Williams | Miljo App Design
Confirmation: Sound and item disappears from the zone
Confirmation: Nothing happens, pollution bounces back into place, sound
REMOVE ALL OF ONE TYPE
CONTINUE REMOVING THINGS
REMOVED EVERYTHING
MOVE ON TO READING
Description: Once all of one type of pollution has been removed, the student sees some organisms return and recevies a pop-up explaining why
Description: She must continue removing things until all of the pollution has been removed
Description: Once she has removed all of the pollution in the entire zone, a popup congratulates her on cleaning up and returning the zone to health
Description: She also sees a pop-up saying that she has completed 20% of her homework and can now move on to the reading
Call-to-action: iMessage sticker pop-up, “Cool! Next” button
Call-to-action: “Let’s Learn” button
Call-to-action: Pop-up, “Okay” button Confirmation: Organisms return, pop-up
Call-to-action: Pollution in the zone Confirmation: Begins to disappear
Confirmation: Sounds, Pop-up appears
Task Flow: Miljo Menu TAP MILJO ICON
CHOOSE OPTION
USE CHOICE
Description: If the student needs access to their notes, objectives, or needs to go home, they can use the Miljo menu. They can tap the icon to open it.
Description: She can choose which of the things she wants to see/go to
Description: After selecting, the correct menu will appear for the student to interact with
Call-to-action: Miljo icon in the bottom right corner Confirmation: Menu expands, shows all of the options
Ryan Williams | Miljo App Design
Call-to-action: Three bubbles with different choices Confirmation: Menu closes and screen shows what she requested
Call-to-action: Pop-up of menu Confirmation: Menu appears
Confirmation: Pop-up goes away, healthy zone appears
Task Flow: Reading VIEW READING
START TO TAKE NOTES
TAKE NOTES: HANDWRITTEN
TAKE NOTES: TYPING
TAKE NOTES: DRAG AND DROP
Description: When the student taps on an organism in the zone, the reading appears with a zoomed view of that organism
Description: In order to take notes, she needs the notepad. She can access this through the Miljo menu Call-to-action: Miljo menu icon
Description: She can take notes by hand by double tapping her Apple Pencil on the notepad and beginning to write. She can choose color and point size on the screen
Description: To type notes, she can tap on the type icon and then tap on the notepad. She can type using her Apple Smart Keyboard
Description: If she wants to take things from the text, she can drag and drop highlighted text or definition pop-ups from the reading onto the notepad to save them there
Confirmation: Menu pops out and then back in after selecting notes
Call-to-action: Color and point size options at bottom
Call-to-action: Organisms in the zone Confirmation: Reading pops-up
Confirmation: Writing appears
Task Flow: Completing Homework COMPLETING READING
COMPLETED EVERYTHING
SENDING iMESSAGE STICKERS
Description: Once the student has read to the final page, she can tap the “objective complete” button to complete the objective and move one
Description: Once she has completed everything in the objectives list, she is greeted by a congratulations telling her that everything is finished and that she has earned an iMessage badge
Description: She can send her badge and stickers that she has earned in iMessage to friends to start discussions about the pollution about which she has been learning
Call-to-action: Pop-up with colored badge and congrats
Call-to-action: Stickers in Miljo iMessage application
Confirmation: Pop-up
Confirmation: Sticker is sent to friend
Call-to-action: Tap “Objective Complete” Confirmation: Reading closed, objective chekced off in list
Ryan Williams | Miljo App Design
Call-to-action: Color choice for box, keyboard pop-up on bottom of screen Confirmation: Text appears as typed
Call-to-action: Pop-ups and notepad Confirmation: Item gets dragged onto the notepad and stays there
Wireframing
Initial wireframing helped me to solidify many of my basic ideas, like an objectives panel and the overall iconography/feeling of the app, although most of the original ideas are no longer present in the final application. The upper wireframes are the original wireframes for the project, which I input into Marvel Pop and used for basic user testing and to get a feel for the size of the iPad screen. I found that dot grid paper was helpful for drawing easy wireframes quickly. The lower sketches are original ideation for how students would interact with organisms in the zones of the biomes.
Ryan Williams | Miljo App Design
Initial Prototyping
Ryan Williams | Miljo App Design
The first run through of prototyping helped take my ideas from paper to screen, beginning in portrait orientation. Here I solidified my illustration concepts while working out UI challenges, most of which were modified later.
Brand: Color Primary Colors
Sea Foam Blue RGB 166 | 224 | 242 #a5e0f2
Intertidal Blue RGB 74 | 189 | 227 #49bce2
Color Design
New Growth Green RGB 0 | 153 | 0 #009900
Deep Forest Green RGB 0 | 102 | 0 #006600
Clay Brown RGB 194 | 133 | 79 #c1884f
Mountain Brown RGB 143 | 94 | 51 #8e5e33
Secondary Colors
Surface Blue RGB 51 | 153 | 204 #3399cc
Transition Blue RGB 51 | 102 | 204 #3366cc
Use in Illustrations and UI
Deep Ocean Blue RGB 51 | 51 | 153 #333399
Creature Coral RGB 255 | 153 | 51 #ff9933
Basic Shades
Light Gray Medium Gray RGB 229 | 230 | 229 RGB 153 | 153 | 153 #e5ebe4 #999999
Ryan Williams | Miljo App Design
The primary brand colors were chosen to represent the various colors found throughout the biomes of the world, from the mountains to the ocean and in between. Secondary colors are used to indicate diving deeper in the zones of the biomes, and to call attention to important information and objects.
Hermit Crab Red RGB 255 | 51 | 51 #ff3333
Primary colors are used for major shapes and important visuals, sometimes without the need for secondary or basic colors.
Secondary colors are used sparingly, for emphasis of small details and icons.
Dark Gray RGB 102 | 102 |102 #666666
Deep Gray RGB 51 | 51 | 51 #333333
Basic shades are used for iconography and some basic elements of illustration.
Brand: Mark + Type Marks
Typefaces Europa Type Representation of superscript dot Open space allows for breathing room
The main brand mark is representative of the layering of biomes over the earth, moving from the mountains to the water. The ‘j’ is denoted as different from the ‘i’ by being having a higher x-height and shortened descender. Utilizes modified Europa Type Bold.
Miljo menu appearance iOS application appearance iMessage application appearance
Icons utilize the same color gradient of layers applied to the same ‘M’ that appears at the beginning of the main brand mark. Spacing around the icon is determined by setting and circumstance.
Ryan Williams | Miljo App Design
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz
Apple San Francisco Display ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz Europa type invokes fun and exploration through bold strokes and round edges. Apple San Francisco Display was designed by Apple to be used in iOS apps for maximum legibility and contrast.
Brand Origination Miljo is derived from the Norwegian word Miljø meaning “the environment.” Branding attributes: - Playful - Organic - Exploratory
Final Screens
Ryan Williams | Miljo App Design
Final Screens
Ryan Williams | Miljo App Design
Final Screens
Ryan Williams | Miljo App Design
Videos
Final Demo Video
https://youtu.be/JbwwkoBJJtA
In-progress Walkthrough Video
https://youtu.be/j0HJu25QOBg
Ryan Williams | Miljo App Design