Replace Plastic – A typographic redesign with improved readability and clear navigation, driving the mission to reduce plastic packages.
Project information
Typography · App Concept · Icon Design · Illustrations · iOS HIG
Summer 2021
University Project for the course “Digital Typography” by Frank Rausch
Less plastic, especially in the oceans
Replace Plastic is an app by “Küste gegen Plastik e.V.” to reduce plastic packaging. The app works as follows: users scan barcodes of products that contain plastic.
After a certain number of scans, mails are sent to the manufacturers with the goal that they reduce their plastic packaging. The focus of this project is primarily on the plastic waste that is in the world’s oceans.
The Redesign
The idea behind this app is really interesting, and even though it works well, there’s still room for improvement:
In the original Replace Plastic app, the background makes it hard to read the white text, especially in the lighter parts.
Another issue is the use of different fonts and text sizes, which makes reading harder. There’s sometimes also no clear visual structure.
These problems, along with the app being very text-heavy, having some logical issues, and feeling more like a mobile website than a proper app, made me decide to redesign it for this course.
Simplifying navigation within the app.
I first converted the hamburger menu into a tab bar with four tabs: Scan (scan), Statistiken (statistics), Alternativen (alternatives) and Mehr (more).
To preserve the charm and small elements of the original, the jagged element from the navigation bar was integrated into the tab bar.
Using a darker, solid blue background improves readability.
Consistently using only two fonts, along with a larger font size, increased line spacing, and more overall spacing, greatly enhances readability.
Clearly defining relationships through spacing improves clarity: headings are styled in “Slabo 27px,” as in the original app, while body text is set in “Lato” to ensure consistency.
Hand-drawn illustrations with consistent line thickness are used to maintain a cohesive design. These illustrations are themed around the sea, aiming to create a personal and engaging connection with users.
Scan – Quickly and easily scan plastic packaging
Here, you’ll find the app’s key feature. While animated information about the app and its purpose appears above, you can use the buttons below to scan a new product package or view your previously scanned packages.
Before – Hidden information accessible via the question mark, unlabeled round scan button, much going on.
After – The most important functions summarized in one tab. For this I have combined several screens. Previously, the info about the app was hidden under the small question mark. In the redesign, they are present and hover. Products can now be easily scanned via the labeled button, direct access to the already scanned products is now also possible.
Statistics – Clearly structured and easy to read
The redesigned statistics tab addresses the issue of the seemingly endless scrolling from the original app. In the original version, all screenshots (Before) were stacked together in a long, continuous layout. It also suffered from inconsistent fonts, varying font sizes, and mismatched graphical elements.
Before – A seemingly endless screen with a lot of information.
After – The statistics tab of the redesign splits the seemingly endless screen from the original. There is a start screen on which the results achieved so far are visualized live. New appealing illustrations and a clear navigation to further areas around statics can be found.
Before – A small, crowded area showing the providers which received most feedback. The larger the provider is displayed, the more mails it has received. Problem: too little spacing and some names of providers are too small to read.
After – Instead of the different sizes we now have a list. Above it a sentence explaining the screen and illustrations.
Before – In this section, there are recently scanned product packages from all users. Very small text, hardly any spacing, a lot going on.
After – Here I have removed the borders. Bars provide optical separation. The screen has been tidied up and structured with information in a legible way. Again, there is a short screen description at the top.
Before – Similar to above, text runs randomly, super small, not centered.
After – For sent mails, the design follows a similar approach as above: a short description of what the screen should show, visual division via bars and you clearly have the advantage that nothing else is cut off here.
Alternatives (Alternativen) – Plastic-free products
This category offers suggestions for alternative or unpackaged products to help reduce plastic waste.
Before – A very long screen, without any search function, with many individual products that are not categorized.
After – In the redesign there is a search function and different categories for a better user experience. At the top there is again the hint what you can find on the screen.
More Tab (Mehr) – Additional information
Since these are not core functions in the redesign but informational content, I’ve added a “More” tab. Here, you’ll find extra details about “Replace Plastic” and its contributors.
Before – Burger menu with all contents crosswise.
After – The subordinate functions have been clearly structured and adapted to the style of the app. Arrows indicate the possibility of interaction.
Before – Small body text size, little line spacing, lots of space between paragraphs.
After – Larger font, more line spacing, reduced spacing between paragraphs. For a better color concept of the screen, I have replaced the photo.
Before – No clear hierarchies between heading and body text due to identical spacing. Small font, listings are separated by commas and are on one line.
After – Clear affiliation of heading and body text. Larger text, more line spacing and quicker grasping of the contributors by the single listing.
Icons – Consistent and harmonious
The original graphics, with a few icons, wavy underlines, and borders, felt impersonal and text-heavy. To create a more engaging and cohesive design, I introduced hand-drawn sea-themed illustrations. These elements lighten the screens and align with Replace Plastic’s ocean-focused mission.
Before – Small selection, different sizes and line widths.
After – Uniform and appealing appearance.