- Design an Intuitive Solution
- Easier the Experience
- Increase Conversion Rate
- Task Analysis
- Low Fidelity Wireframe
- High Fidelity Mockup
- Test Results
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.
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
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.
The visitor can be Segmented by
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.
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
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).
Where the user will create a complex combination of segments (Actually, the Peter's Use-Case I described above).
To understand the product & working process, I had to analyze similar products. I checked Optimizely, Google Optimize & Qubit & they helped a lot.
- Google Optimize
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.
How the user interacts with the website & when they come is described the user behavior.
Where the user live & what is there purpose is described the user's geolocation.
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.
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.
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.
Overall Rating for usability: 7.5 out of 10Amit DasCustomer Engagement Executive
Suggestion: Changing in Information Architecture
Overall Rating for usability: 5.5 out of 10Ahnaf AkifSenior Associate, Account Manager
Suggestion: Wording, adding/removing information
Overall Rating for usability: 8.0 out of 10Rubayet Ahmed ImranA/B Tester
Suggestion: Need to add more functionality