Staple App – Beta Designs
Staple Fitness | 2017 – 2020
Discontinued
Staple was the very first app we developed here at Phvntom Inc. Our company was just 3 months old when we began this project.
Prior to its release on the App Store, this project spanned 10+ months; resulting in two completely separate builds, hundreds of custom designs, and thousands of development hours. This article only covers the graphic design process for the original app we were contracted to build. The design changed dramatically between this version and the version that was ultimately launched on the App Store. The design process(es) for the launch version of Staple, and the version of Staple 2 that followed, are covered in separate articles.
We were approached by a client who was interested in creating a mobile app for nutrition. In our preliminary meeting, the client communicated a desire to build an app that would intelligently recommend meals based on an individual’s desired body type without fussing over caloric intake. The idea was to make a healthy diet easier for the general public.
The app’s primary objective was to take the user’s current metrics (e.g. weight, sex, goal) and calculate the required calories behind-the-scenes. Then, it would select meals relative to their daily intake and show them the portions they should eat while providing instructions on how to prepare them.
Pre-concept renderings
Our company didn’t have a portfolio at this time, so the client requested free mock-ups based on wireframes they provided before signing the development contract. We provided the following mock-ups and numerous others based on the concept information provided.
Following the delivery of these rush mock-ups, we were officially contracted to develop the app. However, the design still had a long way to go.
Contract signed: a long way to go…
At this stage, the app didn’t have a name and many of the ideas were still being worked on. Apps are incredibly complex, so it’s usually smarter to graphically render an idea you’re unsure about before you decide to develop it.
Although the client liked the direction of the pre-concept renders, they wanted to see more ideas materialize. They also began considering some additional features such as workouts and a social media aspect.
They expressed their interest in the minimal design and style of Instagram. Many aspects of Instagram’s UX inspired the designs that would be produced thereafter.
“How about 4 Course?”
No self-respecting app should be without a name, so we used 4 Course as a placeholder.
The first batch of mock-ups we produced after winning the contract consisted of revisions that simplified the meal page, removed some of the colors, and materialized more ideas. We shamelessly copied Instagram’s layout for the social feed as it wasn’t exactly our flagship feature.
We also rendered the “Spotlight” section, which was supposed to be a feed of articles from industry experts. Last, we hastily put together renderings of an account page.
The hype was beginning to build… it’s exciting for small teams to watch dreams come to life. We knew the mock-ups we produced were far from perfect, but they certainly didn’t have the worst designs on the App Store for the time period… 2017 was an uglier time, okay?
Don’t worry – things get better.
“4 Course… it’s just one meal too many.“
Surprisingly, the name 4 Course was fairly well received. Maybe it’s because the name rolls off the tongue? Or maybe it’s because it reminds us of four-score and seven years ago ~ the introduction to Abraham Lincoln’s infamous address. Who knows?
The only problem was… It’s just one meal too many. As comical as that was, it’s true. During the planning phase, we had discussed having the app recommend either 5 meals a day, or 3… but never 4. It just wasn’t going to work.
For the client, something else didn’t feel quite right about the design, either. They felt like it was too vibrant in all the wrong places and too dull where it shouldn’t be. At this point, we just wanted to start development as soon as possible. Our creativity seemed to have hit a wall.
Then, seemingly out of nowhere, one of our designers found inspiration while they were on vacation and decided to flip the script entirely…
Introducing an app called “App”
One of the clients had mentioned how great it’d be if the app’s name was something as simple as “App”. Everyone agreed that would be pretty awesome.
But the notion that the designs were too vibrant in the wrong places and too dull where it mattered most really stuck with us. What caused that and how could you fix it? The answer came to one of our designers on a pleasant summer evening… make it dark.
They took the original meal page and drafted dark renderings. It had to be refigured, anyway, because the client didn’t like the perspective of looking directly down at the plate.
A new idea also stemmed from these… “What if we changed the color scheme based on the user’s goal?”
Okay, the dark is in – but the new 45º angle is out!
Our clients loved the new approach to the app’s design. It solved all the right problems and simplified the navigation.
We’re glad they hated the new plate perspective, too… because quite frankly, so did we. It didn’t make a lot of sense because the app was supposed to resize the user’s food to provide a visual reference for how big their portions should be. This was before augmented reality, so that idea was almost impossible to accomplish from anything other than a 90º angle.
We went to work re-skinning all the original designs for the other tabs on the app. While it was a neat idea, our developers shut down the possibility of changing the app’s color based on the user’s goal because they were already being tasked with more features than we originally bargained for.
The Final Design
We finally saw a light at the end of the design tunnel. Our client was thrilled with the direction of the dark theme and just wanted to see the rest of the app skinned accordingly. We received their verbal indication that the next delivery of mock-ups would be approved to move forward with production, assuming nothing unexpected happened.
These mockups were approved and development began. The name changed from “App” to “Staple” during the course of development after we discovered that the App Store wouldn’t permit an app named “App”. We also replaced the plate with a cutting board as part of our ongoing effort to make the food look more realistic. That issue ultimately became the kryptonite of this project.
Dead on arrival
Unfortunately, this idea was much better in theory than it was in reality. The client ultimately decided not to release the finished build because no amount of effort could produce a realistic visual for the meal if the user was able to manipulate the portion sizes.
We had to cut several concepts and go back to the drawing board. The entire library of over 500 meals with painstakingly edited images was scrapped, and most of the app’s core functions were no longer useful. After 6 months, our teams collectively made the difficult decision to start over.
We moved forward together and produced a new version of Staple three months later that was built on all the knowledge we had gained from the beta covered in this article. That version became an app known as Staple.
