Astro Awaniii

Overview
Awani want a new CMS system to support the fast-paced election environment and a website that can also be used as a television(TV) visuals to aids newscaster in providing the General Elections news to the audiences live. The website should be able to provide necessary information on the TV while maintaining the interactivity of the website. This project take 4 months to complete and after that, Awani continue being our client as to add more feature on the website and CMS system for another election to come.
Role:
I am the UI/UX designer and work along with a project manager and a full-stack developer for this project. I communicate with the clients on a weekly basis to update progress and gain feedbacks. I work closely with the developer and also provide design consultation to the client.
Tools:
- Figma
- Adobe Illustrator
- Adobe After Effect
- Visual Studio Code
Challenges
The project presented several significant challenges, primarily centered around ensuring the website's responsiveness and functionality within a live broadcast environment. These challenges included:
- Live Broadcast Integration: Ensuring the website's design seamlessly adapted to the presenter's on-screen actions during live sessions.
- Dual-Screen Optimization: Designing for two distinct screen sizes simultaneously: one for full-screen television display and another for the backdrop screen behind the newscaster.
- Maintaining Responsiveness: Guaranteeing consistent performance and visual integrity across these varying screen configurations during live broadcasts.
- Creating the "wow" factor: The requested interactive map, and other items, needed to work flawlessly, and be visually pleasing.
Design Process
We began by immersing ourselves in the current landscape, analyzing the existing platform, and identifying pain points. Then, we meticulously restructured the information architecture, creating a clear and logical hierarchy. Wireframes and prototypes brought our ideas to life, allowing us to visualize and iterate on the design. We focused on creating a clean, modern visual design that prioritized clarity and ease of navigation, using tools such as Figma. We then designed the UI for key pages. While not explicitly stated, we believe that testing was performed to validate our designs.
UX Research
We start by researching the competitors and analyze the way the information delivered to the user. We continue by conducting a brainstorming and user interview sessions on the requirements and features needed to accomplish the goal. Once the feature are finalized, we arrange them by priority on what to work on first and put aside extra feature to a different phase in the project timeline.
.jpg)
Design
Awani designer already have something in mind, so I continue to design while giving consultation on what works and what will not in the technical aspect. I finish up the design and did a weekly review meeting to finalized the design before we proceed towards development. The Malaysia map design also need to adapt so it can be interactive, so I am the one responsible on the design and tweaking the codes to follow the developer requirements so it can work when uploaded.
.png)
Development
Once the design is finalized, I communicate with the developer to ensure a smooth design handover. Any features that needs visualization, the developer will highlight and I deliver it accordingly after a review session with Awani. After a part of the development is completed, we proceed with the user testing to gain feedback and fix it in the process.
Training
We went ahead to give training on the new CMS to the user in Awani's data input team on-site. On the election day, our team were on standby on-site as to first, help manage the high traffic and second, resolve any sudden issues with the CMS, should it happen.
Lesson Learned
This project highlighted the importance of:
- Robust Information Architecture: Essential for large-scale content platforms.
- Clear and Concise Navigation: Critical for user satisfaction, especially during high-demand periods.
- User-Centered Design: Prioritizing user needs for effective solutions.
- Designing for high traffic situations.
- The importance of accessible information during elections.
Reflection
This project was a testament to the transformative power of UX design in facilitating access to vital information, particularly during a critical election period. The final product, encompassing all necessary features, was delivered on time, a testament to the team's efficiency and dedication. The significant increase in website traffic, coupled with the surge of social media mentions and tags, clearly demonstrated the website's success and popularity. Moreover, the newscasters' seamless adaptation to the redesigned layout allowed them to effectively deliver essential election information to a broad audience in real-time. This project underscored our ability to design for civic engagement, empowering citizens during moments of national significance. It was one of the most exciting projects I've had the privilege to handle, and I'm immensely proud of my team's collective effort and the positive impact we achieved. Moving forward, continuous iteration, user feedback, and data analysis will be crucial for further optimization and ensuring the platform's ongoing effectiveness in serving the public.