Strona

2023.05

Project overview

I undertook a solo project to create an RSS News Reader, an application designed to help users stay updated with the latest news from various sources via RSS feeds. Over two weeks, I used Figma for the UX/UI design and implemented the app using SvelteKit and Node.js. This project aimed to create a functional and user-friendly RSS reader that aggregates news from multiple feeds into a single, streamlined interface.

Approach and Process

The challenge was to develop a comprehensive RSS News Reader that could efficiently aggregate and display news feeds, providing users with a seamless experience. Operating solo over a two-week sprint, I focused on creating an intuitive design and robust functionality that could handle various news formats and sources.

User-Centric Design

Starting the project, I planned to integrate user feedback and preferences into the design of the RSS Reader to ensure it met the actual needs of its users. This involved considering how users typically interact with news and what functionalities they most value in an RSS reader.

The Double Diamond design thinking process guided my approach, helping me explore user needs and refine the app's functionalities to ensure they were both useful and intuitive.

Low-Fidelity Design

I began the design process with low-fidelity sketches to quickly establish the basic layout and user flow of the RSS News Reader. These sketches were essential for iterating on ideas and identifying the best ways to organize and display news feeds. This stage allowed me to experiment with different navigation structures and content layouts without committing extensive time to each concept.

Lo Fi Design

Grayscale Design

Moving on to grayscale designs, I focused more on refining the user interface and optimizing the layout for readability and ease of navigation. At this stage, using Figma, I took care of placement of text, lists, and other key elements like search bars and category filters.

Lo Fi Wireframes

High-Fidelity Design

After finalizing the wireframes, I moved to the high-fidelity prototypes to define the visual identity of the RSS News Reader. At this point, I chose a suitable font and color palette following the retro design aesthetic.

Hi FI designs

In Figma, I applied these visual elements to the prototypes, bringing the user interface to life with color, typography, and additional stylistic elements. This phase included finalizing the interaction design to ensure smooth transitions and intuitive navigation. The high-fidelity prototypes were then tested to gather feedback, which helped polish the design, ensuring the RSS News Reader was not only functional but also visually appealing and easy to use.

Landing Page Screen

To ensure that the design was responsive and adaptable across different devices, I meticulously tested various screen sizes and resolutions within Figma. This process involved using Figma’s responsive design features to adjust and optimize the layout and elements for everything from large desktop displays to compact mobile screens. I paid special attention to touch targets and readability, ensuring that the interface was user-friendly and accessible on any device. By doing so, I aimed to guarantee a consistent and engaging user experience whether the RSS News Reader was accessed on a phone, tablet, or desktop.

Browse feeds Screen

Development and Implementation

With the design in place, I began implementing the RSS News Reader using SvelteKit and Node.js. This phase involved setting up the SvelteKit framework and configuring Node.js to handle the backend logic, including fetching and managing RSS feeds. Using SvelteKit, I translated the high-fidelity designs into functional components, ensuring that the layout and user interactions matched the planned design. On the backend with Node.js, I developed services to parse RSS feeds and deliver news content to the frontend. This included error handling to manage feeds that were unavailable or slow to respond. I focused on optimizing the app for performance, ensuring that it could handle multiple feeds and large volumes of news items without slowing down.

Outcome and Reflections

ShutterScout was well received by its initial users, praised for its straightforward functionality and design. This project was a valuable lesson in fast-paced development and integrating user feedback effectively. It reinforced the importance of a clear workflow and in-depth knowledge of Android development, particularly Kotlin and Jetpack Compose, to efficiently transform designs into functional products.

Conclusion

Working on ShutterScout improved my skills in managing quick development cycles and producing designs that balance user needs with technical constraints. This experience highlighted the importance of adaptability, user-focused design, and teamwork in successfully creating applications within tight deadlines.

Project files