MKC Choir
•
2024
My Role
Product Designer
Timeline
3 Weeks
Team
1 Product Designer & 1 Developer
Responsibilities
Research
Visual Design
Interaction Design
Prototyping
TL;DR
I revamped a choir songbook app to tackle user frustrations related to visuals, scheduling, and usability. New features include offline access, dark mode, presentation mode, and enhanced scheduling.
By utilizing user interviews, mood boards, and the Flowbite design system, I improved workflows for both mobile and desktop platforms.
I also created a public user role for wider access and optimized interactions to minimize time-on-task, all while managing tight deadlines.
The Problem
Their current approach couldn’t have been less reliable. They had issues updating their song database to include new songs and scheduling was made through a telegram group.
The Plan
Since this was a redesign project, I started by talking to users to understand their needs. I also looked at other song-streaming apps for inspiration and gathered the best ideas into a mood board.
Interviews
I conducted interviews with 6 choir members. I was expecting some challenges while dealing with stakeholders. Fortunately, there seemed to be none. 🤷🏾
Glad to report that this is the first time I’ve experienced this! 🥹🥲.
Practice Song Lyrics & Schedule Appearances
Lyrics Practice - They wanted the app primarily to help them practice the lyrics to their songs.
Scheduling Appearances - To help coordinate the choir group activities and handle the scheduling of their events.
Presentation Mode - A presentation mode that projected their screen onto a projector, allowing the church members to sing the songs with them.
Offline Use - To ensure there were no interruptions due to data connection inconsistencies.
Visual Design - The current app wasn’t visually aesthetic, as shown in the screenshots in the previous section. They also wanted to have a desktop version of the app.
Design Decisions
I was told the design was for both mobile and web apps. The thinking was to make the mobile app a PWA (Progressive Web App) to save on dev time.
Consequently, along with the dev, I opted to use the Flowbite design system to have both versions ready as quickly as possible. Also, it comes with dark mode.
Moodboard
The first two iterations looked terrible because I skipped mood boarding and visual competitive analysis. I chose the mood board due to time constraints. That was an error I corrected for the third iteration.
Moodboard
The third iteration improved greatly on both iterations with an expandable search bar that especially saves space on the mobile version.
🧐
I added a swipe interaction to browse between navigation links. The top nav bar was cumbersome on mobile and tablet, but time on task greatly improved after the change.
Scheduling
Most users found the international 'am/pm' time format confusing during usability testing. When I switched to using local time and language (Amharic), the task completion rate was 100%.
Validation by Heatmapping & User Testing
For song management on the admin’s side, I used heat mapping to find the optimal form field placement to make the repetitive task of adding, editing, and removing songs and albums less tedious.
What Could’ve Been Better
Since we were strapped for time, we cut a lot of corners. I wish we had included an onboarding flow to at least show how to toggle dark mode and view schedule updates and announcements on notifications. I still did that by making an onboarding video for them to use as a reference.
Also, I would’ve liked to customise the mobile version of the design, rather than adopting Flowbite’s mobile version of the components, especially for the navigation.
Outcomes and Learnings
NEXT PROJECT
