COCA-COLA HELLENIC
Optimizing complex promotional offers and solving for online ordering
Client
Coca-Cola Helenic
Sector
Consumer Packaged Goods
Challenge
Determine key features and solve for complex promotional offers in getting users to purchase high quantities and try different products that they own.
My Role
Lead UX Designer - Creative Discovery, Competitive Analysis, Feature Setting, IA Creation, Prototyping
Research
User Experience Assessment
In an effort to provide buyers with a robust buying experience, the current portal offers a comprehensive ecommerce platform, an impressive suite of order management tools, and myriad reporting services. In bringing together these services to the user, however, not enough consideration was placed on understanding the user’s needs and prioritizing these services based on the user’s requirements. The challenge here is ensuring that the layout presents clear visual hierarchies of content and features with a mobile first approach and make the customer experience seamless.
Overall, I wanted to make sure the shopping experience leverages appropriate best practices in online retail and feels like a modern shopping platform for the users.
Exisiting Layout
Creative Discovery Blueprint
Personas
These are the users that I had designed for.
What do we want the users to do on the website?
By setting up an interactive meeting with the key stakeholders, and soliciting their feedback on what they would like to have on the website, I was then able to group the features by what the users will be doing.
High Level Information Architecture
Once we figured the feature groups and what the users will be doing within those features, we then could create the high-level Information Architecture which will provide a holistic view of how the user will interact and navigate throughout the website.
Competitive Analysis
Next, I provided an in depth comparison and analysis of available competitors within Coca-Cola Hellenic's landscape with the goal to learn not only what competitors are doing, but also have a solid list of what not to do. I've listed out in this analysis the best-in-class feature categorization and high-lighting the pros and cons for each competitor.
Additionally, this analysis will help inform me to specific design decisions related to features of Coca-Cola Hellenic website.
CUSTOMER TOUCH POINTS & TECHNOLOGY BASED FEATURE DESIGN
One of the key value adds that I determined was to improve the user experience on the mobile phone especially for the restaurant owners and managers who will be using their phones/tablets to scan and purchase orders.
Here are a few outcome expectations that I had to solution for:
-
What type of mobile hardware features (if any) could we use to improve the user experience and effectiveness of the CCHBC website?
-
How could we integrate these features into our website?
-
How could these hardware elements be harnessed to improve the overall user experience or facilitate the ease of a task?
-
In which features will we integrate them?
How could we utilize the camera to enhance the user experience?
Some examples:
● Scan QR code to perform an action
● Scan credit card / gift card
● Take a photo to be used or manipulated within the app
● Augmented reality
Hero Mocks
Once we were able to prioritize the key features and get business approval, the UI hero mocks are ready to be designed. I've designed the hero mocks here to show the happy flow of how the user will navigate to view their recent orders and balance at the home page and how they will place orders as shown in the products details page (PDP) and products listing page (PLP). In addition, the hero mocks will be used to define the overall look and feel of the application.
Style Guide
The style guide here contains product specific design elements, product specific selection points and the micro interactions. Once approved, it is ready to be delivered to the development team to use as a base for the entire project.
Style Guide
The style guide here contains product specific design elements, product specific selection points and the micro interactions. Once approved, it is ready to be delivered to the development team to use as a base for the entire project.
