Paper also available on Behance and my web portfolio.

Context

Here is a case study aimed at designing a mobile application for the musicians’ site, Audiofanzine. Curiously, despite its 7,000,000 page views per month, it does not have a real mobile application.

👁‍🗨 RESEARCH

Usability testing

First, I tested the interface to reveal pre-existing problems in order to resolve them in the new design.

Responsive design

The first thing I noticed is that there is a mobile version and a desktop version, at two different web addresses. Certainly, because the differences between the design layouts were too hard to regroup in one responsive website. Unfortunately, all pages don’t automatically detect your device.

Consequently, there is a high risk for a mobile user to land on a desktop/large screen design layout. In this case, the user experience is disastrous.

Other problems

In the mobile version, I rapidly noticed many design problems. First, the lack of visual consistency. The two sides panels (navigation drawer/side sheet) do not match visually: colors, icons, typography,… As a result, the site loses its clarity.

Moreover, it doesn’t feel user friendly, there is a lot of menu and text. Finally, there is no return button where it is needed.

With more time I would have tested the site arborescence and the needs with Audiofanzine users. To do so, the metrics from “m.audiofanzine” would have been a good insight. They might not need all the site features or some could regroup. Consequently, app navigation could be more simple.

Competitive analysis

I also looked at the competitors to see the classic interfaces and pick ideas. Among other things, the tab bar used in all the apps is more accessible compare to the mobile site navigation bar.

source

🧿 IDEATE AND TEST

Sketch

Therefore, to improve the experience, I had 3 objectives in mind for my design:

• Clarify information architecture.
• Create the app identity with a uniform User Interface.
• Allow the user to personalize his news/ads feeds.

Test

Following up with iterative usability testing allowed me to confirm design decisions.

Mockups and charter

The graphic charter includes a new logo to better match the new aesthetic.

In terms of navigation, the tab bar allows you to move between the different sections of the site: News, Ads, Favorite, Message/Forum, Profile.

As soon as he arrives, the user can scroll through the site’s news feed in a pleasant way. The same goes for the ads.

He can also access specific content via the search bar: Stratocaster Fender guitar ads, forum on a drum machine, etc.

📱 DEMO PROTOTYPE

Interactive components

The various animated or interactive components bring visual feedback and dynamism to the application.

For every action, there should be a reaction

High-fidelity prototype

I then produced a high-fidelity prototype with Protopie. It means that the prototype integrates the interactions of the future product and its visual design for maximum similarity with it.