Solo Project in
During employment at
Duration
2016
Persistent Systems
2 weeks
About
An iPhone application primarily for users to discover deals at various stores in their vicinity, while also allowing them to create wish-lists, exchange gift-cards and manage receipts.
An iPad application for store - owners to send contextual coupons and cards to prospective customers in accordance with their wish-list and purchase history.
The Challenge
To create visual design mockups for the mobile and tablet versions of the app from the wireframes so that it is usable and intuitive while making it look aligned with modern digital design and aesthetics.
The Design Process
1
ANALYSIS
Study of brand language from other products of the same brand
(as style guide was not given)
Moodboard
Creation of style guide
2
DESIGN
Icon design
Design of individual components
Creation of the final layout
The Outcome
iPhone
Wireframe
• The original brand colour palette (brand cannot be disclosed) was incorporated in the visual design. The banner was designed so as to attract immediate attention to the viewer's eye with the use of typography and imagery.
• As per the current trend, cards were used as content holders for each item, which help us relate various digital components to physical objects in real life.
Wireframe
• The receipts were in the form of a carousel instead of a list, to reduce the number of interactions to view the details of each receipt.
Wireframe
Visual Design
• The interaction pattern was changed to a scrollable carousel for 'Local Deals'. A half card indicates that the item is scrollable, and is suggestive of an interactive element.
• The offers cards were made image dominant with focus on the offer by highlighting the discount percentage in red.
Flat Design trend was followed for vectors.
Visual Design
• The receipt detail page was designed to contain only essential information, with the focus being on the photo of the product.
Visual Design
• The map of the mall was created in a monochrome palette, with the stores colour coded according to the product category. Supporting icons were used to indicate each type of product.
Wireframe
Visual Design
Wireframe
Visual Design
Wireframe
Visual Design
iPad
Wireframe
Visual Design
• Green and yellow rings were used around the customers' photos to indicate their proximity to the store.
• Gift cards have images that span across the entire card, making them more attractive and easily comprehensible.
• iOS guidelines were followed for standard components like tabs.
More wireframes that were transformed to visual design mockups
Visual Design
• When a particular customer photo is tapped on, the rest of the photos would be treated with a blurred, hazy filter to draw complete focus to the selected entity while not wiping out the other entities entirely, so that the user would still stay in a familiar environment.
• The wishlist of the customer was made to focus on the images of the items more than the text as it would be easier and quicker to register images instead of words.
• The customer's profile is demarcated with a separate section in order to distinguish it from the product details.
• The gift cards were given a treatment that resembled real cards by using shadows, enabling the user to intuitively drag and drop a card to the desired customer.
