Project Details
This project aims to design a mobile news application, thoughtfully designed to deliver curated and sourced news content from leading and diverse publishers, ensuring users receive accurate, timely, and comprehensive information on a wide range of topics.
This design project aims to create a visually stunning, intuitive and user-friendly application interface that provides a seamless and engaging news browsing experience for users.
Enhance the user experience by providing seamless navigation and personalized news recommendations.
Design Process
🧠 Design Methodology | Design Thinking
Design thinking prioritizes understanding user needs and preferences, by empathizing with news consumers to identifying and solving real user problems. This method helps me in brainstorming and ideation sessions to generate solutions to create an intuitive and engaging app interface that caters to users' specific interests and habits.
1 — Empathize Phase
At the Empathize stage, I conducted research related to the existing problems, starting by digging up information and conducting interviews with several respondents, to find out their views on news applications. After the interview, the viewpoints and problems of the participants related to the news application were obtained.
👀 Problem
In today’s fast-paced world, staying informed amidst the deluge of news and information can be overwhelming. People often struggle to sift through the noise and find reliable, relevant, and engaging news content tailored to their interests and preferences. Traditional news outlets may lack personalization while navigating multiple sources and platforms can be cumbersome and time-consuming.
As a result, users face difficulty in accessing quality news content that resonates with them, leading to information overload, disengagement, and a lack of trust in news sources.
In-depth Interview
I interviewed 3 people who have an interest in reading news and staying updated on the news. My goal was to find out their behavior when using the news apps to find and read news, their point of view, and their expectations when using the news apps, as well as to find the needs they need in the news apps.
Below are the results of my interviews with respondents.
2 — Define Phase
After conducting approaches and interviews to get the main problems in the empathy phase. In this define phase, I collected data based on the previous stage to create a solution based on interviews with respondents and existing problems. Then I determined the target audience based on the interviews I did and then created user personas for this application.
🔥 Challenges and Solutions
The idea for Insightify was born out of a desire to address existing problems and provide users with a seamless and personalized news browsing experience. Taking inspiration from the evolving digital media consumption landscape and user preferences.
Below are the challenges and solutions for designing this application.
Target Audience and User Persona
Insightify targets individuals of all backgrounds who seek reliable and easily accessible news updates. This includes professionals, students, and anyone interested in staying informed about current events and trends.
2.1 — About Insightify App | Define Phase
After making a solution to the existing problem, I then made details of the application to be designed based on information from the previous phases. this section will contain information related to the Insightify application.
💡Insightify Description
Insightify is a mobile news app that delivers curated news content from trusted sources. With its intuitive and user-friendly design and customizable personalized news recommendations based on individual interests.
The gamification feature in this application can increase users’ interest in reading, and users can see their reading progress in this application.
✨Insightify Purpose
Aims to empower users with accurate and timely news updates presented in a user-friendly format. By providing curated content from reputable sources,
Insightify helps users stay informed and engaged with the world around them. Whether it’s catching up on the latest headlines or diving deep into specific topics of interest, Insightify serves as a reliable platform for users seeking trustworthy news coverage.
App Features
- Personalized news feed based on user interests, reading, and browsing history.
- Real-time updates on breaking news and trending topics.
- Audio article for users who are busy and don’t have time to read.
- Bookmarking and sharing options for saving and sharing favorite news articles with friends.
- Gamification to encourage users to read more news and gain new insights
Meaning of the name Insightify
Insightify — Illuminate Your World with Informed Perspectives
”Insightify” Combines “insight” and “amplify” emphasizing the app’s mission to provide insightful news coverage and amplify users’ understanding of current events. signifies the app as a reliable platform for users, providing them with trustworthy news updates and insights.
2.2 — User Story Map | Define Phase
A user story map is for organizing and prioritizing user stories, which are short descriptions of app features that a user wants to see in the app.
3 — Ideate Phase
User Flow
This user flow will serve as the steps that users will go through to be able to run the main features of the Insightify app.
Sitemap
The sitemap for the Insightify app outlines the hierarchical structure of the app’s content and navigation pathways, providing users with a clear overview of the app’s information architecture and organization.
3.1 — Design System & App Guideline | Ideate Phase
The design system and brand guidelines are important components to maintain consistency and coherence in the visual aspects and identity of the Insightify app.
1. Logo
Star Graphic:
- The star is using bioluminescence color, symbolizing illumination, insight, and enlightenment.
- This bold and eye-catching color choice captures users’ attention and conveys a sense of vitality and dynamism, reflecting the app’s mission to empower users with valuable insights and knowledge.
- The star stands out against a background of dark colors, creating a striking visual contrast that enhances visibility and legibility.
World Graphic:
- The wireframe world graphic uses light blue color, to evoke a sense of openness and inclusivity, welcoming users to explore a diverse range of news content from around the world.
- Using wireframe graphics is clean and minimalist design conveys a sense of modernity and innovation, reflecting the app’s commitment to delivering a seamless and intuitive news browsing experience.
2. Color Palette
The color scheme is chosen carefully to not only enhance the visual appeal of the news mobile app but also improve the user experience.
- Reduced Eye Strain: The dark background minimizes glare and eye strain, making it easier for users to read articles and browse content for extended periods of time.
- Visual Hierarchy: The use of bioluminescence as a secondary color helps establish a clear visual hierarchy, guiding the user’s attention to important elements and enhancing navigation.
- Readability and Contrast: Soft white accents ensure sufficient contrast against the dark background and improve readability.
3. Typography
DM Sans is a modern sans-serif typeface. It is characterized by its clean lines with balanced proportions and good legibility.
Why do I use DM Sans font?
- Readability: DM Sans prioritizes readability, ensuring that text remains clear and easy to read across different screen sizes and resolutions. Its clean, well-defined letterforms make it easy for users to consume content without strain or fatigue.
- Versatility: DM Sans is a highly versatile typeface that can be used effectively in various typographic contexts.
- Modern Aesthetic: The clean and contemporary design of DM Sans adds a touch of sophistication and professionalism to this design project.
- Brand Consistency: Using DM Sans ensures consistency in typography and helps strengthen brand identity and recognition, therefore creating a good brand experience for users.
4. Icons
Insightify uses an outline and some filled icons from Windows 11 icons.
Outline Icons in Insightify App Design:
- Outline icons can give off a modern and trendy vibe due to their sleek and contemporary look. Outline icons can also reduce the cognitive load of the user with the minimalist design of the icons helping to reduce the cognitive load for the user by presenting information clearly.
Filled Icons in Insightify App Design:
- Filled icons can provide visual emphasis and hierarchy for important actions or features in the app and can draw users’ attention to key elements and improve navigation. Filled icons can add a sense of interactivity and dynamism to the application interface.
5. Graphics
The Reason for Using These Graphics Elements in Insightify:
- Brand Identity and Recognition: Both graphics elements contribute to Insightify’s brand identity, reinforcing key brand values and positioning the app as a trusted source of news and information.
- Emotional Connection and Meaning: The Shining Star and World Graphics evoke positive emotions and associations, such as excellence, trust, and global perspective, which resonate with users on a subconscious level.
- Visual Representation of Excellence: The Star serves as a visual metaphor for excellence and quality journalism on the Insightify app.
- Global Perspective and Coverage: The World Graphics symbolize Insightify’s commitment to providing comprehensive coverage of news and events from around the world.
6. Components
Components ensure that similar elements across different parts of an application look and behave consistently.
As applications evolve, design systems with well-defined components facilitate scalability.
When new features or pages need to be added in Insightify, designers and developers can easily combine existing components or create new ones with established design patterns and guidelines. This ensures that the UI remains consistent and manageable as Insightify grows.
7. Moodboard
8. Design Asset and Source
Asset and design sources used on the project. Icons by Windows 11 icons on Icons8 and Images from Unsplash
4 — Prototype Phase
Wireframe
During the wireframe design phase, the focus is on creating a low-fidelity, simplified representation of the app’s UI layout and structure. The primary objectives of this phase include:
- Defining Structure and Navigation: Wireframes help define the overall structure and navigation flow of the app, including the arrangement of screens, navigation paths, and interaction patterns.
- Clarifying Content Placement: Wireframes allow to experiment with different content placements and information architecture, ensuring that important content is prioritized and easily accessible to users.
High-Fidelity
The focus shifts to creating polished, visually detailed mockups and prototypes that closely resemble the final app interface. The primary objectives of this phase include:
- Visual Polishing and Branding: High-fidelity designs allow to application of branding elements, visual styles, and design aesthetics to the app interface, ensuring consistency with the brand identity and enhancing brand recognition.
- Refining UI Details and Interactions: High-fidelity designs focus on refining UI details and interactions, such as button styles, iconography, transitions, and animations.
Application Flow
The application flow section will show the flow of each important part of the Insightify app, with this flow will help to explain how the flow of the features in Insightify runs.
Log In / Sign Up Flow
Navigation Flow
Explore Page Flow
Reading Progress & Gamification Flow
Manage Account Flow
Manage Publishers Flow
Manage Interests Flow
Mockups
These are some mockups of the Insightify app that give a final view of the design when used on a mobile device.
Interactive Prototype
The prototype phase serves as a critical milestone in translating the vision into a tangible and interactive design for the Insightify app.
Interactive prototyping brings the wireframes and visual designs to life, allowing to simulate user interactions and workflows within the app.
The design of the wireframe and high-fidelity was made on Figma. Here is the prototype.
5 — Testing Phase
After making the prototype, I then conducted usability testing on 5 respondents as potential application users. The aim is to find out the results of the interaction between respondents and the prototype that has been created.
Research Objective
- Find out the needs of users in using news applications.
- Finding out the habits and feelings of users in using news applications.
- Find out the level of usability, convenience, and satisfaction in finding and reading news on the Insightify application.
In this testing stage, respondents will carry out 3 tasks and answer questions that will be asked after the respondent completes the tasks. By carrying out this testing, I will get insight and feedback from respondents as potential users which is useful for improving the performance of the design. I carry out usability testing moderately and remotely.
I created a user research plan document to carry out usability testing, and you can see the document here.
System Usability Scale & Usability Metrics
I use the System Usability Scale as a Usability Metric to assess interactions between respondents and applications using a Likert scale. Respondents will be asked 10 questions according to the questions on the SUS and give a rating of 1–5 to each question based on how much they agree with the statement given. The results of the tests will be in the form of quantitative data.
Below are the usability testing results that I got from respondents:
Based on the scores obtained from the 5 respondents and have been measured using the System Usability Score. The results were obtained with an Excellent and Acceptable Rating with a score of 83.
Feedback & Suggestions
Below are the results of feedback and suggestions from 5 respondents regarding the tests they have carried out on the Insightify application design. feedback and suggestions from respondents will be useful for developing the Insightify application design even better.
Conclusion
In this case study, I have completed the journey of designing the Insightify app from start to finish, and this journey will not stop as design will always be dynamic over time.
The design was done using the Design Thinking method which helped me understand the problem and come up with solutions and ideas for the problem. Going through each phase of the method properly and using the information I gained in each phase, has helped me in generating design parts that I then assembled to produce a complete design for the Insightify app.
Thank you for taking the time to explore my case study ! ✨
I’m excited to share this Insightify app design journey and I hope that what I’ve done can be useful to those who learn about it. I look forward to your input to help me refine and develop myself further 😁.
CONNECTING MINDS & LET’S COLLABORATE 👇🏻
Linkedin | Dribbble | hizkiast01@gmail.com
Don’t forget to give claps 👏 and have a nice day :)
