Makers Stories : the story of a collaborative app
If you are reading this story, you are either using the Makers Stories app, or Medium. You might be a Maker, or maybe not, a lover of literature, or a math whizz. Whoever you are, welcome to this new adventure. Over the coming days and months we will be bringing together people from different backgrounds to collaborate and co-develop a project on a subject that is close to everyone’s hearts: creating a community that is curious and caring, that is looking for innovative ideas and tools, and is aiming to share them with as many people as possible.
Creating a Maker’s Spirit platform
In 2014,, emlyon business school introduced an ‘Early Makers’ initiative, placing it at the very heart of its identity, strategy and teaching. So, what’s an ‘Early Maker’? It’s “an individual who takes control of their destiny, who is pro-active in the way they lead their life, and yet who does so in a collaborative way — moving from ‘Do It Yourself’ to ‘Do It Together.’ It’s an innovator who makes projects happen.”
I don’t know about you, but at BEWIZYU, this all resonates with us…
We have been working for several months with emlyon business school and My Lucky Day to position the school as a media organization, by way of a mobile platform. Aimed at Makers, students and media professionals, it’s a collaborative tool for writing and reading ‘stories’, while offering an innovative user experience. Finally, what could be more logical than incorporating the market leader in stories — Medium.com — and benefiting from its contributors?
What follows is my UX/UI feedback about this adventure, which led the teams from emlyon business school, My Lucky Day and BEWIZYU to create a mobile app ‘Makers Stories’.
The story, it’s all about the format
I ‘began’ by benchmarking mobile apps that offered news or story content, that may or may not include their own community and the sharing of collaborative content. I also looked at the personalization aspects (and at what level these are offered).
I enjoyed doing this, even though it’s very time-consuming, because it allows you to really immerse yourself in specific ways of using mobile apps. Obviously, the world of news and personal stories is hardly an unfamiliar one to us, but it still has an element of discovery, and testing, about it. The stage of presenting the chosen benchmark is also an opportunity to clarify the client’s real needs — and to demonstrate how an app connects with their everyday realities. In short, it’s a way of scoping out the mobile app a little more clearly.
Benchmarking was also an opportunity to put forward a number of wireframes, in order to check out various ideas, like the floating button, navigation by the bottom bar, and different types of access…
The driving force of the project is the fact that the staff at emlyon business school are looking for innovative interfaces and interactions. This does not mean revolutionizing people’s existing ways of working, but at least offering them an engaging and emotional journey. Finally, the aim is to provide a more organic connection with the content, one that a Maker can experiment with at the heart of a project.
Concepts? Designs? Ideas? All three!
While designing the first screens, I also started work on the app’s graphic charter, and aligning it with the branding of the school. The graphic identity of Early Makers is minimalist, simple and based on a modular system. It’s about using simplicity to drive home a powerful message. As I worked on the app’s logo, graphical charter and interfaces, I bore in mind this idea of keeping things simple. For the logo, the idea of communicating the story aspect — at first sight — was obvious…
The visuals are part of the brand’s DNA and, alongside the intrinsic content of the app, they clearly had to feature prominently — whether during the initial connection, on the Home page, in a story, as part of a profile, or during the redirect to Medium. Whether a filter is used or not, the visual has to be there. It provides an illustration, an emotion, and a piece of information.
The Home page is something that crystallizes all your creative fantasies… and therefore makes the design stage even more complicated.
My initial ideas for the home page and the navigation were to either have a simple header with access to the stories by themes, or to navigate by ‘story card’ (if, in the end, the themes idea was dropped). The basic aim was to offer another approach to the content, something different to media sites such as Le Monde or even Medium.
To meet the need for fingertip access from the Home page, using the floating button, bottom bar or scrolling seemed obvious enough, given that on a smartphone, the latter and the surrounding area provide a way of interacting with the app. Designing the ergonomics around this basic principle of interaction is a must-have for helping people get to grips with an app or a mobile site.
Another element that has become essential, particularly for reading a story or an article, is the notion of the time needed to read it in full — or at least to get some way through it. In an era of mobility, we also seem to be spending our time chasing after … time!
On top of that, as well as saving users’ time, you need to be economical with space — as smartphone screens cannot display everything. That’s why it’s better to help the user if the interaction appears to be ‘hidden’ — as is the case with swiping from one story to another. A small animation is provided if the swipe function is not discovered by the user during the appropriation phase.
Prototyping tools
To share screens, interactions and different user journeys, we decided in conjunction with emlyon business school to use Marvel. It’s very easy to use and the interactions available are basic, but effective. However, with the development teams at My Lucky Day, I used their account with Invision, which I also like a lot (it’s more collaborative than Marvel, and ‘Freehand’ is great fun). I can’t lie, updating two platforms with an ever-greater number of screens, and a growing number of iterations, is a lot of work. It’s a topic to be put firmly in the ‘areas for improvement’ category.
Here they are! ‘My’ screens, designed with Sketch for Makers Stories, which are able to stand on their own two feet. Now comes the ultimate feedback for any designer — when the end-users get their hands on the system! And that will be the start of a new story, yours and ours, that we hope will be long-lasting and, above all, lively!
