Designing a Campus News App — Techno Pulse 📱
Techno Pulse is a campus news application designed for students and staff at the University of Colombo’s Faculty of Technology. The app provides a centralized platform for accessing news about academics, sports, and campus events. This case study details my design process for this university course assignment, where I focused on creating an mobile app by following Material Design 2 guidelines.
Background
As part of my Mobile Application Development course at the University of Colombo, I was tasked with designing a mobile application UI for a campus news platform. Our faculty currently relies on physical notice boards and email to share campus news — methods that are slow, lack centralization, and are easily missed by students and staff.
So the goal was to create a user interface that would address these communication challenges. As per the requirement I had to follow Material Design 2 principles and accessibility standards. Most of these UI’s may can be improved in various ways but I had to stick to the assessment requirements.
Identifying Problems
Major Pain Points
I identified several issues with the current news distribution methods at the Faculty:
- No centralized platform for campus news (LMS, Notices, WhatsApp, Emails)
- Physical notice boards are easily overlooked
- Email announcements can be missed among other messages
- Lack of categorization for different types of news (sports, academics, events)
User Needs
Based on these problems, students needed:
- A centralized platform for receiving news updates
- Categorized news feeds for easier information filtering
- Clean, intuitive interface that follows familiar navigation patterns
Research and Inspiration
I examined several popular news applications to understand effective content delivery mechanisms. My research focused on:
- Layout simplicity and reading comfort
- Speed of content delivery
- Category filtering and organization
- Material Design 2 documentation for best practices
- WCAG accessibility guidelines to ensure usability for all
Then I moved to sketch down my own ideas.
Brainstorming and Sketching
User Flows
I roughly mapped the main user flow diagram covering key journeys through the application:
- On-boarding
- News browsing
- User account management
- Application information
Wireframes
Although sample wireframes were provided as part of the assignment, I created my own versions to improve the user experience and fill out missing screens.
Proposed Design
Typography
I selected a dual-font system to balance readability with personality:
Headlines: DM Serif Display
- Adds a touch of seriousness appropriate for news content
- Modern enough to feel fresh and not outdated
Body text: Inter
- Clean sans-serif for excellent screen readability
- Maintains clarity even at smaller sizes
- Higher readability score for quick consumption of news
Color System
I chose a primary color palette blending blue and purple (#400AE0) to convey:
- Trust and reliability (blue) — essential for a news platform
- Youthfulness and creativity (purple) — appealing to the student audience
All colors were tested for accessibility, meeting WCAG AAA standards with contrast ratios exceeding 7:1.
Logo
For the app’s identity, I created a logo combining:
- The letter “T” from “Techno”
- A lightning bolt representing “Pulse” (speed and quickness)
Below is the logo construction and the output.
Components
Before designing interfaces, I’ve built a reusable component system following Material Design guidelines:
- Buttons: Primary, outline, and text variants with 48dp height and full radius corners
- Text Fields: Custom text fields with fixed labels
- Top App Bar: Standard 56dp height with title and navigation elements
- Bottom Navigation: 72dp height with active indicators
- News Cards: Large and small variants for different usages
Screens
The final design includes:
- Splash & Onboarding: Bold logo presentation and image of the faculty with the onboarding options
- Authentication: Login and registration forms
- News Feed: Featured stories in large cards with categorized latest news below
- Article View: With the thumbnail on top
- Profile Management: To view and edit the personal information
- About Screen: Developer information with version details
I also added a simple pattern as a background to eliminate the “boring” feeling.
Design Outcomes
The final design accomplishes several key objectives:
- Unified Visual Language: Consistent use of color, typography, and component styles across all screens
- Accessibility: All text and interactive elements meet WCAG AAA standards for contrast
- Brand Identity: Simple visual identity that resonates with the target audience
Reflections and Limitations
This redesign was created as a coursework assignment over a very short time period. The focus was to create couple of user interfaces as per the requirements.
If I were to further develop this project, I would:
- Conduct a proper research
- Redesign certain user interfaces to improve user experience
- Develop additional screens for news filtering and search
- Conduct user testing with actual faculty students and staff
However, this project gave me experience in applying Material Design principles. Even though I had used M3 before, this project gave me a more in-depth understanding.
References
- Material Design. (n.d.). Material Design. https://m2.material.io/
- Material 2 Design Kit | Figma. (2024). Figma. https://www.figma.com/community/file/778763161265841481/material-2-design-kit
- World Wide Web Consortium. (2024, December 12). Web Content Accessibility Guidelines (WCAG) Overview. Web Accessibility Initiative (WAI). https://www.w3.org/WAI/standards-guidelines/wcag/
Contact me via LinkedIn
