Context

This project was based in a marketing strategy that the goal was to kick of an effective new quality market positioning. To achieve this goal the plan was to create a new premium category for the core product, with a minimalist and modern look and feel.

My role

Challenge Deadline

From 12/01/2022 to 14/01/2022

My role was to make this market positioning possible, through the challenge of applying only interface/visual design techniques to deliver high fidelity responsive screens for desktop and mobile devices.

PROBLEM STAMENT

Problem

How can we achieve this market positioning?

Change consumers perceptions through a transparent strategic positioning, which aims to reach a share of the market, maintaining company identity and cohesion between the existing categories and the new premium one, a consistent, but significant change of the look and feel. In addition to reach this new share, it is essential to support current customers so they are clear about the benefits of this new positioning.

Goal

Users

Deliver a premium experience, in the form of high-fidelity screens for a web responsive platform, with a modern and minimalist design, considering the characteristics of the core product and its current positioning in the market.

Checklist

  • Web responsive

    • Premium experience (based on core)

      • Modern

      • Minimalist

E-commerce sellers entrepreneurs, from all type and sizes business.

The users can have any technology knowledge, meaning they can be advanced, intermediate or basic knowledge in tech. Also the age variation can be very wide and from any place of the world.

Observation: I had no contact or was able to do any research, interview or survey with current customers. Having access to this kind of data can make a huge difference to the project. As always, I did some desk research from my home office to learn more about this niche and potential customers.

Proto Personas

Proto personas was important to reduce internal BIAS and be more aware of it could be the users behavior

STRATEGY

Research

Competitive analysis: I conduct competitor research to understand how they position themselves in the market, visual characteristics and user ratings. The competition: Wix, Nuvemshop, Wordpress and Shopify.

Top player analysis based on premium positioning (experience) market: Apple, Youtube Premium, HBO Max, Uber Select / Black, Kinoplex Platinum and others. I also consider premium products like coffees.

white green and orange box

RULES

Design Principles

  1. Don’t hide content: Not assume that the mobile users will be in rush and that they won't appreciate all available features or contents from all the differents categories.

  2. Most important at the top, less important at the bottom: Be sure that the displayed information that follows a good hierarchy distribution.

  3. Less is More: A classic! But very important to keep in mind. Create a simple and interactive navigation.

  4. Consistency is key: Even when we are evolving and changing, consistency must be the center of it all.

I separated a few design principles to be aware through the project, because it was important for me to have a solid base.

VISUAL DESIGN

Premium Category

Premium experience: Exceeds basic courtesy, helpfulness, cashier and floor support. Encourage customer loyalty through creating exclusivity and luxury experience.

Colors: Color for premium products usually are metals, shining, dark, sober and / or smooth.

Features: Special features can take a premium market positioning to a whole new level.

Pricing: Premium pricing strategy, it's when the company want to charge higher prices than their competitors for their products.

Awareness: To let customers know about different packages options that'll suit them best.

Value: Value is always important, but when combined with business strategy (like a solid market positioning) it can build a faithful audience.

One of the project topics that caught my attention was the positioning of creating a premium category. When we think of something premium, it's almost like it's special and some points come to mind.

RULES

Tasks

Requirements

Base on the information that I receive, plus the information I could get online, I studied how their requirements were current applied, then I looked for a few design decisions on the image, to better understand them.

Color pallet: I didn't want to go too far from the brand or core product identity, but I could user the dark colors from the pallet in my favor and invert a few combinations to achieve the premium market.

Font Rubik: Rubik is a modern, versatile and easy to read font. That choice of font show me that the current product is already align with a modern style.

Icons: In the image that I receive, I was glad to see that the icons came with text, mostly on the menu, improving usability by making the options fast to recognize.

UI Principles: I looked for patterns from features and based on the company niche, consistency, screen alignments, highlighted topics, information architecture, user control and freedom, feedbacks, components or others.

I received an image of the main product and the requirements was:

  • Visual hierarchy

  • Spacing

  • Organization

  • Contrast

  • Other UI/Visual Design elements

PATTERNS

Hierarchy

in UI

  • Z Pattern: It was applied to distribute all the cards, creating a direction for dynamic reading from left to right.

  • F Pattern: Specially used for content inside cards, where we have a significant amount of text, in order to facilitate the reading of the information that requires greater attention.

In addition to distributing the elements thinking about the hierarchy and information architecture, I also used strategies to distribute related elements by using weights, colors and sizes. (design principle 2. and 4.)

The objective is to organize the content of the interface in a friendly way to be able to communicate with the user, hold their attention and, eventually, direct them to the information they want in a free and flexible way.

DESIGN STRUCTURE

Responsive

Grid System

I applied a 12-column grid (conventional) for desktop and 4-column for mobile with stretched type, to facilitate the proportion of elements, alignment and consistency.

What I've learned?

From a business point of view, a premium positioning requires more than a look that aligns with the characteristics of a premium service.

From a design point of view, working from an already established product with a clear user journey is a completely different challenge from working on projects from which we start from a zero, even though we can consider that all the answers are already available and that the solution is as complete as possible, it is always necessary to take 3 steps back, carry out studies, research and apply processes to understand all user needs and the peculiarities of the project at the moment.

Connect on LinkedIn or get in touch via email.