Redesign

Filadelfia Church

A mobile app redesign for Filadelfia Church to communicate and publish for its community.

As a user experience designer I want to redesign the current app so users can use it easily and have nice visual experience.

Phase 1, Briefing

At the beginning, I've organised a brief meeting to see the needs of my clients - dedicated and engaged in building Filadelfia Church community. I asked them to tell me a bit about them and their church, the current app and what they wanted to achieve by redesigning it. I asked also what was crucial for them to have in the app, who was their target segment and how they see the future of this application.

That let me to know some significant information I could use further in the project, eg.:

  • clear, light feeling of moving through the app
  • main motifs should be highlighted
  • easy to implement and modify design system
  • light and dark mode
  • compromise of the clear and modern design with a touch of lively colour.
No items found.

Phase 2, Benchmarking, IA & first ideas

First of all, I've went through all the screens in the client's app. During this process I've noticed some areas to development and had first ideas what I can do to make the users' experience better.

I had a general idea what I wanted to do but I also wanted to see the other brands's approaches to similar functionalities. I went through several apps I found the most helpful in that case eg. Spotify, Orange Flex, Allegro.

I highlighted important features that I can be inspired by while redesigning the client's app. I collected all the screenshots from those apps and described what I liked in those features so I could show my client and discuss this at the meeting.

Further, I focused on creating the information architecture of main functionalities. That cleared my picture of what I wanted to achieve, a lot. Based on that I could start designing and sketching first ideas I had about the app redesign. I did this manually, with a piece of paper and a pencil.

At the end of this phase I prepared the mood board to help me to get the vibe of the final version I wanted to achieve. It had an impact on creating the new color palette for the app.

No items found.

Phase 3, Redesign

In redesigning the app I worked with my own small components library. Initially I found the font I wanted to work with and the icons I was going to use. I decided to give it a go with Basil Icons. My sketches prepared before helped me with designing first main screens. From those I chose to design particular paths in the app like adding a song to favourite ones or writing a note to the particular podcast episode.

There were 6 main areas in the app:

  • home screen
  • a listening part of the app
  • a watching part of the app
  • a favourites' screen
  • notes area
  • menu area.

Components I needed I created while designing particular screens. When I realised I needed some reusable part of the design, I turned that into component. I prepared all the new designs in Figma, in 2 versions: light mode and dark mode.

No items found.

In this project my base was my own knowledge and experience. I tried to make the design decisions the best I could. I had some mentoring support from my academic teacher at that time.

I decided to go with the main colours as white in the light mode and dark blue in the dark mode. My goal in redesigning the app was to become easy to read and use, but also that guaranteed good contrast and accessibility.

No items found.