Case Study: Sacjey Multicenter

Overview

The development of the informative radio-heavy website "Sacjey multicenter" was done in the hopes of communicating and bringing more exposure to today's current affairs, with a focus on presenting the news through the lenses of the socio-cultural viewpoint, due to a growing lack of socio-cultural awareness.

Problem to solve

Creating a website that enables the brand to communicate through a radio broadcast service, as well as allowing users to contact the host and follow their business ventures in near real-time.

Intended user audience

Anyone who shows any interest in the activities that form today's culture, from ordinary working-class men (and women, of course) to top executive corporate managers.

Scope & constraints

Timeframe for the project:
I was only granted 3 weeks to conduct, test, and provide a workable prototype of an end product for my client.

Time Zones:
My client lives in France so there was a 6 hours difference in our time zones, so setting up calls to sit and go over project findings and requirements took a little bit of planning.

Realistic expectations:
Narrowing down to the most needed essential parts for the project took some effort as the client wanted to achieve more than what could be done in three weeks.

Roles & responsibilities

UX Researcher & UX/UI designer
My responsibilities included performing user research and moderating user testing sessions. The process also included competitive analysis and information architecture. I also designed the wireframes and iterated them until the final low-fidelity prototype was ready.

Process

The discovery and research stage

I began the process with a meeting with my client so that I can figure out what the project goals were, and what they could expect in three weeks. The following list is the initial business requirements, with an emphasis on “initial”

Create a website and provide a screen to host the radio broadcast as well as another screen for a live tv signal.
Have a Projects window that shows the business’s current projects, past projects, and future projects.
Allow users to be able to contact them for any inquiries and requests.

Now that I had some clear goals and the expectations were set, I moved on to the next stage, Conducting the research.

To start with, I created and sent out a survey, to gauge how desirable a service like this would be. The following is a summary of the most important parts of the results.

Some of the questions that were asked:

Have you ever heard of the term "socio-cultural"? if so, how familiar are you with the term?.
How Important are today's socio-cultural issues to you personally?.
Do spiritual topics like God, the universe, and religion play a big role in the way you interpret sociocultural issues?.
How important is it to be able to interact with the information that you're being given? ( Leaving comments, contacting the hosts, projects being worked on).

The answers:

Heard the term but wasn’t familiar with it.
The majority were impartial, but a good number were interested in the issues.
Half of the participants said yes.
4 out of 6 participants said it was imperative for them.

After the results were received, some additional criteria had to be added. I arranged a follow-up meeting with my client to review the findings, as they did not include the details I had hoped for. My client was well aware that the subject would not be appealing right away because they know it is not currently practiced, which validated their objective. However, with some of the new knowledge discovered, the business requirements received a minor but critical update, adding two more to give the website a more complete experience for our target audience.

Here are the following additions:

Create a website and provide a screen to host the radio broadcast as well as another screen for a live tv signal.
Have a Projects window that shows the business’s current projects, past projects, and future projects.
Allow users to be able to contact them for any inquiries and requests.
A news page for all of their topics.
A chat room.

With all the information gathered, I was able to create an empathy map, as well as put it all together and showcase my primary user persona. Take a look.

Empathy Map

User Persona

Drive

-- Learning and progressing.

-- Teaching.

-- Helping the community.

-- Being a role model citizen.

Goals and needs

-- improving himself to be of good example.

--In need of Trustworthy information.

--Staying informed with current events.

Demographic

-- Lives in a metropolitan city.

-- Manager of a hotel.

-- Foreign background history.

Pain Points

-- popular news aren't giving enough awareness to certain issues.

-- Unnecessary celebrity drama news.

Hesitations

-- Not well sourced news websites.

-- possible fake news on new news brands.

-- hard to navigate sites

Anthony Smith

Age: 33

Following the survey and follow-up with the client, I conducted a competitive analysis of a few of the competitors. When it came time to start making wireframes and tapping into my divergent thinking, the websites I studied had a strong influence on my future design decisions. Iheartmedia and IheartRadio, Streema, BeatRadio.ID and Vibe.com were the websites I looked at.

IHeartmedia.com

What was good

Great hero banner.

What was not so good

There was more than one navigation system, which seems a bit redundant.

IHeartRadio.com

