DELIVERABLES
Research
User Flows
UI Visuals
Prototype
DSM Library
ROLE
Digital Product Designer
YEAR
2023
PROGRAMS
PROJECT OVERVIEW
PROBLEM STATEMENT
Upon signing up to the platform, users were greeted with a mere notification box instructing them to verify their accounts – no warm welcome, no guidance, no clear next steps. The verification pages, segmented into cards for file uploads or questions, lacked clarity and functionality. Users were left uninformed about expiring verifications, and there was no mechanism to encourage verification for the open market. The challenge was to devise a simple yet multifunctional banner that could seamlessly guide users through various stages.
ROLES & RESPONSIBILITIES
In this project, I assumed the leading design role, responsible for crafting high-fidelity prototypes and handing over precise design documents to developers. Collaborating with a Project Manager and occasionally interfacing with developers, I spearheaded the design perspective, presenting solutions to shareholders. My daily engagements with the Project Manager were punctuated by a dedicated design week workshop at the office, where this project was one among many I contributed to.
DURATION & HANDOFF
Spanning 4 to 6 weeks, the project commenced during a high-paced design week workshop, where it was initially explored but subsequently put on hold. Picked up a few weeks later, the design was finalised in under two weeks. Utilising Invision, I uploaded Sketch art boards, updating the entire company through platforms like Slack, Asana, or Jira. These art boards, designed akin to a PowerPoint presentation, served as comprehensive prototypes, encapsulating the solutions, questions, future enhancements, behaviours, use cases, prototype hints, and other vital details. This approach ensured a smooth transition of the concept, helping engineers grasp the essence of the design and how it functions.
SCOPE & CONSTRAINTS
The project's scope revolved around creating intuitive banners to guide users through the verification process. These banners were designed to provide clear next steps, direct navigation, application status updates, expiration notifications, and even upsell opportunities for open market verification. A subtle yet significant constraint was the need to avoid red or green color schemes for first-time users, ensuring that the visual language did not mislead or confuse the unverified users.
RESEARCH
Under the constraints of a tight timeline, our project faced the challenge of conducting in-depth market research within a limited period. While this scenario restricted our ability to delve deeply into the verification processes of direct competitors, it opened avenues for a more creative approach to the user flow. I pivoted our focus to analysing a broader spectrum of digital platforms where verification processes play a critical role. This included exploring various crypto exchanges, online payment portals, and applications that necessitate the upload of important documents and answer questions. These platforms provided a rich comparative landscape to understand diverse verification strategies and their implications on user experience.
In my quest for innovative UI ideas and to compensate for the gaps in direct competitor data, I turned to Behance and Google, two sources of creative inspiration. Behance, with its vast collection of design projects, offered a window into the latest trends and best practices in UI design, particularly those that could be adapted for our verification process. Similarly, Google served as a gateway to a multitude of resources, from design blogs to case studies, offering insights into how different industries approach user verification. Most of the examples I found weren’t related to our problems so I gathered the most valuable ideas and inspiration onto an art board. This not only served as a vital reference but also as a springboard for brainstorming sessions, where these concepts were fleshed out and transformed into actionable design strategies for our project.
UNDERSTAND
At the outset of the project, the issues we faced appeared straightforward, yet the complexity of user-specific verifications soon became apparent. The unique and customizable nature of each user role in the Plentific platform meant that the verification process had to be adaptable to different requirements. This presented a unique challenge, as Plentific had no existing features analogous to what we were developing, leaving us without a baseline of analytical data. To navigate this uncharted terrain, I relied on insights gained from my experience with similar platforms, blending this knowledge with innovative design and development strategies.
Collaboration with the project manager was key in tackling these challenges. Through daily stand-up meetings, we continuously evaluated our progress and adapted to new challenges. These sessions were critical for deep-diving into the nuances of each role, understanding how our feature would enhance user experience, address specific issues, and facilitate user interactions. Over time, we observed an expanding project scope, particularly with users registering for the Marketplace, who required a distinct verification pathway.
Our primary objective evolved into crafting a user experience that was not only intuitive and guiding for the current users but also scalable, allowing for the integration of additional verification steps in the future. This foresight was crucial in creating a flexible and robust verification system, capable of adapting to changing user needs and expanding platform functionalities.
What’s the problem you are trying to solve?
The problem we aimed to solve was enhancing the user experience for account verification on Plentific, which lacked clarity and functionality, especially in accommodating diverse user roles and their unique verification needs.
Who are the users and what are their goals?
The users are Plentific platform's diverse clientele, including property managers and contractors, with goals of efficient property management and maintenance facilitated through a streamlined, intuitive verification process.
How will they benefit from this feature?
Users will benefit from a more intuitive, role-customisable verification process, leading to improved platform navigation, reduced confusion, and a smoother onboarding experience.
What will the target persona be doing when they encounter this feature?
Upon encountering this feature, the target persona, typically a property manager or contractor, will navigate through a tailored verification process that aligns with their specific role and requirements.
What threshold of quality do we need in order for customers to experience care product benefits?
The quality threshold required is a user-friendly, intuitive interface with reliable functionality, ensuring a seamless verification process that enhances user satisfaction and trust in the platform.
What assumptions are we making?
We are assuming that users prefer a straightforward, role-specific verification process and have the digital literacy to navigate an improved, more intuitive system.
01.
What's the problem you're trying to solve?
Share your feature information here to attract new clients. Provide a brief summary to help visitors understand the context and background.
02.
Feature title
Share your feature information here to attract new clients. Provide a brief summary to help visitors understand the context and background.
03.
Feature title
Share your feature information here to attract new clients. Provide a brief summary to help visitors understand the context and background.
04.
Feature title
Share your feature information here to attract new clients. Provide a brief summary to help visitors understand the context and background.
05.
Feature title
Share your feature information here to attract new clients. Provide a brief summary to help visitors understand the context and background.
06.
Feature title
Share your feature information here to attract new clients. Provide a brief summary to help visitors understand the context and background.
COMPETITOR ANALYSIS
Facing time constraints and limited insights from direct competitors, I adapted my research approach to include platforms with comparable verification challenges. Exploring crypto exchanges, online payment systems, and document-intensive applications, I gathered valuable insights from their advanced verification methods. While these systems had different user narratives, their UI designs offered diverse approaches to user interaction, crucial for our objectives. This broader perspective was instrumental in crafting a verification process for Plentific that was both user-friendly and sophisticated. By synthesising these insights, I conceptualised several design options, each intuitive, flexible, and finely tuned to meet the specific needs of our varied user base.
PAINPOINTS
In tackling the Verifications project, I faced the challenge of limited research time coupled with little information about our competitors' verification processes. To effectively navigate this part of the design phase, I pivoted my research towards diverse platforms with relevant parallels, such as crypto exchanges and online payment portals. These platforms, while not direct competitors, provided valuable insights into friendly user interface designs.
Although these platforms catered to different user stories, their UI/UX designs offered versatile approaches beneficial to our context. This strategic shift in research was crucial in developing a verification process tailored to Plentific's needs. It allowed me to identify essential features and create a few conceptual designs, enhancing the user experience for our diverse roles and preparing the system for potential future expansions.
CUSTOMER JOURNEY MAP
In crafting the customer journey map for our verification project, we've distilled the user experience into key stages, from sign-up to the completion of intricate verification steps. This map charts the user's actions, their decision-making process, and the emotions evoked at each touchpoint, highlighting areas like the initial encounter with the verification banner and the selection of services. It's a strategic blueprint that not only illuminates our users' paths but also pinpoints opportunities for enhancing engagement and smoothing out any complexities they might face.
ROADMAP
We initially focused on deploying an MVP that promptly met user's fundamental needs. This phase was crucial for early implementation and gathering user feedback. As we progressed, our strategy included not only enhancing the user interface, such as potentially introducing a side panel for a more comprehensive overview, but also ensuring scalability. This consideration was pivotal in allowing the system to adapt and evolve, accommodating an increasing number of users and expanding functionalities without compromising performance or user experience.
IDEATION & DESIGN
During the ideation phase of our project, we explored four unique concepts, each crafted to tackle specific challenges we identified in our initial research. These ranged in complexity, from enhancing banner functionality across multiple pages to integrating high-fidelity UI components directly into user flows. This approach allowed us to bypass traditional wireframing, streamlining the design process.
The first concept focused on a full-page introduction for new users, detailing the necessary steps for account verification and payment setup. This design was intended to keep users focused on essential actions before accessing other website features, with an eye-catching banner to re-engage users if they chose to exit the process.
In the second concept, I envisioned a side panel layout for the verification steps, providing more space for detailed information and a bird's-eye view of the entire process. This design allowed users to quickly address issues via linked modals without leaving their current page.
The third concept involved integrating a checklist into the banner. This design made the verification process more straightforward with fewer clicks, although it required some information trade-offs to maintain banner size.
The fourth concept featured a to-do list card on the dashboard, offering more details than the third concept but still compact in design. However, this idea posed issues with the 'get verified' button, leading to user confusion, and was ultimately discarded.
Throughout this process, I developed a consistent, engaging, and intuitive design language for the platform, creating an extensive library of design components in Sketch. We paid careful attention to iconography and colour themes to reflect the various statuses of the verification process accurately.
After multiple iterations and stakeholder feedback, we finalised a minimum viable product (MVP). This MVP effectively displayed user progress and verification status using a progress bar, counter, and adaptive copy. We thoroughly tested the high-fidelity designs, ensuring they met user needs and the company's objectives. The feedback led to further refinements, aligning the design with project resources.
Finally, we validated these user flows with the Project Manager and stakeholders, advancing to the development of detailed high-fidelity prototypes. Integrated into Invision, these prototypes provided an interactive preview of the final product, essential for precise feedback. This phase was critical in ensuring that our designs met user expectations and set the stage for a user-focused final product development.
HOW MIGHT WE
How Might We" statements were crafted to stimulate creative thinking and problem-solving.
How might we effectively communicate the status of each verification step (like 'missing', 'in review', 'failed', or 'about to expire') to enhance user clarity and reduce confusion on a banner?
How might we design the verification process to be intuitive and user-friendly for diverse user roles, while maintaining security and accuracy?
How might we ensure that users are aware of the dependencies between different verification steps and understand the sequence in which they need to be completed?
How might we implement the side panel code wise?
How might we integrate supportive features, like help tips or FAQs, within the verification UI for immediate user assistance?
How might we design the verification process to be equally effective on both mobile and desktop platforms, considering the different user interfaces and interactions?
How might we be able to hand hold more the user through his process?
USER STORIES
We developed user stories closely aligned with our users' experiences. These stories guided our design, ensuring that each feature addressed real user needs and real statuses of the verification requirements. This approach helped us empathise with our users, leading to a verification process that was intuitive, user-centric, and highly effective in meeting their specific requirements.
User story 1
As a new standard contractor, I want to see a clear verification banner on the homepage upon first login, so that I can immediately understand the required steps and next actions without feeling overwhelmed or confused.
User story 2
As a contractor who has set up service info, I need the banner to display my verification progress with a status indicator like 'in review' or 'missing', so that I can track my status intuitively and complete pending uploads efficiently.
User story 3
As a contractor configuring work areas, I want the verification process to adapt to my role-specific requirements through a tailored checklist or progress bar, so that I can navigate a seamless, role-customized flow that aligns with my property management needs.
User story 4
As a contractor with all verifications passing, I expect the banner to appear when a verification is going to expire, so that I can quickly update it and continue working without disruption.
User story 5
As a contractor adding a new service requiring a trade restriction certificate, I want the banner to highlight new dependencies and provide clear next steps or help tips, so that I can upload documents quickly and maintain compliance without delays in my workflow.
HI-FI DESIGNS
In the pursuit of an effective MVP for the Plentific project, we crafted several design concepts to meet the cross-functional team's vision. The initial MVP featured a streamlined progress bar and counter, providing users with essential verification status at a glance. From there, we evolved the design to include a detailed checklist, enhancing the informativeness beyond the basic progress indicator. My preference leaned towards a side panel design for its superior user experience, which would integrate seamlessly with existing platform elements, offering familiarity and ease of customisation.
The journey from concept to high-fidelity design was meticulous, with each prototype iteration in Invision bringing us closer to a user-centric solution. These prototypes served as comprehensive visual aids, illustrating user interactions and potential enhancements. Through iterative testing and stakeholder feedback, we honed the design elements, ensuring they effectively addressed user challenges and aligned with our overarching goals. This process of refinement was crucial in simplifying the user journey and maximizing the utility of allocated resources.
To ease understanding, the prototypes were presented in a powerpoint-like format, encompassing the entire design process ranging from mockups, concepts, to high fidelity screens documenting the behaviour, use cases, future improvements, and more. This holistic presentation greatly aided in the understanding of other project managers and developers.
In the final stages of the Ideation & Design phase for the Plentific Verifications project, I've curated a selection of screens that represent the culmination of our design evolution. These images showcase the most refined prototypes—each one a testament to meticulous design thinking and a user-first approach. The layout, intended for my portfolio, demonstrates the clean, intuitive interface we've achieved, highlighting the progress bar, checklist, and other key features that will streamline the user's journey. This visual arrangement is not just a display of aesthetics; it encapsulates the practicality and innovation at the heart of our solution.
TESTING & LAUNCH
The refined banners, integral to the verification journey, were crafted to effortlessly guide users, with transparent indicators of their progress and current status. Although we lacked conventional analytical metrics, the user experience itself became our barometer for success, affirming the effectiveness of our solution. The positive user feedback underscored the value of our user-centered design philosophy, which streamlined the verification process and reduced friction significantly.
Continual enhancement based on user input is the next chapter in our journey, with personalisation of notifications earmarked as a key upgrade to deepen user engagement. The project's success has reinforced the importance of detailed user flow mapping and the iterative design process. While the design benefited from our approach, we acknowledged that a more robust initial research phase could have amplified its impact. The forward-looking strategy includes a more generous allocation of time for research, laying the groundwork for even more nuanced and impactful design solutions. The test launch's success, buoyed by resoundingly positive user feedback, has marked a confident stride toward the project's broader ambitions.
CONCLUSIONS
The verification feature was meticulously crafted to clarify and facilitate the complex process for users across diverse roles. Our design solution effectively addressed all the identified issues, culminating in a banner that stands out for its aesthetic appeal and its substantial enhancement of the user experience.
Acknowledging that there is always potential for further refinement, we noted the possibility of a side panel—a concept not included in the MVP but promising for future usability enhancements. Such a feature could simplify the navigation by clearly delineating the verification steps.
Reflecting on the project's success, we recognise it as a testament to solving real user challenges through thoughtful design. It also highlighted the necessity of a comprehensive initial review of features, underscoring the value of integrating all feasible improvements early in the design process. This insight will be invaluable for future projects, ensuring a thorough consideration of all innovative features from the outset.