Case Study: SACJEY F.M App

Overview

The SACJEY F.M App is a mobile application that aims to provide users with a simple and quick method to listen to the SACJEY F.M radio station straight from their phones home screen without searching through the Interweb for it.

Roles & responsibilities

UX Researcher & UX/UI designer

User research and competitive analysis, information architecture, and moderating user testing session were all part of my responsibilities. I created the wireframes and finished the high-fidelity MVP by adding the UI visual design elements.

Problem to solve

Bringing the most important features from the SACJEY multicenter website like the radio stations, Live TV, and the brand’s project ventures into an app that people can use.

Intended user audience

Listener, SACJEY brand viewers, and anybody with an interest in themes relating to the activities that make up today's culture, but don’t necessarily have the time or patience to go searching the web.

Scope & constraints

Timeframe for the project:
I had one month to perform research, test, and provide a functional, user-friendly prototype to my client.

Time Zones:
A 6 hours difference in time zones meant that I had to be smart in how I presented the most essential and relevant results I gathered concerning the brand's aims and aspirations.

Solution

A working minimum viable product (MVP) was created after a month of research, design, and testing. The product met the client's expectations, and the app's development will soon move forward.

Process

The discovery and research stage

I started the project off with a quick meeting with my customer (again) to determine what features he wanted for the app and what was feasible within my one-month deadline. By the end of the meeting, I was given the following list of business requirements to complete.

Bring the radio feature from the website into an app that people can use.
have a radio screen, that shows who's talking or what's playing.
Create a TV screen for the app as well.
Have a contact screen.

After setting some clear goals and expectations, I moved on to the First stage, Conducting the research. I sent out a quick survey to help me get some idea on how to go about making the app, what people found frustrating about most radio apps, and how often people use radio apps or any other audio streaming apps.

The following responses played a big role in my future design decisions:

Some of the questions that were asked:

Have you ever listened to the radio on your phone?
Have you ever downloaded a Radio App?
Is there any radio app or audio streaming application that does a good job in balancing ads? If yes, what are those streaming applications?
Is having a radio app on your phone more of a convenience or an Inconvenience?

The answers:

For question # 1 & 2, 3 out of 5 participants said yes ( Not THAT significant by themselves but still crucial, more on this as you go on).
Question # 3 answers had apps like iHeartRadio, Spotify, and Pandora ( Those apps were great sources of reference).
The majority of participants considered the apps to be more of a convenience than an inconvenience.

After going over the rest of the survey responses and comparing some of the business needs from this APP project to those from the website, I was able to quickly come up with a persona that would better fulfill the criteria of app users. Check it out.

User Persona

Drive

-- Good music.

-- Learning about the culture around him.

-- Staying open minded.

-- staying informed.

Goals and needs

-- Wants to always stay ahead of the game.

-- inspiring others through music

Demographic

-- lives in Atlanta, Georgia.

-- Serves part-time in the marines.

-- Attends the University of Georgia.

Jonathan Gonzales

Age: 22

-- Not being able to listen to smaller artists.

-- Too much ads coming on while listening to music.

Pain Points

After spending the effort to create this fantastic persona, I still needed to come up with some user stories that would provide me with some more specific examples of the jobs that I would require the app to perform, and also what kind of layout people mental models are used to, and what better approach to come up with some more ideas than to conduct some competitive analysis.

Competitive analysis

I looked at some of the apps mentioned by some survey participants, starting with iHeartRadio and a little bit of Pandora, but then branched out to look at other options like Radio FM and Trinity1FM because I didn't want to only look at the apps that everyone knows about (the trigger for that reasoning is because my client kept insisting that he wants his app to be different than other apps, and I was following that command to the best of my ability). The ones that had the most influence on the overall design of the wireframes and more are listed below.

Radio FM

The good:

It has recommended stations.
Has multiple stations from different countries and languages.
Users can view/save favorites.
Chromecast is available.
Has links to all its other social platforms, including its website.

The bad:

Lots of Ads in the interface.
Alarm + sleep timer (more like unnecessary).

Screenshot_20210602-121909_iHeartRadio.j

Screenshot_20210601-221929_iHeartRadio.j

IHeartRadio App

The good:

Very nice clean layout.
Also has Chromecast.
Has a library and a podcast section.
None to minimal ads.

The bad:

A login/create account onboarding.

Trinity1 FM

The good:

Easy layout.

The bad:

Bad visual aesthetics.
Poor accessibility.

Structuring the content and flow of the site

After gathering the necessary research and going over the competitive analysis, it was time to start organizing how things are going to be laid out. In a moment, you’ll see both the site map and the intended flow a user can expect while interacting with the application.

Before diving into the content structure, I needed to create some user stories so that I didn't get too far away from the project's focus while developing the information architecture.

The tasks' relative importance helped me remain focused on what to prioritize when and with what degree of urgency. I really liked how the Trinity1 FM menu was laid out so I followed a similar content structure for my initial site map and flowchart.

Site Map

I planned for Most of the content to be found on the menu rather than already have it as a bottom navigation system, Trying to make it a bit different from the other apps but still a bit similar to that of the Trinity1 FM app.

User flowchart

Sketches and wireframes

The crazy 8's exercise is my favorite portion of the entire creative process. It allows me to come up with rapid screen ideas without having to think too hard or long, which, in my opinion, frequently results in some fantastic designs.

Here are my sketches

Unfortunately, I did not get to save a copy of the initial digital wireframes that I had before the feedback iterations I made, but I can say what it consisted of.

Onboarding process

The onboarding process was simple, a loading screen and then a pop-up asking to allow notifications.

The home page

As seen on the sketches on top, the home page was the radio station itself already playing, I wanted the user to fall on the radio station as soon as they got past the onboarding process section of the applications.

