BerryMobile — A UI Design project
BerryMobile is a fruit distribution service that helps connect local Vancouver farms with consumers. They operate as a wholesale distributor to local grocery stores as well as run their own independent fruit stands where they sell their produce directly to customers. The opportunity they presented us was a chance to design a mobile application to enhance their fruit stands business.
Research
The Kick Off
During our first meeting with our clients we tried to assess their key values of their brand. How do they want to be perceived, what kind of business are they. Through a series of questions we identified three key insights:
Extroverted — Most farmers are introverts, the BerryMobile fruit stand act as an extroverted front that bridges the gap between producers and consumers.
Responsible — Buying from local farms helps the Vancouver economy as well as ensures the food bought is fresh and healthy.
Premium — The fruit provided is not a budget product, special care is taken to ensure freshness and quality of the product.
Gut Test
Twenty indivdual screenshots were taken from twenty indivdual websites. these screen were displayed to the client for twenty seconds each where they would give their initial reaction, rating the pictures on a scale of 1 to 6 based on how much they liked them. The screens that were rated highest were clean and structured with earth and vivid colors.
Planning
Design Inception
From our kick off meeting we created a singular “why” that encapsulated the essence of BerryMobile’s brand, which is:
“To cultivate the local community.”
From this we created two separate art directions. One focused on the extroverted tone of the fruit stands, focusing on a summer theme with bright fruity colors
While the second art direction focused on more earthy tones and ridged shapes, emphasizing the responsible aspects of the brand. The font would reflect the premium quality of the produce.
Style-tile
The first art direction had a mix of pastel fruity colors with minimalistic icons and summery fonts.
The responsible art style utilized a lot of open space and earthy greens and browns.
Combined Art Styles
The two art directions were presented to the client, who then picked elements from each direction to create an amalgamation that they felt best represented the Berrymobile brand.
The font, button style and most of the color pallet from the first art direction was chosen. The retouching of the logo from the second art direction along with the primary green color. The iconography was redesigned to match the flowey summer style of the first art direction.
Logo Update
Our clients informed us that a lot of their customers recognize them based on the bee logo. They felt that because of this we had to keep the logo recognizably similar. We felt that the logo in it’s current iteration did not accurately reflect the brand values and so we decided to do minor changes.
First, we removed the smile from the bee’s face as it cheeped the look of the logo. With the face removed the logo has a much more sophisticated look, which more accurately reflects the premium quality of the product.
Second, we changed the font. The original had a very ridged ‘tech’ feel to it, which made it look more like a mobile phone company than a fruit stand. The “berry” part of the name was given a very fruity typeface, where the ends of the letters ball up into what looks almost like berries. The “mobile” part of the name was given a thin minimal font with soft gentle curves which maintain it’s summer impression.
Design
Once the planning for the style was complete, work on applying the style to the medium fidelity wire-frames began. For the working high fidelity prototype we created a total of 16 screens, each going through several iterations.
The home page featured an easy select carousel menu that displayed the fruit available for purchase. The name and price of the fruit would be displayed under the carousel once the fruit was centered and selected, clicking on that fruit again would bring you the the information page. The chosen color pallet was selected since it would not clash with the colors in the pictures, despite the fruit pictures being colorful.
For the carousel a drop shadow was added to show depth of items, with the items to the left and right having an offcentered shadow to give the impression of a centralized light source as well as a smaller shadow to give the impression of the items being further away.
The location screen featured a map that utilized the same color as the rest of the apples color pallet. The icons on the bottom bar changes from a empty to a filled state to indicate that a change in navigation has taken place.
Once users have selected their fruit they are presented with a QR code that they can use once they reach the fruit stand to pick up the fruit they reserved.
The breadcrumb navbar at the top of the page utilizes the Berrymobile logo as well as the style colors. the Red color, as seen on most screens, is used to indicate an item of importance. It is used in all call to actions and elements that contain important information.
Prototype
The final prototype has been created in Invision and can be found here:
