Overview
This project focused on optimizing the user experience (UX) within the redesigned Device Management interface. Through internal User Acceptance Testing (UAT), I identified several key challenges impacting user interaction.
Navigation Overload: The initial design employed complex expanding/collapsing sections, which proved confusing, particularly on mobile devices. Users struggled to find specific settings and felt overwhelmed by the information density.
Limited User Guidance: Technical limitations prevented the implementation of features offering targeted guidance within the settings. This resulted in users requiring more frequent support interactions.
Communication Gap: The business lacked the ability to directly guide users to specific settings within the interface. This hindered clear communication, potentially leading to user frustration and churn.
By addressing these challenges, I aimed to improve overall user experience, reduce support requests, and enhance user satisfaction with the redesigned Device Management system.
Time frame: Q3-Q4 2023
Team: Dennis Buizert (Sole Designer)
I had to solve three issues while maintaining as much of the original design as possible and work within the time constraints of the project that was set to be released. So in order to solve the navigation issue I analyzed the existing device management page and
Device list
Contact list
Required role list (SOS, Check-in)
Billing & Payment Method
Selected plan
Bill summary.
Bill creation had not yet been created. My approach to this was using my previously generated moodboard with examples from direct- and indirect competition. By combining business requirements and industry standards we were able to quickly develop the Bill Summary requirements.
In order to better understand what was required I looked —
at the staging of the current product, followed by
the new activation flow.
At this phase we also discussed ways to identify completion (as seen on my handwritten note).
However, we determined that it was better to provide the with helper or large text to remind them that this would be a great opportunity to ensure all information is correct.
Collapse and Expand
This part of the activation process contains all the previous steps with a large amount of data. By looking at our mood boards I suggested creating a accordion (collapse/expand) style solution.
This would significantly reduce the data displayed and removed any potential confusion customers might have when analysis all their inputs.
Create relations
When I collected all the flows and designs and placed them in a row I realized parts of the flows were connected to a degree.
Device and Contacts, rely on each other due to the requirements of contact roles.
Billing and Payment method are connected. One cannot pay a bill without a payment option.
Plans & Features, although provided separate are currently being offered under the same umbrella so I opted to continue that.
Creating bill summary
By applying existing business requirements and analyzing existing billing and invoice data I generated the summary.
Had to account for countries with and without taxes(vat, gst, etc.)
Requirement was to include a discount system. This is a feature that is predominantly used for ZOLEO's influencers.
Wanted to separate Subtotal and total as people from countries with "tax included" already know the cost. This is the second largest region of ZOLEO's client base.
Coupon/Discount codes
One of my bigger challenges was to provide an intuitive solution to indicate how Coupon codes would be entered and displayed within the Bill Summary.
By reworking an existing UI component from ZOLEO's Design System an initial component was created. The PM at that point had already been looking at websites like Shopify, which has a Token system available as well as their UI Library within the Figma community.
The final solution
After reviewing Shopify's system, we developed a solution that implements our existing UI component "Pill" which allows users to remove them easily after they have added them.
By "hiding" the Promo code in a collapsable component, the business is able to by default minimize this function.
Takeaways
This was the first time I worked in tandem with another designer and it showed me that rapid ideation and iteration are extremely powerful and fast-paced. Samantha and I were able to communicate through sticky notes and quick design sprints on Slack. This allowed me to get the product to 80% complete before handing it over to Samantha.
During the process, I ended up detaching and "breaking" our components to showcase my concept and during our sprints, I was able to communicate my thought process. This enabled Samantha to quickly complete the flow to 95% before getting approval from the stakeholders to finalize the design.
I still have a lot to learn in regard to refining design elements after analyzing Samantha's final design. This is mainly due to because I have not yet been fully walked through the Design System and Design Tokens. This was planned after the product entered the development phase.