UI/UX • Concept

Dynamite App

I began this concept by re-focussing on what the customer wants to do when they open the app - shop. The current app seemed more concerned with pushing new functionality than giving the user a concise shopping experience. Various buttons abounded, all in the same colour as the rest of the interface elements, which made them hard to identify. Touch targets were strangely grouped, small, and badly spaced, which makes user actions more difficult. Interaction methods change from page to page, making learning the interface less transparent. Icons in general were overly complex in form, and in some cases failed to properly describe the linked function or content. Finally, the mark within the app icon itself was oversized, which dilutes the impact of the brand.

I began to address these issues by giving the whole app a consistent visual hierarchy, with clear delineation between titles, text, prices, and touch targets. Dynamite's brand colours are black and white, but another colour was needed to differentiate touch targets from the rest of the interface. Gold was chosen for this function because it is used as a decor accent colour at Dynamite retail locations, and is a colour that customers associate with high fashion. All actionable elements were coloured, resized, and given more margin to improve touch accuracy. Where necessary, iconography was simplified or re-drawn to add more brevity.

Next, the problem of how the actionable elements were grouped needed to be solved. Both search functions were combined under a single search icon in the top bar. The scrolling clothing category menu was standardized across all list screens, starting on the very first screen of the app, ensuring consistency and helping users learn and understand the interface from the very beginning. I better organized each screen by removing contextual functions from the overly crowded top bar (see original app's product detail screen), and added them to a menu of their own below the category menu, allowing them to appear as needed while keeping the functions in the top bar consistent.

The product detail screen was then reworked and simplified, grouping important or similar functions together. Product images were resized to give more breathing room to interaction and information, and visual cues introduced for products with multiple images. Instead of hiding product details in a hard to find button in the menu bar, I added them to the bottom of the screen, making vital information a simple scroll away.

Finally, the app icon. Agreeable margin was given to the Dynamite mark to improve its legibility and impact, as well as its visual balance.