Fill your spare time by reading what matters to you.

Overview

InstaNews is a concept iOS app for a news organisation. This was created as part of a Lab Based Project, an optional course in our sixth semester.

Role

Product Strategy,

Visual Design, Front End

Development

Product Strategy, Visual Design, Front End Development

Duration

Jun 2022

Project Type

Academic Project

The Background

This was created as part of a Lab Based Project, an optional course in our sixth semester. The main goal of this course was to get students comfortable with the latest tools and technologies in the software industry, while also encouraging them to collaborate with others while building the project.


The class was asked to form groups of three, and each group was assigned a project prompt at random and had three days to finish it.


I was the team's only designer, working alongside two engineers. I was in charge of the product experience, as well as the development of the application's front end.

Key Achievements

The following are some notable accomplishments:


  • Design thinking was used to streamline the entire process. I was able to use the design thinking process successfully to identify the problem, brainstorm solutions, and create the final product.


  • Completed from start to finish. We exhibited our capacity to execute and deploy features as a team by coding the final designs in such a short period of time.


  • Scored 93/100 marks ( highest in the entire department of CSE ) for the project.


  • Each of us was able to contribute to the solution, resulting in a highly collaborative and spectacular outcome.

The Prompt

  • The task assigned to us was to create an application for a news agency like India TV, Times Now, etc.

  • Since we were free to build the app for any platform, including web, Android, and iOS, we settled on iOS.

  • The task assigned to us was to create an application for a news agency like India TV, Times Now, etc.


  • Since we were free to build the app for any platform, including web, Android, and iOS, we settled on iOS.

Defining the MVP

As we just had 3 days to complete the entire project we decided to go directly for brainstorming sessions for the application.


After a lot of discussions we decided to have the following features in the application :


  • See articles based on interest.

  • Bookmark interested articles.

  • Advertisement free experience.

  • Sort articles based on categories.

  • Share articles.

  • Tweet by quoting the article.


Defining the Tech Stack

After defining the MVP, we started looking for the tools required to build our application. Following our study, we finally chose to use :


  • Firebase : for application authentication.

  • Contentful : for the application's backend.

  • Core Data : used to store user profile information.

  • CloudKit : to sync profile data to iCloud.

  • Revenue Cat : for in app purchase.

Low Fidelity Designs

We began discussing how to design the basic structure of the application after selecting the tools. Next I sketched out a basic structure for them and created a simple wireframe along with application information architecture. I told both of my team members to begin working on the screens before constructing the High Fidelity designs, which saved us a significant amount of time.


Some of the screens included :

  • Onboarding Screen

  • SignIn & SignUp

  • Home Screen

  • Article Details Screen

  • Explore Articles Screens

  • Bookmarks Screen

  • Profile Screen

We began discussing how to design the basic structure of the application after selecting the tools. Next I sketched out a basic structure for them and created a simple information architecture. I told both of my team members to begin working on the screens before constructing the High Fidelity designs, which saved us a significant amount of time.


Some of the screens included :

  • Onboarding Screen

  • SignIn & SignUp

  • Home Screen

  • Article Details Screen

  • Explore Articles Screens

  • Bookmarks Screen

  • Profile Screen

High Fidelity Designs

With time running out, I quickly designed the app's User Interface with the appropriate styling. I also produced an application prototype, which helped us visualise the application's overall flow.

See the functional prototype here.

Development

While the team responsible for building the app's structure & integrating the APIs I was responsible for creating the app's aesthetic part. Look at the before and after pictures to see my work.

Find the GitHub repository link here.

Learnings

Some key takeaways from this event are that :


  • The best designs come from collaboration. It was inspiring to see how each one of us was able to bring to the table a different perspective during the sketching sessions.


  • Design thinking is key to effective products. This really helped to shape the discussions with the team as it allowed me to stay focussed and on track throughout the entire process.


  • First impressions first. These programs are all about selling the concept. The visual design of our application was key for us to get the attention of the panel members.


Results

  • We were able to successfully implement 60% of the designs and delivered a presentation at the end of the program to a panel of judges.


  • We scored 93/100 marks ( highest in the entire department of CSE ) for the project.


  • I had a really enjoyable experience at this program & was extremely lucky to work with some of the most collaborative & talented people to come up with a product in a short period of time.

Thank You

Hope you liked the project.

Lets create something amazing togather.

Copyright

2022 Satya Prakash Sahu

Contact

Berhampur, Odisha

Lets create something amazing togather.

Copyright

2022 Satya Prakash Sahu

Contact

Berhampur, Odisha

Lets create something amazing togather.

Copyright

2022 Satya Prakash Sahu

Contact

Berhampur, Odisha