Protein Ocean
We brought Protein Ocean's comprehensive e-commerce experience to mobile. From its extensive product catalogue and promotional rules to checkout and order tracking, we designed and built the brand's entire shopping experience as the app's own screens.
Overview
Protein Ocean is a Turkish sports nutrition brand offering protein supplements, creatine, amino acids, vitamins, and functional foods directly to consumers.
At Neon Apps, we designed and built the brand's iOS and Android mobile application, and worked on the backend behind it. Both platforms come from a single Flutter codebase, and together they cover the entire user journey from registration and login to the home screen, search, product categories, product details, cart, checkout, order tracking, and account management.
Our scope also included the app icon and visual assets for the app stores.
Bringing a complex shopping experience to a smaller screen
We used Protein Ocean's existing website as the starting point for the design process. However, bringing that experience to mobile required more than simply adapting web pages to smaller screens.
With eight product categories and products offering up to eleven flavours and three size options, the catalogue involved a considerable amount of information. Product pages needed to present nutritional facts, ingredients, usage instructions, laboratory certifications, and up to 12,000 customer reviews in a clear and accessible way.
The shopping experience also included discount codes, launch promotions, free shipping above certain order values, and gift selection at higher spending thresholds.
While these details could be displayed across longer pages on the website, the mobile experience required a more focused approach. We prioritized making promotional conditions and available benefits easy to understand, particularly within the shopping cart, where they could directly inform purchasing decisions.
Scope of the work
We approached the mobile shopping experience as a complete end-to-end journey, designing it, building it, and working on the backend underneath it.
Alongside the home screen, search, and category navigation, we built product detail pages with flavour and size selection, as well as expandable sections for additional product information.
The cart makes promotional conditions, free shipping thresholds, and gift selection visible. Checkout is three clearly numbered steps, so customers can see where they are in the purchase.
Beyond checkout, there is order tracking with a visual timeline, favourites, and account screens covering saved addresses, payment cards, notification preferences, and support options.
We also covered scenarios beyond the ideal user journey. Empty carts, searches with no results, account screens accessed without signing in, and the different order statuses are all part of the app.
Visual design
We developed the app's visual language to align with Protein Ocean's existing brand identity.
The interface combines clean white surfaces, deep navy tones, and a single orange accent colour. We used Inter and Lexend for typography, introduced a fixed bottom navigation bar for easy access to key sections, and highlighted the brand's own product photography throughout the experience.
During the design process, we explored three distinct visual directions, each with its own colour palette and typography choices.
The selected direction was the one most closely aligned with the brand identity already established through Protein Ocean's product packaging.
Our goal was to create a consistent brand experience across the website, product packaging, and mobile application.
Frequently asked questions
Let's Connect
Got a project? We build world-class mobile and web apps for startups and global brands.
