Atomic

Brief

This project was to design and create a digital product to explain elements from the periodic table that could either be for primary school children or undergrad students. I decided that I would design for undergraduates as they would be more my age and I thought they would be easier to design for. I also choose to design my app for an iPhone and Apple Watch so I could see the design on two devices.

How it was created

Part 1 - User personas & Brainstorming

After receiving the brief for this project I went off and looked at other similar projects to get a feel of what to do. I then started brainstorming different ideas for my app, figuring out the colours, Names, brand, style, and what 5 elements I would use.

After brainstorming and deciding that I would design for undergrad students instead of children I created two user personas of my potential users so that I could get a feel for them like what their goals are and what their pain points are. I found this beneficial as it really helped me figure out my designs for my app.

My Role

  • Designer
  • UI/UX developer
  • Illustrator

Part 2 - Branding

I then decided I would create a brand for my app and the image on the left was my first brand idea. I had decided that the 5 elements I would design was Rhodium, Palladium, Gold, Iridium, and Platinum. I choose these 5 as they are the most expensive elements to trade on the market.

My first logo idea was a diamond and i was gonna call it lavish. But then after sitting looking at it I thought I could do better and that the diamond didn't really make sense to the nature of the app and the name Lavish would be too far fetched and not make sense either.

After going back to the drawing board I decided to incorporate some of my minimalistic design inspiration to the logo and name. I then came up with the name atomic as each element in the periodic table has an atomic number. The logo is just a minimalistic version of how an atomic structure looks.

I think this design looks far better than the first as it is more sleek.

Part 3 - iPhone & Watch sketches 1

After I had my brand sorted it was time to start sketching. The images below show the first sketches I created. In my original idea I was gonna show the full periodic table but I then abandoned the idea as It was too time consuming to design on the iPhone and then in list form on the watch.

The first designs where just in a simple list form that tell the user about the element and shows a little illustration of the atomic structure of that element. The design for the Apple Watch version was much the same just with some things moved around to fit the size.

Part 4 - 1st Mockups

I then created some mockups of the first designs on Figma to see what they would look like and after seeing them myself and getting feedback from my peers and my lecturer I decided to change the design and add some colour. Also to figure out a way to show my content in a more fun and engaging way.

Part 5 - Mockups revised

I went back and redrew my screens and came up with a new way of showing off the elements information. I also added a welcome page that tells the user about atomic.

I decided that on the home page the elements would be displayed in cards and they would show the user the name and the atomic number of the element along with an image of the element and too see more the user just has to tap on the card.

This was when I came up with the new brand and decided to use it in my app. I decided to breakdown the content with the elements pages and put them all into different sections and gave each section a colour and an icon so that the user could read the information and by the colour tell what section they where on. The sections are overview, properties, reactivity, and appearance.

Part 6 - Icons and colour palet

After the previous part I then went and created the 4 different icons for the element pages and decided on the different colours I would use to section off the information. The colour pallet on the right shows all the colours used within the whole app.

Part 7 - 2nd mockups

These images show what the second app mockups look like where I created the welcome page and added the icons, titles and the colours to the elements page.

This change was a good one as it made my app overall look better and actually made it more fun to read and kept me engaged longer with the bright colours.

Part 8 - 3rd and final mockups

These are the final mockups of my app. since the last ones I decided to make the app more personal and added a login and a sign up form that would allow users to make an account so they could track their learning through the my progress page.

I also decided to get rid of the icons at the start of each section and to just have them at the start.

Overall I though this app turned out well as it looks good and is easy to use and all of the information is presented clearly and is easy to read.

Part 9 - Apple Watch mockups

I waited until the end to create my watch prototype as I wanted to get the iPhone one right first. After that was done creating the watch prototype was easy as I just had to rearrange the content into a single list.

Final app iPhone

Final app watch

Click to go to Stadia >

message@cdaledesign.com