The Challenge

My Little Paris started in 2008 as a newsletter for Parisians, providing them with unusual or hidden places and tips in the capital. I followed them from their beginnings, sharing their passion for the city, and admired their capacity to continuously reinvent themselves. It quickly grew to become many more things, from a simple newsletter to an international startup with over 130 employees, a 5-million people community and constantly new side-projects.

However, they don’t seem to have found the same tone of voice in a mobile app. They have built various ones, divergent yet overlapping, sometimes not responsive to new formats.
So I decided to design one to uncover this unexploited potential.

Note: This project is an independant case study, My Little Paris has not involved in the process.

Analysis of their existing apps

There seems to be 8 apps created by the My Little Paris group: My Little Paris (one secret tip per day – no longer available), My Little Beauty (one beauty tip per day), Tapage (sort of blog about style, culture, engagement and self-love), My Little Magic App (an AR app to animate the illustrations of “My Little Box’s” December edition), The Fifty (a recommandation of the 50 “best meals” in Paris), The Fifty Gifts (a similar concept for gifts), YouMeParis (a guide of Paris for couples – sponsored by Chaumet), and finally BOLD (a map of Paris with the best restaurants, bars, shops and cultural spots of the city).

After analysing the different apps and their relation to each other, I came to realise a few things:

  • My Little Paris likes to have a specific focus for each app and multiply them, rather than one single “do-it-all”;
  • There is quite some overlap between the apps, mostly around giving tips or recommending Parisian places to go to;
  • After creating a new app, they tend not to keep them up to date, which results in having outdated apps (not responsive to new phone sizes…)

At this point, I have to state that I don’t know the reasons behind each app as I don’t work at My Little Paris. I am therefore aware I might be making some assumptions on their positioning.

What is My Little Paris about?

I drew a mindmap of everything My Little Paris represented to me, based on the content available on their website, the other branches they created and their apps.

Mindmap of what represents My Little Paris

Main jobs of the app

I listed the main “jobs to be done”, hence what the app should cover, in order to provide an app that is aligned with the website’s services. Overall, the user should be able to:

  • Read the latest article
  • Choose a specific category of articles to read from
  • Search for a specific article or type on a search bar
  • Know about a recommended place (what kind of place it is, what it is about, and how to get there)
  • Save an article to check it again later
  • Share an article to a friend

Articles as their core product

My Little Paris is most of all a media platform, and published articles on a nearly-daily basis. The way they are organised is therefore fundamental.

I looked at the last 30 articles published on MLP’s website, and the category each was put in. By far, the majority had been defined as “Insolite” (unusual, unique), which cancels the idea of having categories.

Current categories of the website’s last 30 articles, and new tags

I wrote down keywords for each article and noticed many articles had not one but several main keywords. The category system could thus be complemented by filter words, and one article could have several at once.

Defining the flow

At this stage, I had defined the main elements that the app should have. It was time to structure it in a user flow and organise the architecture of the app:

Wireframes

I sketched wireframes to decide on the main structure. I thought a lot about which type of menu to use – fixed at the bottom, burger menu at the top, opening from the top or side, etc. I went for a fixed one as the bottom because there aren’t many features (latest articles, map, favorites and search + categories) and they are all supposedly (user tests will confirm) equally important.

Sketched wireframes

I rendered the wireframes to start off prototyping with a clean base.

Rendered wireframes

The final design

Design system

In parallel of designing the screens, I built the foundations for a design system: I created components, picked icons, colours, fonts, and built a few reusable bricks like the article headers.

I like to do this from the start, as it saves up a lot of time later on. For example, as I did a few iterations on picking the right fonts & sizes, I just had to edit the main component instead of modifying each brick individually (and it’s very satisfying).

Prototype in motion