Elements Project
This is a document where I will be putting all my research, sketches, designs and feedback when working on this elements project.
This project involves me designing and creating a digital product to explain elements from a periodic table.
I can either design for children aged 10 and below or design for undergraduates aged 19, 20, 21.
I can choose to design for any platform and device such as phone, tablet, watch, VR etc.
The main objectives for this project is to:
- Make an interactive digital product
- Create a brand
- Have at least a homepage
- Choose at least 5 elements to explain
To complete this project to the best of my ability I must carry out the following:
- Research- Primary and Secondary
- Sketches
- Wireframes
- Low fi mockup
- High fi mockup
- Prototype
Deliverables for the project:
- Style Tile/ style guide
- Brand
- Prototype of the finished design
Initial Ideas
Before properly starting the project I had a few initial ideas of what I wanted to do, I noted this down in my notebook whenever I had a little idea. These are:
- I am going to design for children below 10
- Use bright colours, primary colours but different shades to normal
- Flash card style design
- Each element is a character and they can explain how they are and what they do etc from their perspective
- Design for tablet, specifically to be used portrait style
- Simple words and phrases
- Use lots of icons and pictures
Methodology
There are a few different project methodologies which are used for different projects to ensure the best finished product. However for UX design the process is very iterative, this means each section of the whole process is revisited and reflected upon on a regular basis to improve and refine design ideas to ensure they meet the needs of the final user. It is a circular design process that models, evaluates and improves designs based on the results when testing.
This style 0f w0rking ensures the best product overall and makes sure that the design fits the needs for the user and solves the initial problem to why the design is being made.
Below shows a simple diagram of the design process which is best for this type of work and for most designers.
1.Empathise- This stage starts with working out what the problem is and defining challenges as well as exploring the human context.
2.Define- This stage is understanding why it is important for this product to be designed. It involves researching, observing and understanding the users from their point of view.
3. Ideate- This stage involves brainstorming ideas both good and bad to help solve the problem.
4. Prototype- This is when the product is starting to be created, experimenting takes place
5. Test- This testing stage is done to make sure the product works, and see how users can interact with it to solve the problem they have
After the test stage we go back through the whole design cycle, making changes and iterating the design.
Research
Secondary Research
After deciding that I was going to design for children 10 years and younger I did some research on kids design and what devices they use the most. Designing for children can be more difficult as their cognitive skills are skill developing so their reasoning abilities are weaker than those of adults.
This is one of the articles I read on designing for children: https://www.nngroup.com/articles/kids-cognition/
This article taught me alot about designing for kids, I must remember that their skills are skill developing and they might not understand some interactions that adults will know how to do. Alot of the design has to be presented in a way that explain what to do and what the end goal is. Such as having an animation showing the user the mouse moving from one object to another, or showing them the finished product before they start the task.
It is also a good idea to use existing mental models and knowledge children may already have to help them accomplish the tasks. This stimulates the children’s brains and references their already existing knowledge which reduces the effort required for kids to understand how apps and websites work as they already have previous tacit knowledge on how the world works.
Kids tend to have a short attention span so to reduce the cognitive load it is best to design self explanatory interfaces to prevent users getting frustrated and leaving the site.
Another article I read was from The Children’s Design Guide: https://childrensdesignguide.org/wp-content/uploads/2021/01/D4CR_10_key_principles_simple.pdf
Another article about kids and digital games: https://www.researchgate.net/publication/250889646_Digital_Games_for_Young_Children_Ages_Three_to_Six_From_Research_to_Design
This guide explains the different principles to follow when designing for children:
- Right to non discrimination
- Right to development
- Right to participate
- Right to be protected
- Right to privacy
- Right to development, right to learn, right to leisure and play
- Right to development, right to participate
- Right to information
- Right to be heard, right to participate
Ulster Museum Elements exhibit https://www.nmni.com/whats-on/elements-exhibition
After reading the article on the National Museums NI about the elements exhibit, even I find science more interesting. The way the article is written makes science fun and will make anyone young or old want to learn. In the short article it has fitted in quite a lot of intriguing information with fun facts about the elements. One of the reasons why the article is interesting is that it links the elements back to us and everyday life. I found it impressive that the 6 main elements carbon, hydrogen, oxygen, nitrogen, calcium and phosphorus make up 99% of the atoms in our bodies as well as learning that oxygen, silicon and aluminium make up more than 85% of the Earth’s crust. I think that’s pretty cool.
Competitive analysis
I looked at several different products that are directed to help kids learn science as well as other periodic table learning tools and apps.
I also looked at different kids science books as these are usually presented in a way that kids will understand and enjoy.
This book I looked at was in the style of flashcards, one of the ideas I had for my interactive app. Each element is colour coordinated, and displays the name of the element, the mass number. symbol of the element as well as describing where that element is found along with an image. This book is very simple and easy to understand for children. However as more than one element is displayed on the page at the same time it may be hard for the child to concentrate and learn properly. Moreover, I really like this design and would work well as a digital app.
I also looked at this book ‘Usborne lift the flap periodic table’. This book doesn’t look as simple as the previous book I looked at but looks really fun and educational. On one of the first pages it has the full periodic table explaining what each number and symbol mean. Each element is split up into different groups one being ‘the elements of life’ this is where you’ll find all the elements that are essential to life on earth. The solid elements are represented in square boxes and the gases have a tail ended bottom. Each of the elements are shown doing something which represents them as an element for example the character for sulfur is farting as sulfur is one of the smelliest elements, the hydrogen elements are flying in the air holding up an airship as this is the lightest element. This book also has shown when two or more elements combine to describe what they create for example H20 is shown as a character and they are squirting out water from their arm.
Overall, this book is quite appealing as it uses bright colours, fun characters and has describes each element well. However, I do find the page quite overwhelming as it has a lot going on and can be quite confusing for some children. I will be taking some inspiration from this book into my own design.
When doing my research I found there were Top Trumps of the elements. Top Trumps is a game in which you play with two or more people. One person starts by reading out a stat from their top card, the other player then reads out the same stat. Then the player with the highest stat wins that round and collects the other players card. The game is played until one player has received all the cards from other players. These cards are presented and laid out in a simple way, with the name of the element at the very top of the card, a picture of the element of where its used and then in lists it has the melting point, density, discovery date and size of atom. Beside these headings has the values of these written in bubbles with a corresponding colour. At the bottom of the page has the elements symbol along with a bit more information about the element. This is good inspiration for my own design as it has all the main information that will be needed to teach kids about the elements. However from looking at the design I feel like these cards are targeted to a more older demographic ages 12 and up than the demographic I will be targeting.
Next I downloaded the app ‘Periodic Table’ from the Playstore and had a look at how the information was presented on a phone. Firstly when you go onto the app it displays the periodic table in black and white on the portrait view, you can scroll across left and right or up and down to look through all of the elements. Each element has a coloured dot in the top right corner this represents what group that element is in. When you click on an element it will bring you onto another page where it gives you a lot of information on it, including the basic symbol name, atomic mass, atomic number, group, period, year discovered etc as well as telling you things such as the density, melting point, ion charge and atomic radius. From this amount of information it is more suited to older teens and young adults who may need to know these things for work and university etc. When on the homepage it lets you see the periodic table in a more compact view, when this button is clicked it changes your view from portrait to landscape and brings up a differently designed periodic table. This table only shows the user the element symbol as well as the atomic number. Inside of having a coloured dot it has the whole background of the element the specific group colour. When in landscape view when you click on an element it brings up a pop up page showing a closer look at the element you can then choose ‘more info’ to find out all the more detailed information on it.
This is good inspiration for me as I can see how the periodic table is laid out for a mobile device and how the information is presented. I will be taking some of the key lay out details into my own design.
The next app I looked at was called ‘Periodic’, this is a really nice interface and is very simple and minimal. The overall app works well with different options to view the periodic table, either in a list or as a table you can scroll. When the app is on the list view of the periodic table you can click between three different icons, when these icons are pressed it changes what is written beneath the element name such as you can change from properties, electron configuration, electronegativity or atomic mass. When clicked into an element it takes you to page which gives more in depth information about the elements.
Again, this app is for more older teens and young adults rather than kids under 10 however I can take some inspiration on the layout from this app. For my own design I won’t be including as much information but will be focusing on more of the important facts on the elements.
When looking on the play store for periodic table apps I found loads of different types but struggled to find one that was directly targeted towards kids 10 and below. A lot of the apps were more complex and wouldn’t appeal to a child to make them want to learn.
Primary Research
I carried out some primary research by conducting a questionnaire for parents of the children how may be using the app By carrying out this type of research it allows me to get a better understanding of my target demographic, and become more clear of what my app should include and what to steer away from.
I created my questionnaire on Google Forms and have sent it out to various people including parents in my work.
The questionnaire link is: https://forms.gle/FPY7q5RDqHbC3i7c9
Results:
All of the participants that answered the questionaire had kids of grandkids between the ages of 5 and 11.
The results for this question shows that 50% of the participants said that their child uses a tablet the most out of the digital devices listed. 20% has said that their child uses a smartphone or television the most. Lastly 10% of participants had chosen the ‘none of the above option’. These results tell me that the demographic I am targeting uses a tablet the most so therefore it would be the best option to design my app for tablet first. 
I got an insight into what games and services children in my demographic play, most of the answers has said that their child plays Minecraft, Roblox and watches Youtube. This insight lets me understand what way they can interact with digital products as well as knowing what sort of language and features they are used to dealing with. 
70% of participants has said that their child currently studies some kind of science in school this gives me a little indication of their children’s school curriculum.
Half of the participants voiced that their children has either heard about the Periodic table and the other half have voiced that their child hasn’t heard or learnt about the periodic table.
All of the participants are interested in helping their child learn about the elements in the periodic table. This means that there is room in the market for an educational element app.
From this question I got an insight into what children connect with most in apps so I can take a few of these characteristics and use them in my own design. 90% of these children enjoy educational apps and learning, 60% connect with bright colours as well as understanding short simple words and phrases. 40% of the children like simple layouts which are easy for them to understand and navigate. 30% connect with fun characters that are memorable and fun to play with. Lastly 20% of children connect with sound effects which help them immerse themselves into the app.
This next question was directly asking them what feature they would like to see most with an online learning app. 40% have said that having parent controls is important so they can manage their children viewing content etc. 40% has also said that having a screencasting feature would be good sothey can screencast the app fromtablet or smartphone onto the television so it is easier for their child to view and interact with. This feature will make it easier for the parents and child to interact with the app together.
Finally all of the participants have agreed that they would download an app for their child that is educational and helps their child learn the elements from the Periodic Table.
From carrying out this primary research I can get an understanding of what parents want from the apps and what sort of apps and devices their child uses.
Research Conclusion
From both the primary and secondary research I have carried out I realised there are no existing apps for kids to help them learn the periodic table. This motivates me more to create a periodic table science app that kids want to use and pushes them to learn. Kids need to be connected with the app or else they will get bored and look for something else to do. Therefore, I am more confident in what I am going to design as I can see what will and won’t work from the research I have carried out.
Task 1- Organise raw text in a file
User personas
I made four different user personas based on the different people who may use my Elements app. The first one being a boy who loves to learn but gets distracted too easily and wants a platform that engages him. Other user is a girl who struggles to learn as the current educational means are too boring and she find some apps too complicated. The third type of user is a mum who is eager for her kids to learn but doesn’t always have the time to sit down with them and help them so she wants a platform that her kids will use while shes busy doing something else. Another of the users is a single father who wants to sit down and help his daughter learn new things but struggles to find a way that can teach her daughter without being too complicated. These four different users are shown their own user persona.
User personas help me get an understanding of what type of people I am designing my app for and what they want from the app through their goals and frustrations to understanding their daily lives and personality. It is very important that I take these user personas into consideration when designing the app as they are the demographic that will be using my app. I mustn’t design for me as I won’t be the one using the app.
User journey
A user journey map is a visualisation of the process that a person will go through to complete a goal or task in your product. It helps you tell the story of the customers experiences with your brand. It maps the journey the user goes through by compiling a series of actions into a timeline.
I made a couple different user journeys for the targeted demographic, they are both trying to do different things on the app in different settings.
User flow
What is it?
A user flow is a diagram in which displays the complete path a user may take when using an app or product, it lays out all the key movements the user takes throughout the site from their initial entry point to their final interaction. Different user flows can be created to obtain different goals and achievements. User flows can be created at any stage of the design phase and will help determine the information architecture of the product.
Mihaly Csikszentmihalyi a hungarian psychologist is best known for his theory of flow, he deemed this process a highly focused mental state links to productivity where the user is fully immersed into what they are doing and the task that they aim to carry out and achieve. Therefore, user flows help designers understand the different cognitive patterns of their users in order to design products which helps enable this state of flow.
What each shape represents in the flow:
- Rectangles- Represents a page or display screen
- Diamonds- Always asks a question (the user makes decisions)
- Circles- Displays an action (show a task that must be completed or steps that must be taken)
- Transition arrows- user navigation
- Squares- sometimes used for notes
I created this user flow diagram to show what path my users will take when carrying out a specific tasks to achieve a certain goal. There may be different ways that the user will navigate through the app to get to the same goal.
Articles I read for this section:
- https://careerfoundry.com/en/blog/ux-design/what-are-user-flows/
- https://careerfoundry.com/en/blog/ux-design/how-to-create-a-user-flow/
- https://www.justinmind.com/blog/user-flow/
- https://uxdesign.cc/a-ux-designers-guide-to-user-flows-bbbc61f8b666
User Story
A user story is basically one question with 3 parts
- The person
- What they want to do/ try and do
- Achieve a goal
A few user stories for my element app would be :
1.
I am a 8 year old pupil
I want to learn about the elements
So I further my knowledge as im interested in science
2.
I am a mum
I want to help my child with learning
So they can better their grades
3.
I am a pupil
I want learning to be more fun
So I don’t get distracted
Sketches
I moved onto sketching out what layout I want the element app to have. I want to keep it simple, which is easy to understand and navigate
This is the homepage of the app, it will have the users profile image top left so they know what account they are on. There will be a welcome message to make the app feel more personal as well as having a phrase such as ‘What element will you explore today?’ this will help it feel more personal by targeting the message right at the user as if it is talking to them. The homepage will also have a periodic table, it will be colour coded for each group and will be spread out so the user will have to swipe left to view the rest of the table.
From the homepage the user can click on whatever element they want and it will bring up a flash card design of that element. On one side of the card it will show the atomic number. element symbol, atomic mass number as well as if the element is metal or non metal. Below the card will be a button that says ‘flip over’, this is where the user can click and the card will flip over to show more information. If the user clicks on the atomic number or symbol etc it willbring up a pop up that gives more in depth information about that specific part they clicked on. There is also a home button which lets the user go back to the homepage to select another element.
This is the second side to the element flashcard, this side shows a illustration of one of the users for that particular element, it says the name of the element as well as the elements natural found state. It also has a ‘flip over’ button which brings the user back to the first side of the card. Again on this side the user can click further into the words to bring up further information on that specific thing of the element.
This sketch shows the pop up that appears when the user clicks on the numbers or words on the flashcard. This in depth information section will slide up when the user clicks, when the user clicks the screen again the pop up will slide downwards taking the user back to the flashcard.
Low fi Mockup
Low fi mockups is the first visual representation of the designers idea, it ensures that the developer and/ or client gets a clear understanding of the functionalities and designs of the site. It is to check and test functionality rather than visual appearance of the product. It allows for visualisation of where each element on the page is going to sit and see whether it works there or not.
Homepage
Flashcard
Flashcard more information pop up
Branding
I have to make a brand for my digital product, this part of the blog will show my inspiration, sketches, development and final brand.
Inspiration for design
I went onto Pinterest to get inspiration for my own brand for my element app. This definitely helped me in creating my brand as I could see what sort of science brand there already is.
Pinterest board: https://pin.it/6YlpEYU
Inspiration for colour palette
I have an idea what sort of colours I want to use for my element app, I want to use the primary colours but slightly different tones of the usual basic colours. This will create a different feel to the app compared to a lot of children’s apps and content already out there.
Link to Pinterest colour moodboard: https://pin.it/145fpsX
Finalised Colour Palette
Sketches
After getting inspiration from Pinterest on the designs and colour palettes I had a few ideas of designs I could create for my brand. I wanted the logo to be quite simple and effective, I didn’t want anything too complicated as it was for kids to understand and I wanted it to incorporate a couple of my brand colours.
Final Design
These are the two final designs for my brand logo, it is simple but I think it works for what its for. I made two different colour variations depending on a dark or light background. The blue and black logo will be if I choose to have it displayed on a white or light background then the white and yellow logo is for if I choose to have a dark or blue background. Both logos include my brand colours i’m wanting to use.
Style Tile
A stile tile is great for when a moodboard is too vague, it is a design deliverable which allows designers to see potential visual directions for the high fidelity designs. They establish a direct connection with interface elements without defining layout.
My stile tile for the elements project includes the brand logo, colours, different shapes that will be used, the typography, icons, buttons and some assets that will be included in the design.
App design
Progress
I made quite a lot of iterations throughout the designing of the app. This is one of the first initial versions I designed.
First initial design
This was my very first initial design, i first designed for the tablet in portrait view and had each label describing what each of the numbers, symb
ols and words were. When you clicked on each of these it brought up a pop up box giving more information.
2nd Version
I based my second design off the very first one but just adjusted the view to landscape from portrait. I also removed all the labels that told the user what everything was, I still kept the same concept with the pop up with more information when you click a certain element on the card.
3rd Version
This is the 3rd version of the design. This one I added a homepage which is the periodic table where the user can swipe across to view the full periodic table as in normal view only part of it is shown. This page is bright and eye catching with the colours used for the periodic table. Users can click on a specific colour which represents a different element group.
After clicking on the element group it will take the users onto the page shown below. This page allows the users to look at the group more closely which then allows them to click onto a specific element. The user can swipe left to view all the elements in the group as not all of them are shown at once on the page.
After the user clicks into a specific element it will then bring up the flashcard of that element from here the user can click into the numbers,symbols and words displayed on the card. The same as the last version this will bring up a pop up of more information about that specific thing. The user can flip over the card which shows different information about the element.
When the user clicks onto one of the numbers etc it will show the pop up which is shown below. I have adapted this section and included some imagery to help the user understand what is being explained to them. Kids are visual learners so this will help them understand and will take in the information better.
4th Version
This is the next adapted version of my element app. This version I added my landing page which has my brand logo in the middle of the page. The user will click this or there will be a time limit to take the user onto the next page. This version I also simplified the navigation throughout the app, to get to the end goal will be a lot quicker with less interactions. I removed the Periodic Table and instead just had a page with coloured dots which represent the element group, the element group was also written beside the dots so the user knows what group they will be exploring.
The page below is where the user can choose the profile they want to explore the elements on. Each profile is represented like the elements on the periodic table with a name symbol, their age and their name.
After clicking what profile is being used it will take you onto the homepage, from here the users can choose what element group to explore.
I have adapted the look of this page from the previous version, before you had to swipe to see all of the elements in the group, now they are all displayed on the screen. I also made them square instead of having the flashcard design here. The elements are displayed in a way in which it does in the periodic table with the atomic number, chemical symbol and name of the chemical.
This page is also the same as the previous version and does the same things as expressed above in the 3rd version.
This page is also similar than the previous version
5th and final version
The final version is very similar to the 4th one just has been adapted a little bit. In this final version I added a coloured dot that represents the specific element group the user is exploring. This allows the user to click the button and it will take them back to the page where the rest of the element from that group is. As well as this I split the in depth information content into two coloured blocks, one on the left for text and the other where the illustrations and images are.
To view all the pages to my element project click on this link:https://drive.google.com/file/d/1QHqNi0RP3n9Aup62Q5-PUToiGp-wlsbh/view?usp=sharing
Prototype
Above is the link to my element app.
User Testing
User testing is important as it lets you:
- Understand how your site works and the users don’t get lost or confused
- Makes sure users can complete the main actions they need to
- Helps encounter any bugs or usability issues
- Can observe if the site is function and the user has an efficient experience
- Identifies how long a user takes to complete specific tasks
- Learn if the tasks set can be completed successfully
If user testing isn’t carried out I could be left an app that I know how to use and understand but the actual target demographic may not.
When carrying out my user test there will be 3 main people:
- Participant- The person doing the test
- Facilitator- This is the person who promotes the understanding of the tasks to the participant
- Observer- The one taking notes on what the participant is doing aka the designer which is me
Before carrying out the test I made sure the participant was calm and relaxed this made the interview process alot easier for me and the participant.
What I needed for the test:
- Partner
- Pen and paper
- Voice recording and/or screen recording
Task scenarios
I wrote out a few different task scenarios to ask different participants for my user testing. This is easier for the participant to understand which means smoothly user testing and motivates the participant. A task scenario is the action that you ask the participant to take on the tested interface. They need to provide context so users engage with the interface and pretend to perform business or personal tasks as if they are doing it themselves in a normal setting. Badly written tasks can often focus too much on forcing the users into interacting with a specific feature rather than seeing them interact with the service themselves seeing if and how the user chooses to use the interface.
1.
You want to learn more about the elements in the periodic table,
Find the ‘other non metals group’.
2.
You’re interested in the element oxygen,
Read the facts about Oxygen.
3.
You want to understand more about carbon and its uses,
Find carbon in the ‘other non metals group’ and read about its uses.
4.
You want to know what sulfurs atomic number is,
Find sulfur in the ‘other non metals group’ and find out its atomic number.
I got a few people to test my product and it was interesting watching how they navigated my app. I kept wanting to interrupt them telling them to do this or that but I knew it was important to watch them perform a task on their own. I had to tailor my task scenarios to what elements I have actually prototyped as I have only designed for the ‘other non metals’ group.
I read out the tasks one by one, after they completed the first task I let them start from their end point to complete the next task. I think all the tasks went pretty smoothly and there was no major issues detected from the user testing. When carrying out the user testing I screen recorded the screen to show the actions of the user and how they navigated my app.
Project Conclusion
I have successfully produced a final working prototype for my element app. It works perfectly fine and the user test went pretty smoothly. I have met all the project deliverables and main objectives for the project.
Deliverables for the project:
- Style Tile/ style guide
- Brand
- Prototype of the finished design
The main objectives for this project is to:
- Make an interactive digital product
- Create a brand
- Have at least a homepage
- Choose at least 5 elements to explain
I followed an iterative design process adapting my designs with the feedback I have been given, this way of designing worked for this project as I started off with empathising what the problem, defining why the product needs to be made as well as understanding who my target audience is. I then brainstormed ideas to help solve the problem at hand then I started designing the product taking into consideration the users needs and how they will use their knowledge to navigate the app. I had to understand how young children used apps and what type of language needed to be used. The next step involved prototyping the product and showing how it would work if it was actually made and was used by children. I then had to do user testing to make sure everything worked properly as well as seeing whether the target demographic could complete their end goal and task. After all these steps have been completed I go through the whole process again making changes and iterating the design. I had to make sure the initial problem has been solved, and whether or not the demographic will or can use the product.
Throughout this project I had to carrying out certain tasks to make sure I complete the project to the best that I could. I started with lots of research into the demographic as well as carrying out both primary and secondary feedback. I brainstormed and sketched out different ideas for the product, created low fi mockups then moving onto high fi mockups then creating the prototype.
What was good?
To conclude I think that my finished product looks well and will suit my demographic which is 5- 11 year olds. The app is easy to navigate and the end goal can be completed without any stress or frustrations. The bright colours, easy layout and simple illustrations suit the demographics needs and wants which will help them want to learn and use the app without being forced to.
In my opinion I like the colours I have chosen as they arent your basic primary colours that a lot of apps that are targeted towards children are. They are different shades off the primary colours. Moreover, the colours aren’t stereotypically masculine or feminine as the app is designed for kids of any gender.
I like the overall style of the app I designed, the flashcard layout is simple but I think it works for helping kids learn. More and more kids are interested in digital products so it works for them as you can click the flip button and can see the card digitally flip over to the other side. The flashcard isn’t bombarded with information and the user can choose to click further into it to understand what each part means with more context and information.
What to improve?
I found it difficult choosing what information was deemed important to young kids. As it was an educational app I wanted to teach them new things but what does a child need to know when starting out with the elements. I did try and keep it as simple as possible but I thought a lot of the information needed to be there. Looking at it it looks a little messy and overcrowded and i’m not sure if kids will want to read that much, if they are interested in it they wouldn’t mind but what about kids who struggle with a lot of text.