PORTFOLIO • UX/UI DESIGN

QRds – QR business cards app

QRds, a mobile application that is revolutionizing the way we share our contacts. QRds is more than just a business card generator – it's a solution that simplifies our professional connections while also making a sustainable impact. By reducing the need for paper and plastic business cards, QRds helps us take care of our planet while also streamlining the way we network and exchange contact information. This is exactly the sustainable product that I believe in.
Overview

I was tasked with managing the redesign and refinement of the Upservice.io CRM system UX and interaction, for the web platform. This included upskilling the Upservice.io Design Team through mentoring and development workshops.

What I started with:
  • Functional requirements and user roles
  • Access to the latest mockups and builds for testing
  • Onboarding workshops with stakeholders
Role & Duration

My Role: Owner, Product Designer, Tech Writer

Team: Product Owner, UI/UX Designer, Business Analyst, Frontend developer

Duration: 2 week (over 1 month)
Project Challenges
  • Usability & UX Design. Upservice.io users were confused by the platform’s chaotic information system and controls hierarchy
  • Design Process. Interfaces were not user-centric as a result of a poor UX research foundation and the internal team’s limited UX design expertise. The consistency of the product’s interface was negatively impacted by a weak design methodology, compounded by the absence of a design system.
  • Designer Approach. The designer responsible for tasks required significant professional development on how to effectively apply a systematic approach to deliverables and asset management.
My Responsibilities in Each Phase
Discover

  • Interview stakeholders and team to establish project expectations and requirements
  • Research and define Learning System Documentation requirements
  • Conduct user research via in-depth interviews with consumer groups
Define

  • Establish Information Architecture, UI Structure and Hierarchy
  • Complete Design Wireframing
Develop

  • Define user research analytics deliverables
  • Provide solution proposals based on user research and expertise
  • Upskill the Design Team through Mentoring
Delivery & Validate

  • Assess the performance of solutions through A/B Testing
  • Finalize the design proposals with relevant stakeholders against the project vision
Highlights
User Research – In-Depth Online Interviews
The project's user research was conducted through a series of in-depth online interviews with specific user groups, which identified how said groups used the platform and their respective pain points.
Data gathered during this process was predominantly qualitative, but valuable for assessing the system's present functionality.
Define
To inform the requirements for new Information Architecture, UI Structure and Hierarchy, data gathered during the in-depth interview process was analyzed and synthesized into usable insights.
The most significant failures of the existing design were identified through analysis of user interactions with the existing interface and each user group's specific pain points.
Develop
Insights gathered during the analysis of user research were transformed into clear deliverables and KPIs, for which design solutions were developed. I used these solutions as the basis for effective team mentoring sessions, identifying areas where team skills needed to be upgraded and providing strategies on how this could be achieved.
Finally, I transformed the proposed solutions into wireframes.
Delivery & Finalization
The performance of each proposed solution was assessed with A/B testing. The design proposals were then considered by a focus group and iterated further with the collection of stakeholder feedback.
Once a final design was agreed, I led a workshop session with the UX Designer to advise on the creation of final mockups.
Challenges
  • Large project scope. The project presented a significant scope of work and dependencies which were hard to prioritize and required a deep system approach
  • Limited time availability. My consulting time on the project was limited to 40 hours per month
  • Conflicting platform scopes. Different feature scopes for web and mobile platforms made delivering a design consistent on all platforms the harder option
Solution
By gathering insights early through user research, I was able to recommend where limited team resources should be prioritized at the start of the project, empowering me to work on iterative improvements to the project with the team.

Through this I delivered:
  • A dramatically improved layout concept, that was scalable for usage in other parts of the system
  • UI elements composition and hierarchy
  • Effective and evidence-based interaction principles, which simplified users ability to switch tasks, improved task interactions and making it easier to quickly review task lists
      Layout: Before
      Problems and mismatches with user scenarios logics I highlighted making user research analysis and my expertise:
      • Users doing too many clicks trying to manage tasks, see all attachments, comments and other task attributes. It obstructs focusing on their regular job.
      • Separate modal panels for single logical item confuses users with task operations. It makes management of task attachments and comments unavailable for users on the same screen.
      • There is no way to switch between tasks from a detailed task view. It decreases productivity and interrupts the normal flow of the primary tasks management user scenarios
        Layouts before - mockups.
        Layout: After
        What was changed:

        • Reduced clicks quantity to operate and manage tasks
        • Added ability to switch tasks from the detailed task view using a minimized tasks list
        • A detailed task view screen includes a separate vertical panel for comments and additional task attributes.
        These changes matches requirements synthesized from user research analytics and workshops with stakeholders.

        Layots before & after - mockups
        UI Changes
        After analysis of user research insights, I proposed UI changes to improve information hierarchy, logical structure, intuitiveness and learnability.
        Task description & details block
        Upservice Tasks block variations - before and after.
        Comments and additional information block
        Comments and additional information block - before and after.
        Final Result for Current Iteration
        Final Result for Current Iteration - Upservice Tasks screen improved and updated.

        Do you want to know more about my experience,

        or wish to discuss a UX/UI Design Management opportunity?

        Get in touch now. I’d be delighted to hear from you.