What was good

Nicely laid out navigation bar.

What was not so good

The home page was not easy to understand once on another page.

Streema.com

What was good

Nice concept of separating the radio and tv sections in the footer of their site.

What was not so good

Most of all the information is at the bottom of the fold.

BeatRadio.ID

What was good

The site had an interesting display of the radio as a small pop-up lower third banner.

What was not so good

The radio pop-up cannot be removed and it appears on EVERY screen.

Lastly, the most influential one of the bunch, Vibe.com.

Vibe.com

What was good

Their Navigation bar.
The way the content of the site was laid out.
Use of imagery.

What was not so good

None that stuck out to me.

Structuring the content and flow of the site

Now that all of the required research had been completed, It was time to start designing the actual site and structuring the material that the user would interact with. Starting with the site map, then working our way through to the Intended flow.

Before continuing to the next stage of the design process, I organized my research into some simple user stories to help me stay in scope, answer the business requirements, and save time.

The tasks' relative importance helped me remain focused on what to prioritize when and with what degree of urgency.

The navigation bar that was used in the Vibe.com website was very simple and easy to use; so I designed a site map with the idea to imitate the simplicity that I felt as I navigated the pages of that site.

Sacjey Website Sitemap ( team design) (2

I realized that I could have done a card sorting test to see what people would expect to see on each page, but due to time constraints, I chose the second-best choice, which was to simply organize the material into the categories that made the most sense.

User flow

The user flow follows the intended path of having the users use the navigation system as the main source to access the different pages.

Sketches and wireframes

I noted down all the important information gathered and arranged so far on a sketchbook and started to think about how the wireframes should look like.

Then I did some crazy 8’s exercise to help me think more outside the box when it came to designing my solution screens. It proved to be very useful and extremely fun, by far my favorite part of this whole project.

And voila! I had arrived on to some well thought out wireframes

Paper sketch

Digital wireframes

Home page

Radio screen

Chat pop-up screen

Or so I thought.

I used the wireframes to perform a mini-usability test and created a paper prototype to test with friends and family. I'm glad I made that decision early on because the feedback and questions I received were really helpful.

Feedback

Footer was needed.
Two logos on the homepage were not necessary.
Overview was needed to give context on what the wireframes represent.
Navigation bar was needed at the bottom for an easier User experience.
Live TV should be done, if not, discard it.

Questions

What would happen if the user is not on the radio screen.
Questioned why the chat room was a pop-up.

Overall experience: Not so great (yet)

Iteration time

I also had to go back and updated the user flow

Before

After

Then I went ahead and created the digital prototype now that the iterations were complete. All that was left was to run another round of usability tests to see if the concept was more cohesive and intuitive to use this time.

The task tested in this round of usability test was aimed towards answering the business requirements, and was set-up in a way that was not leading but still solved the problem in a functional manner.

Task #1: The user should be able to find the radio screen/ or tv screen with little to no issue at all. (most important)

Task #2: The user should be able to navigate the site as it was intended from the flowchart.

Task #3: The user should be able to leave a comment on the chat room.

Task #4: The user should be able to find and understand the content on each page. (high importance)

Usability results

First impressions

Participants were able to discern right away that this design was that of a website, a radio website in particular.

One of the participants had this to say.

“Looks simple to use” - Jony

That was a good thing to hear. It meant that the home landing page was well done, and not causing any mental overload.

Interactions

All the screens were found.
The users navigated as expected, using the navigation bar on top as the main and for some the only way.
The call to action buttons were not found as quickly as I wanted them to, the issue lied in that some participants did not scroll past the fold.

Difficulties

A participant had issues with the letters being scribbles on the latest news and project pages.
Another participant had scrolling issues.

Overall observations

The results were more promising this time, but there were still some problems that I didn't consider to be red flags for a low-fidelity prototype. The issues that needed to be solved (A.K.A the business requirements) were addressed, and the design accomplished what the client desired.

Prototype

Prototype

Final thoughts

Finally, I had a lot of fun and learned a lot about how to take an idea and turn it into a practical solution from start to finish. This includes everything from interviewing the customer and developing criteria to performing the requisite research for a well-designed final product. I thank everyone who helped, as well as the much-needed feedback provided.