Miljo App Process

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