The goal was to not have the user go through many unnecessary clicks before arriving at the radio screen.

TV screen

The TV screen consisted of just a video screen that users could click play and just start watching whatever was being streamed at that point in time.

Projects screen

This screen had information about projects in articles and video format.

I placed a box for messages with the email and phone number of the company on top.

The Menu

This is where all the content was meant to be found whenever a user wanted to change screens or go back. It also had the settings option and social media links.

I had this menu screen appear from the right side instead of the usual left side to accommodate the user’s fingers since the menu icon was going to be at the top right corner of the screen.

I used the wireframes to perform a mini-usability test with friends, family, and mentors. The feedback and questions I received were as follows.

Questions

-- How would I get to pick the station I want to listen to?

-- How would users get to choose what TV station they would like to tune into?

Feedback

-- The readability of the content on the project’s screen needed more line-height to help accommodate more visually impaired individuals.

-- A Navigation bar was needed at the bottom for an easier User experience.

( it made sense because It was what people’s mental models are used to when using other audio streaming applications such as Pandora and the iHeartRadio app. )

Overall experience: Not bad, but could be more user-friendly.

Iteration time

I responded to all the feedback and questions that I received, to make this MVP a better version of the initial wireframes. Starting with the radio station's screen and home page, to a new bottom navigation system that replaces the menu as the main source of information.

Here are the final wireframes and the new iterations added on.

The onboarding process remained practically the same.

I added a dashboard for the radio as the home page, which allows users to choose stations instead of forcefully being sent to the Sacjey F.M station. I also changed the radio interface to now showing an image of what’s being played instead of just the title with the logo of the brand.

Home page

Radio station playing

I made the same changes that I had to make to the Home page dashboard and radio screen to the TV screen because the question and feedback that I got for the TV screen pointed out the same issue.

TV Station dashboard

TV station playing

TV screen enlarged

I adjusted the line height and spacing for the articles in the project screen to improve the legibility of the content.

Projects screen

Selected article screen

I also switched the layout of the menu to the left, just to be more on the safe side and not challenge users’ mental models.

The other pages that didn’t have any issues nor feedback to improve, the contact us and settings screen.

Contact screen

Settings screen

I had to go back to my drawing Miro board and make a final sitemap with the updated content and new flowchart now that a lot of changes were made.

Site maps (updated)

User flow (updated)

Brand development

The characteristic of this is that of a Haitian decent-owned brand, that is why the colors are more on the strong side, with a small resemblance to the strong colors of the Haitian national flag.

Haiti’s national flag

SACJEY F.M logo

Now because the client guided me through how he wanted the logo done from start to end, I did not create a mood board. The Haitian flag on top is the closest thing to a mood board you could use as a reference for the design choices (though very limited on my part) for the logo.

Sketches

The same goes for the sketches, not pencil sketched was made in advance, it was all digital and very minimal changes throughout the whole process.

First concept

Second concept

Last and final logo design

As you can see, there were just a few minor adjustments, such as the colors of some of the letters and the appearance of the border's edges. I was given complete creative control over the color palette and typographic choices though, as well as how they were laid out throughout the product.

Color palette

The primary colors were the greatest mix I could come up with that worked well together and passed the WebAIM contrast test on all selections. The secondary colors are used for a variety of other elements, such as links, with the background color dictating which color to use. Although the hovering portion is more for the Website version, this is the same branding guide used in the website hence why it appears here as well.

Typography

I kept it simple with my typographic choices. I just used one type of family, and the boldness and letter sizes were modified correspondingly. I wanted to play it safe with the typeface because I'm still new to the design business, so I decided to go with Roboto, which is straightforward and professional.

With all the branding choices set, all that was left was to add it to the wireframes and create some high-fidelity mockups.

Mockups

After finalizing the mockups, I rapidly built the prototype so that I could begin the usability testing phase; after all, it's best to test early and often if the opportunity comes up.

Which in my case it did. Hooray! For willing participants, your contributions are so dearly treasured.

Usability test

Task tested in this round of usability test:

Task #1:

Would a user be able to get to the radio stations with little to no issues? (Most important)

Task #2:

How well can the users navigate towards the TV station screen? (High importance)

Task #3:

Is the design easy enough for them to find specific articles or videos on the project’s screen if the task arises? (High importance)

Task #4: Will they be able to know where to go if they wanted to send a message to support. (Medium, but crucial for a successful session)

Results

The participants were able to find the necessary screen that the questions addressed, some took a little going around but quickly adapted after actually reading what was on each screen.

Some had reactions of awe because they liked the colors used and the logo was a clear sign to some participants that this was an App that provided some sort of radio or tv streaming service.

Some quotes from the interactions.

“It was actually easy to learn it right away”-- Alisha Aldona

“Really simple, and easy” -- Ahnila Dominique

“It was pretty easy and basic” -- Judly

Overall observations

To my amazement, the usability test was a big success; it was the first test in which participants struggled the least. Instead of needing to do further iterations, I ended up with some important features that I might add in the future to improve the app's user experience, such as a search bar that allows people to quickly find the material they're looking for (Obvious to some, but still new and very useful for my design).

Prototype

Prototype

Final thoughts

Learnings

-- A lot of radio apps have alarm features in them, it appears to not be as unnecessary as I had that before.

-- Keeping in mind people’s mental model helps avoid extra work in the long run.

-- Always remembering that as a UX Designer, we are designing for the users.

-- Removing the power of choice for users is not beneficial for anybody.

Mistakes

-- Not having added a search bar to accommodate more users.

-- underestimating how much research goes into making a user-friendly workable prototype.

Success

A successful user-friendly MVP was created, and the client was more than happy with the results, and production of the actual app will be starting soon. The client is excited about even more future projects.