History of everything
Case Study
TL;DR — Final concept can be seen in this video.
App concept
I try to occupy myself with some personal projects in the weekends when I am free and this project is the end result of that. The main aims of this project are,
- To Learn Sketch, Interaction design tool,
- To Learn Pixate, prototyping tool,
- Learn to design for rich text and media applications.
The Idea I thought was really simple. To create timeline based history app that gives rich minified article content to the user. Even though this is just a concept, I wanted the content to be more of narrated version rather than collection of facts organised in a layout. I also wanted to create an approach that helps the users to grasp the plot summary of the history in few mins. For eg: History of French Revolution. If I want to learn about it, I have to read atleast 200 words to understand the summary. Wouldnt it be easier if you can read a simplified version of the events.
With this idea in my mind I did basic wireframing and sketching.
Wireframing & Sketching
When I initially started wire framing for the app, These are the screens I mapped that are very essential for this app,
- Search History.
- bookmark history and view it later.
- timeline view — access history in linear time years
- Article pages with zero distraction.
The ultimate motive of the app is to make the user to read more history. If thats the case, then the app should also include curated set of popular topics everyday so that its easy for user to just click on one topic and start reading instead of searching. This should also impact the retention of users. From the beginning I tried to bring gestures as part of the navigation,because they are more intuitive and especially for big devices its easier to navigate through gestures.
While wire framing, I took occasional breaks and sketched few icon concepts for the app.
Mood board
This is the mood board I set up before I started the project. This includes Facebook paper,Groups, beautiful webtype from hellohappy, Apple’s iBooks, Instaper design and countless app screens in pttrns and pintrest.
Design
The design concept follows below. I used pixate to make a prototype and understand the interactions. You can find the pixate prototype link at the bottom.
Designing in sketch is so much easy and interesting. Sketch is extremly fast and its very useful when you are quick prototyping. The best part was the bird eye view of all artboards. Even though I can possibly achieve the same in Photoshop or illustrator, I never used to do this because of the performance issues.
The bird eye view gave me the prespective of app flows. This also helped me to understand what kinda transition animation I can use later for each flows
Screens
Launch screen
My first idea was to show white frame of the app interface and use it as splash screen. But then I felt no where in the app, I say the app name nor its branding. So I felt its good place to use it here.
Navigation & Landing
When the user lands on the page, he or she expects one most important thing for an history app to have, Search. So I kept the search straight forward and simple at the top. Landing screen also serves a case where the user wants to read something, but not sure what to read. Thats why I tried a daily curated popular cards If today is Tesla’s birthday then user can find a card related to that in this section.
Timeline
When you swipe left in the landing screen, It takes you to the timeline view. As you could have seen in the video, This has two dragable areas, One being the timeline years in the right and another being events happened in that year. Want to know what happened in 1820? Just drag the year and you can quickly get the events listed in the form of cards.
Favourites
As the name says by itself, its just the bookmarks screen. If you are reading something awesome in the history, and you dont want to loose it, you tap favourite and it’l be listed here. Favourites are available when you swipe right from the main screen.
With three views — Home: Search and popular section, Timline, Favourites the obvious way is to use tab bar at the bottom with three icons for each.
I realised sematically its good way to use tab bar for this case, since all these three screens are used to acomplish one main goal — to give user something to start reading. These three screens are basically child views on main Landing screen for the app
Article view
Few points I wanted to make sure before I started designing this screen.
- There should be very less or Zero distractions
- Typography shouldnt be distracting and also not boring.
- The content should have meaningful rich photos, media and powerful snipets.
Apart from these, I felt all articles should have one cover photo atleast. Good photographs give the user an visual depth to imagine the history.
When you swipe right in the article view, you can peak in to a timeline. The yellow region is timeline in which the history took place. You can go tap any year in that and you can explore the events happened during that time. For eg here in the word war, you can tap on 1942 and see what happened in that year.
History smart cards
At the top right you can see smart cards icon.
The smart cards are for the users who wants to quickly understand the history. You can see the number of cards in the icon. The interface is simple. No distraction and just cards. Swipe to move to the next card. Initially I thought of keeping a carousel dots at the bottom. But since the number of cards can go up to ten, I felt it’s better to just show the number at the top.
Jump menu
When you long press the articlescreen, you get settings and control. You can favourite, share this article. You can also customise how the app looks. Related articles are listed at the bottom . The reason to put related article there is that user might want to read more related articles or want to see some original reference articles. I wanted to give them one experience where they can quickly reach it.
Customisation.
Without dark mode, the app will be so bright at night. Thats pretty painful to read like that. I personally like reading in a smaller type size. But it may not apply for everyone. That’s why there are options for both. You can also choose whether you want serif or sans-serif fonts.
When user finishes article
Related articles list comes at the bottom. Again this will stop user from leaving the app and continue reading. Helps retaining the user to spend more time on the app.
Style Guide
Styles are one of the factors that makes visual design of the app unique. When exploring typography in the intial phases, First I picked Abril Fatface. Then later I realised Playfair Display is much better choice and looks rich and compact at the same time. Adobe Caslon had good readability even in small screen sizes and I felt its good choice for the body of the app.
App Icon
An App icon represents the entire application. If thats the case then this is the first impression for the app. Sometimes the best way to communicate what this application will do is to show the interace itself. The best examples from apple are reminders, Notes, Passbook and Maps. If the user is going to use this app a lot, then only thing they will remember is the app’s interace. With those design cues, I tried this app icon with the timeline scrubber as the one in the right .
When I showed this concept to my friends, I learnt so many interesting direction I can take to make this concept even better. I am calling this concept version: 0.1 and I will iterate over it to explore other amazing, intutive and clever ways to see history and make it more approachable to mobile generation.
Thank you very much.
Resources:
Adobe Caslon
Pixate prototype (a little buggy)
