Case study: Designing a mobile app for Audiofanzine
UX/UI Case study.
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.
First, I tested the interface to reveal pre-existing problems in order to resolve them in the new 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.
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.
🧿 IDEATE AND TEST
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.
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
The various animated or interactive components bring visual feedback and dynamism to the application.
For every action, there should be a reaction
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.
UX Designer https://arthurglaizal.github.io/ https://www.behance.net/arthurglaizal