Home
Currently, the product is available only as an Enterprise solution. Adaptation is needed for individual users with autonomous access through an e-commerce platform. Existing challenges include complex setup, limited customization options, insufficient information, and integration issues.
Adapt the desktop application for e-commerce integration. Simplify onboarding for the loyalty program on platforms like Shopify with user-friendly setup, enhanced customization, clear resources, and efficient tools. Aim to create a seamless experience for merchants and customers, boost satisfaction and participation, reduce support load, and eliminate the need for customizer consultants.
Facilitating an effortless onboarding experience, the upgraded solution incorporates an intuitive onboarding wizard. This simplifies the process, ensuring a smooth integration into the platform. Additionally, customizable templates for loyalty program creation have been introduced, enabling businesses to personalize their programs with ease. These enhancements contribute to a user-friendly and engaging experience, ultimately boosting satisfaction and participation in the loyalty program.
The design process description is based on work with a commercially owned product at the company where I am currently employed.
Define a scope of issues based on user data from the previous version of the application, as well as data gathered from the support center and customer consultants.
Facilitate a workshop to identify core functionalities, and gather insights from support teams and customer consultants.
Conduct competitive benchmarking and documentation to gain insights into market trends and technical capabilities.
Creating user flows for key personas and functionalities, and user journeys capturing both emotional and functional aspects. Developing wireframes.
Develop a design system and create the primary product flows, followed by a prototyping phase for future product testing.
Design a landing page to support future product launches and participation in pre-sales.
Conduct sessions with both new and experienced users to evaluate the core functionality of the product.
Core functionality identified through user data from the previous version of the application, as well as insights from the support center and customer consultants.
.jpg)
Prototype testing was conducted using Maze. Ten participants were selected, including six experienced marketers and 4 interns from the company. The testing revealed how users managed tasks, including errors, backtracking, and successful completions. The heatmap highlighted unclear interface areas, guiding the survey and feedback questions. A key success was the clear and understandable flow for creating the first program. However, issues such as locating widget creation functions and generating referral link conditions emerged and will be confirmed through further user feedback.
Feedback was collected to expand on the data from prototype testing. A survey was conducted, focusing on the results of the first task, pain points, and additional feedback. From the 10 responses, it was determined that "Personalize Tool" should be changed to "Customize Widget" for clarity, and "Get Friends and Earn" updated to "Referrals" for better understanding and consistency with a previous app version. This feedback highlights how user input can enhance an app at various stages.
The initial user testing of the prototype identified necessary adjustments for key screens involved in setting up the first program. Feedback collection validated these findings, and the subsequent phase using a heatmap demonstrated that revising the titles resulted in more accurate user selections. This indicates that targeted changes significantly improved user decision-making.
.jpg)
.jpg)
Wireframes enable early-stage testing of design solutions. To structure the landing page design process, wireframes were created for subpages as well as specific blocks.
%20(1).png)
One of the key functions of a landing page is to familiarize the customer with the product, as well as give access to a demo version of the application.
.png)
Part of the architecture information that is relevant to this design case. The path that will be presented later is highlighted in color.
User flows map out the paths users take to complete tasks. They help visualize the user journey and identify potential bottlenecks. Here are two key flows that illustrate the user's path during application installation and onboarding.
Wireframes help visualize the layout, define the interface structure, and improve communication among team members. Here, examples of different levels of detail are shown.
The enrollment flow includes an introduction to the terms and conditions of accessing and synchronizing data, as well as creation of a user account. Here are the screens where the user's journey begins.
.png)
User flows for onboarding and program launching. As well as the first screen of the onboarding process shows the full functionality of the program and offers the user a choice of the way forward.
-min.png)
The minimum set of necessary screens for creating a program using the template with functionality that covers the main promotion parameters.
.jpg)
%20(1).png)
The dashboard allows the user to monitor and manage promotions, customers, and other store data. It can be flexible and customizable to suit specific goals and needs.
%20(1).jpg)
It includes color styles, typo styles, icons, components, and layout guidelines. This system helps developers and designers build applications with a unified style and user experience.
.png)
