Vakkorama
Brand new, youthful look
Designed a new e-commerce app for one of the most important fashion brands in Turkey. They're known for their unique collections and unorthodox store experience for the past 40 years, targeting young adults.
Experience Design
Visual Design
Motion Design
2016
The app was planned to be on both phones and tablets. That meant we needed to consider certain layout changes in the larger screens to take advantage of the more generous screen estate.
Vakkorama does a great job providing a special shopping experience in their retail store. The characteristics of the brand is truly reflected in their stores and customers can immediately feel the youthful, energetic vibe thanks to the brand's attention to detail and tasteful architectural touches.
Vakkorama does a great job providing a special shopping experience in their retail store. The characteristics of the brand is truly reflected in their stores and customers can immediately feel the youthful, energetic vibe thanks to the brand's attention to detail and tasteful architectural touches.
About
This allowed us to take a step back and designed not only an app but a brand new visual design approach along with a tone of voice to allow users feel the same youthful and energetic experience as they would in the stores.
Designing a brand new app was our chance to bring Vakkorama's true identity to the digital screens. Even though this was a quite establish brand, they were quite open to new design approaches for their new e-commerce app.
Approach
We also had a requirement later on having a virtual member card within the app in a prominent place for customers to use in retails stores for member exclusive discounts. An Apple Wallet integration wasn’t available at the time so the card had to live in the app. This is also integrated into the onboarding experience.
After aligning with our client on design principles and requirements, we started with defining key user journeys in the app and mapped out each of them designing the flows. This helped us have an overview of each task and the screens to be designed beforehand while getting an early indication of where users may struggle and how we can address possible issues on the design end.
Flow
This allowed us align with our client on the basics of the design but left room for further conversation on visual design that comes later on. It also communicates the difference between the wireframes and visual design more clearly to our partners.
Upon completing each flow, we created wireframes to set out the layout of the key components and interactions within the app. We construct the overall layout and keep the visual treatment to a minimum to give more freedom of exploration when it comes to visual design.
Wireframes
Avenir Next Demi Bold // Bold
The clean sans-serif font used on titles and key interaction areas to provide a clean look across the app, representing Vakkorama’s dynamic and modern character.
Fira Sans Mono Regular
The monospaced font, combined with the sans serif Avenir Next, generated a unique tone exclusive to Vakkorama. A reperesentation of the brands unsual shopping experience in their stores.
Typography
We created a new set of icons for the project. Icons are placed in a 24x24px canvas with 2px strokes. Applied cut outs to some icons as a unique touch to the set as well. To accompany our primary font Avenir, the icons constructed with sharp corners avoiding any radius usage. Certain icons such as Card icons, use a subtle radius around the corners to have a better physical imitation of cards.
Iconography
Vakkorama’s monochromatic colour palette needed more attention and vibrancy. We reimagined the digital branding overall to align with the experience in the stores. Introduced more vibrant and energetic colours to bring the brand to life. This was a bold approach that was appreciated by our partners.
Colour Palette
Plain white
FFFFFF
Bright Violet
651FFF
Sky Blue
00BBE6
Fresh Green
00BC9A
Candy Red
FF1744
Exotic Orange
00BC9A
Electric Yellow
00BC9A
Deep Indigo
1D1137
In listing page, we aim to present the essentials and not to clutter the page with details. Keeping it minimal and let the product photos dominate the page.
For featured products, we created a more generous space for them to shine brighter in the list.
Product listing
Just as in the featured page, each listing page has a hero image to represent the category along with a copy that speaks to the audience.
Search
Along with the traditional search, we introduced colour search and barcode scanning for users to give them more options whether they're in the store or not.
Welcoming users to the app by promoting the benefits of creating an account or signing in.
Existing customers are welcomed back on the login screen, while new customers are encouraged to join Vakkorama on the sign up screen addition to benefits shown on onboarding page.
Onboarding
Onboarding on iPad
On iPad, the images gloriously covers larger screen. It’s a great way to celebrate the brand photography and engage a visual comminication with the customers.
Vakkorama Card
Virtual member cards designed from scratch with customization options. These can be used in the store by getting it scanned prior to purchase.
We imagined a magazine style shopping expreience for the users. Explore page is the place to browse and discover featured and new products from Vakkorama. Colours and off grid text layout brings a more dynamic feel.
Featured
Hero section sets the entire mood for the rest of the page. This is especially useful when the brand introduces a new concept and collection in each season. Combined with the rest of the content in the page, this is a great way to communicate the new season drop to the customers.
A place for the products to shine, the page allows users to see the chosen product up close with full details. Users can see available options, check in store availability and learn further information about the products.
Product detail
Product detailed page uses a different layout to take advantage of the larger screen size.
Product options and purchases are located on the left side of the two column layout and follows users while they are scrolling down the page to see additional information and actions on the right side of the layout. This way we ensure that users have full access to purchase options whenever they need to.
Vakkorama card allows customers to easily take advantage of the membership benefits with their online and in store purchases. With customisation options, it’s also a great brand element that is also ownable by the customers.
To celebrate the all new colour palette, in the card detail page, the colour of the card covers the entire screen.
Vakkorama Card
After the initial customisation, unlike physicial cards, customers can change their card colour and design instantly within the app. This also allows us to come up with new design choices later on and have seasonal and limited edition designs without any printing or logistics involved as well.
There are opportunities in error/success states to reach out to your customers with a unique tone of voice.
Having these additional screens as a medium to create something fun and memorable was a part of the experience we wanted to provide.
Addressing our audience
