.png){kind=small}
OVERVIEW
The primary focus of the UX/UI design was on enhancing the Selfcare (Website), App (duApp), and DSP (Digital Service Platform). This included developing a design system and designing various components, pages, and templates that would serve as the foundation for the entire portal. By building a consistent and scalable design system, we created a unified experience that supports DU’s fixed automation strategy.
The design system was shared with developers, testers, analysts, and all project stakeholders, aligned with DU’s existing brand guidelines. This collaborative approach ensured that the portal was designed to enhance agility, accessibility, and overall user experience.
ROLE
UI Designer
TOOLS
Adobe XD, Sketch, invision
DURATION
1 year - 2022
Industry
Telecommunication
USER RESEARCH & DESIGN PROCESS
Current Portal Analysis / Existing System Review
To begin, my UX colleague and I reviewed the existing portal, analyzing screenshots of the current system to understand its structure, usability issues, and areas for improvement. This review allowed us to identify user pain points and requirements, setting the foundation for effective redesigns.
CLICK TO ENLARGE
LOW-FIDELITY WIREFRAMES
Low-fidelity wireframes for the DU Fixed Automation project were developed in Adobe XD. These wireframes are essential to UX design, particularly in a complex project like DU’s Fixed Automation. They allowed us to interpret project requirements effectively and begin the process of reimagining and enhancing user experiences, focusing initially on layout, functionality, and flow.
Here's how they relate to the project:
1
Interpreting project requirements
Low fidelity wireframes allow designers to take the initial project requirements and translate them into visual representations. By doing so, designers can better understand the core functionalities and user needs that must be addressed in the redesign.
2
Redesigning processes:
Fixed Automation often involves streamlining and optimizing processes to make them more efficient and user-friendly. Low fidelity wireframes serve as a starting point for redesigning these processes visually. Designers can experiment with different layouts, structures, and user flows to find the most effective solutions.
3
Improving user experience
The ultimate goal of low fidelity wireframes in this project is to enhance the user experience. Designers can identify pain points and friction in the current processes and explore ways to make interactions smoother, more intuitive, and enjoyable for users.
CLICK TO ENLARGE
UI LIBRARY COMPONENTS
Using DU's established guidelines and design system, we created a comprehensive library of icons and components in Sketch, tailored to the project’s business requirements. This UI library provided a structured resource for designers and developers, ensuring consistency across the entire portal.
CLICK TO ENLARGE
HIGH-FIDELITY DESIGNS
High-fidelity designs, crafted in Sketch for both desktop and mobile formats, represent a pivotal stage in the DU project. These designs emphasize visual quality and strict adherence to DU's graphical and communication standards, providing an accurate, polished preview of the final product.
In the context of the project, high-fidelity designs serve several crucial purposes, including validation with stakeholders, usability testing, and guiding development teams.
CLICK TO ENLARGE
1
Visual Fidelity
High-fidelity designs offer a polished and visually appealing representation of the user interfaces for both desktop and mobile platforms. They prioritize graphical detail, ensuring that every element, from icons to typography, aligns perfectly with DU's established branding and design language.
2
User Experience Enhancement
These designs go beyond the functional aspects and pay close attention to the overall user experience. They take into account factors like layout, spacing, color schemes, and responsiveness to ensure that interactions are not only functional but also aesthetically pleasing and user-friendly.
3
Adherence to Guidelines
High-fidelity designs meticulously follow DU's graphical guidelines. This means that all design elements, such as fonts, colors, logos, and visual styles, are consistent with the established brand identity. Consistency is crucial for brand recognition and trust among users.
Key takeaways
In summary, this project emphasized user experience enhancement and alignment with DU’s branding and communication guidelines. Starting with low-fidelity wireframes, evolving to high-fidelity designs, and iterating with feedback, we set a strong foundation for improved user satisfaction, reinforced brand identity, and anticipated positive outcomes for DU’s fixed telecommunications services.