Element52

Role: Prototyping and Digital Design
Software Used: Figma, Adobe Illustrator
Time Spent: 20th November - 5th January 2021

Task and Planning

My plan was to create an app focused on the periodic table for university students needing a more on the go learning experience. The first step I took was researching into the problem occurring with university students and how they study. By questioning fellow university students including those studying chemistry, I got a good idea of what student’s frustrates with learning are and what can be done to improve them. Collectively there was an idea of preferring smaller amounts of content but with more essential information as this saves time while also still keeping the student’s attention for learning. Based on this research, I had to make sure I was creating an app favouring bite sized content with essential information rather than large chunks of unnecessary content.

I then came up with the idea of having the elements from the periodic table represented like a deck of cards. Different coloured cards represent different types of elements e.g. Metals or nonmetals. You could also be quizzed on the information received from the element cards. This would give students short and concise content to learn easily on the go on their mobile. I decided on calling my app Element52 based on a deck of 52 playing cards.

Sketching

I started to sketch out different design concepts for my element cards. I didn’t know whether I wanted them to represent the aesthetic of a traditional playing card more than a modernistic approach that felt more symmetrical in style. I also started sketching out wireframes and paper prototypes of how I wanted the user to interact with the app. This gave me a good sense of how I wanted to the app to work which brings me to start building my prototype.

Building

I used Figma to build the prototype of my elements app and created a visual grammar to go along with the prototype. This was so I could get a sense of using the buttons, colour scheme and typography as represented in the brand’s visual grammar. I used a dark colour scheme to contrast the colourful element cards displayed in the app. After carefully designing the layout and structure of my app from each section including the menu to the learning section, I started to prototype it all together by linking pages and sections to create an actual working prototype of the elements app.

Original Version

Problems Faced

Some problems faced at the planning stage of the app was branding as I didn’t feel my original logo design was strong enough and wasn’t standing out from your typical science logo design. Another problem I faced was having the main colour scheme of the app fell very bland and dark with not much energy to it. The original design for the element cards themselves weren’t really standing out the way I wanted them to, so I went back to refine them.

Final Version

What I Learned

What I learned from this was to always keep refining each step of the way and never forget to focus on making sure the prototype works properly. The design is one thing but if the app doesn’t work then the entire project is ruined. This taught me to think about how the user would want the app to work if they were navigating through it and what would be most comfortable for them.

Successes

The successes that came from these setbacks however turned out very well in the end for my prototype. I ended up modernising the look of the brand by refining the logo to a more sleek and strict aesthetic. The updated brand looks much stronger and fits more with the visuals of the app. The colour scheme was changed to a warm gradient look as the refined colours contrasted well with the dark background and matched the concept of chemicals and elements. Overall, it brightens up the look and feel of the app thus making it far more aesthetically pleasing for the user. Finally, I refined the design of the element cards which now pop off more and look much stronger and distinct.

View Prototype