UI Renovations Part 3: Food Sharing Showcase Application
In 2016, I attended a 12–week coding boot camp to fast-track into a new career as a developer. The course culminated in a final project consisting of an app showcasing the development skills we had gained during the immersive program.
My UI Renovations series includes UI redesigns of other developers’ and designers’ websites and interfaces- now let’s tackle some of my own work from 5 years ago!
The final project, named “foodstream”, was a demo Angular app to facilitate distribution of surplus groceries, agricultural crops, catering supplies, and other food that was at risk of being landfilled, and sharing it with those who need it. It was developed with a group of other devs from the same boot camp program cohort. Below is our original login page I’ll be re-working in this series installment.
Color Contrast
The original header used white text against a light, bright green background. This was difficult to read and fails accessibility guidelines. I also question the wisdom of placing a round green logo on an extremely similarly-colored header, but hey, but we were brand-new developers at the time and also not designers.
I’m not even going to include all the contrast check results here to save you some time. Suffice it to say they mostly fail. Let’s go with a new color scheme in the renovated design!
Color Scheme
As part of this renovation, I wanted to add an eye-catching illustration to evoke the utility and themes of the application (food sharing, abundance, and generosity), and found and licensed this image (see left below) that captures these concepts well:
I also used this image to help build a new color scheme. Sampling the orange color from the fruit and using a split complementary harmony yielded a medium blue I selected for main elements in the new design. I also carried the main green circle color through to a new, simplified logo element in the header that pays homage to the original.
Transparency
This existing design creates a lot of visual competition. The background image shows through the log in and sign up buttons and the form input elements. I’ll convert the buttons from semi-transparent elements to solid colors. The original input elements’ placeholder text is also difficult to read due to its gray color competing with the contents of the background image.
I love the theming and visual interest of the stock image selected for the background, but it’s too busy for this size screen and creates legibility problems. Let’s remove it (spoilers: for now) and stick with an all-white background. While it’s possible to achieve adequate contrast with text placed over images, the guaranteed way to ensure maximum readability in this case is to eliminate it entirely.
I’ve used the main solid color selected in the previous section for the login button, and kept the sign up button as a white button with text in the secondary element color. This emphasizes the main action of the form, logging in. The sign up button would then link to or display another view with a signup form.
Readability
Placing the mission statement right on the login page is appropriate for onboarding and keeping the focus of the app front-and-center. But both the content and presentation can be improved. So I re-wrote the copy a bit. Let’s also break up the text into the same three lines, but separate the statement into more logical linguistic chunks.
Aside from eliminating the redundancy of “edible food should be eaten”, the meaning is similar but clearer, emphasizing the sharing features of this demonstration app. The layout of the copy supports the meaning, with line breaks corresponding to conceptual breaks in the overall sentence’s meaning. Redesigning the layout and rewriting the copy also eliminates that awkward dangling last line in the original layout’s text block that only had one word in it.
Responsive Design
Our original application showcase only included a mobile view. I designed the mobile view first in this renovation, but also wanted a wider viewport design. Since we have a lot more space to work with on a tablet or monitor, this is the perfect time to bring back our background image. I couldn’t find the original image we used, but found and purchased a similar photograph.
I enjoyed the concept of the colorful, abundant food market stand hero image in the original design, so I’ve carried that element through to my new design. However, instead of placing text and form elements directly onto this image, I positioned it behind a solid white card element.
In the mobile view, this background image is eliminated entirely, to keep the form elements from competing with the market image and keep the user focused.
The final redesign is complete! I’ve addressed and improved readability, color contrast, accessibility, and design balance while maintaining the header, logo, mission statement, form elements, and food market image from the original.
I’ve also added all the code to this CodePen so you can explore my changes further. I enjoyed this redesign the most of all those in this series so far, perhaps because I see how far I came in those 12 weeks (from unable to program at all to landing a software developer job one week after graduation) and how it also gave me a chance to meditate on the last five years I’ve enjoyed as a software developer.
While creating this redesign, I also felt re-inspired by the original spirit of what this final project captured. The small white “legal stuff” text in the original’s bottom left corner links to information about the legality and protections afforded “companies and organizations to donate healthy food that would otherwise go to waste”.
After finishing this writeup, I made a donation to Feeding America, a non-profit organization working to stop food waste and eliminate child hunger. If you are able, please join me in making a donation to this or another national, local, or community aid effort to address hunger.
Thank you for reading Part 3 in this series, and I’ll be back soon with another UI Renovation.
