The project below is one of the latest I worked on and it consists specifically of adapting web elements of their re-design to fit into a fully native experience. I worked on the adaptation of the Product Detail Page and its numerous edge cases.
The web re-design has been implemented by the Creative and UI team with principal focus on web elements and patterns.
Main goal of the project was to take the web elements and adapt these to the native mobile app grids, patterns and best practices whilst still maintaining the look and feel of the re-design and of the brand.
This project is strictly technical design adaptation, here are some examples of translated patterns and reasoning behind them.
Product Image
In the adapted version a header is present allowing the user to clearly see the full image and rendering the navigational controls slightly more accessible.
Contrary to web, a mobile app doesn't have an added navigation as one that is found in the browser, therefore the bleed would overflow into the app bezels on iOS and a part of the image would be cut off.
Product detail component
I worked on numerous edge cases, such as personalisation, gift messaging, delivery, out of stock notices etc.
Every edge case has been implemented into designs, components that have been added to a styleguide library file in Sketch and then documented every case with scenario and rules.