Confidential
Year
2018
Goals
- Design an Intuitive Solution
- Easier the Experience
- Increase Conversion Rate
Deliverables
- Task Analysis
- Low Fidelity Wireframe
- High Fidelity Mockup
- Prototype
- Test Results
Overview
Segmentation is used to show a special version/variation of the user’s webpage to a selected segment of users. Ideally, the user would enter the URL for that special version of his website on this tool and then specify all the segments that he would want to show this version to.
Colors
Blue
#1FAEFF
Pure Black
#000000
Faded Black
#212121
Grey
#666666
Fonts
Roboto
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
Challenge Statement
Design a custom segmentation paradigm, for selecting a specific segment of visitors, whom the user would like to show a special version of his webpage.
User’s Need
The visitor can be Segmented by
Location
Browser
Device
Time
Visitor Type
Operating System
USE CASE
The Perspective of a User who wants to segment a different version of his/her website.
Peter owns a computer e-commerce store in Canada, and wants to show a ‘Friday Macbook Special‘ offer page only to people who don’t yet own a Mac computer. He also thinks that people who own an iPhone/iPad might be interested in buying a mac computer.
THE CHALLENGE
Make an Intuitive Solution for The Complex Segmentation
The challenge is to design a UI module that allows users to easily select and create a complex combination of visitor segments that they want to target. At the same time, it shouldn't be too much in the user's face by showing them all the segment fields open, if they don't want to target any specific segment (which is the default action).
Define the Tasks of the user
Default Segmentation
Where the user will enter the URL and segmentation will be available to use, but the user won't/ don't want to use it (want to target all visitors by default).
Custom Segmentation
Where the user will create a complex combination of segments (Actually, the Peter's Use-Case I described above).
Competitor Analysis
To understand the product & working process, I had to analyze similar products. I checked Optimizely, Google Optimize & Qubit & they helped a lot.
- Optimizely
- Google Optimize
- Qubit
Information Architecture
I have tweaked the user's need for easy scanning. I categorized the visitor segmentation by 3 type & add some logical variable to filter their user more effectively & easily. Also used common words for reducing the cognitive load of users.
User Behavior
How the user interacts with the website & when they come is described the user behavior.
Geolocation
Where the user live & what is there purpose is described the user's geolocation.
Technology
What device user use from which browser, also which operating system they use is described technology.
Sketch the Idea
From the task analysis data, I sketched the basic interface in my sketchbook which helped me to visualize the low fidelity mockup of the final interface. I had to use my common sense & logic to make an intuitive journey for the end users. A lot of errors I found & fixed it one by one.
High Fidelity Mockup
Designing a complete visual interface is not so easy. I used figma for this job to speed up my workflow. When I started to design, I found a lot of missing states which were essential to creating a complete & functional experience. Also, I tried to keep the mockup simple but identical & consistent. I think a beautiful but inconsistent design would confuse the user to finish their task.
Prototype
I also made a prototype to understand the user journey based on the given data. In this stage, I found some errors & missing states & fix it accordingly.
Usability Test
I used some of my hypothesis in this design & needed to validate it with the actual users. For the test, I select 3 people from marketing executive & A/B tester. I think they were more related to work with this kind of interface. In the testing session, they were given two task (the use case explained previously) to complete without any learning curve. They were briefed about the tool first to understand what I wanted to test.