<p>Published on <a href="https://blog.prototypr.io/designing-a-new-evernote-for-windows-mobile-b3a0ca7bc9db?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> KaustubhAdhav </p>
<p>Concept for the Evernote App on Windows 10 Mobile.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*r6JVyQkMmaTCO3D7IbraMA.png"></p>
<h3><strong>Background</strong></h3>
<p><em>Note: This was a self-initiated concept for the </em><a href="https://medium.com/u/cc5554e706bb"><em>Evernote</em></a><em> app for Windows Mobile and is in no way endorsed by the Evernote Corporation, makers of the Evernote App.</em></p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*kTpMP8sxtYxkU5V_0mgxJQ.png">My First Android Phone was the tiny <a href="https://www.youtube.com/watch?v=huppHZ7ZeQ8">HTC Wildfire aka Buzz</a></p>
<p>Well! Everyone has heard of Evernote right? Evernote is a digital note-taking platform that allows users to take notes in a variety of methods — regular textual notes, photographs, voice memos, web pages, email, the list goes on. It also plays nice with products like Post-It Notes and Moleskine. Thus, bridging the gap between the physical and the digital.</p>
<p>My first experience with Evernote was 7 years ago when I got my first Android smartphone . At the time, I used Evernote for my college notes and assignments, my use was not extensive. I became an Evernote junkie when I started out in Graphic Design. It became my dumping ground for pretty much everything — Articles that I found interesting, design sketches, notes from meetings, inspiring images, the list goes on.</p>
<p><em>This entire concept was thought out and designed </em><strong><em>two years ago.</em></strong><em> Now that I look at it, I can see a few issues with the design such as alignments and typography along with a few kinks in the user journeys.</em>🤪<em> But still, it was one of my first interface projects and thought it would be cool to share it. Comments/Criticisms are welcome!</em></p>
<h3><strong>The existing app</strong></h3>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*VcPsU50KjLwaq2sox_j3cA.png">I would use Evernote extensively on Lumia 720. Later, on the Lumia 1520 (a <a href="https://www.kaustubhadhav.com/windows-insider-contest.html">gift from Microsoft</a>)</p>
<p>When I moved to Windows Mobile (then, WP7), I started using the Evernote App for Windows Phone. It had a clunky UI, they had tried to incorporate the Windows M̵e̵t̵r̵o̵ Modern Design Philosophy but the colours were dull, the interactions were weird making the entire experience disappointing. Functionally, there was no problem but it did not have the polish that you get from a top quality app.</p>
<p>When Windows 10 came out, I thought that Evernote would bestow some love on the Windows Mobile Community in the form of an update. Evernote probably though it wasn’t worth much of an effort since the Windows Mobile Community is small compared to iOS and Android. However, I still had high hopes. When that did not happen, I thought of creating a concept and sending it to Evernote for consideration.</p>
<h3>A few key screens from the original App</h3>
<p>I went through the app, scouring upon each screen and found key areas which could be improved.</p>
<h4><strong>Home</strong></h4>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*nppecLAderdWvasscNSPOg.png"></p>
<p>When launched, the app presents you with the homescreen. This has the username at the top, pinned/starred notes at the bottom and a cluster of tiles in the middle with the following options,</p>
<ul>
<li>New Note</li>
<li>New Capture</li>
<li>New Recording</li>
<li>New Attachment</li>
<li>Uploads</li>
</ul>
<p>All recent notes and notebooks could be accessed by swiping along the pivot navigation.</p>
<p><em>Note: Microsoft moved away from the pivot style navigation when they rebooted the design with Windows 10. This significantly altered the design of the apps. The large headings on the top of the app were moved to the Hamburger Menu. Most of the stock apps utilised this design. Pivots are still present. They are now styled in a more traditional manner and are never out of the bounds of the viewport as those found in the apps of the Windows 8 era.</em></p>
<h4>Edit Note</h4>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*OerDUydUI0hg3dbhGq8X_Q.png"></p>
<p>The edit note screen has options for bulleted list, checklists, and the ability to attach photographs in the bottom navigation. However, once you start typing, they are hidden from view behind the keyoard. The only way to access these options was by closing the keyboard 😥</p>
<h3>The Concept</h3>
<p>I worked out a few scenarios while using Evernote on my mobile and came up with a new User Interface to improve the experience on Evernote Mobile.</p>
<h4>Home</h4>
<p>A new Home Screen Design ditches the old pivot style navigation for a more compact approach.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*QnYsHvxkFeqd4OUV6w5psw.png"></p>
<ul>
<li>A new “Today” view displays all relevant notes for the day. The note content(Such as photographs of documents and Post-It notes) really stands out!</li>
<li>I included a calendar system for time-sensitive notes. This really increases the utility of notes. I have explored more about the Calendar System further in the article.</li>
<li>Shortcuts to Notebook, Notes, Tags have been shifted to the left side along with the shortcut to the new “Calendar View”.</li>
<li>The options for creating a new note as well as new note from camera and voice recording has been moved to the bottom bar to facilitate ease while using with a single hand.</li>
</ul>
<h4>Edit Note</h4>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*NkG1O-4ty571fLHSOMtfeA.png"></p>
<p>The New Note View has been redesigned to access formatting options while the keyboard is up. The options are always visible on the top left corner. Moved image and voice attachments under attachments (accessible via the paper clip)</p>
<h4>Calendar View 🤘</h4>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*iIS3jyLd9-4SJJwa2KmuyQ.png"></p>
<p>In the current versions of Evernote, there is an option to add a date to time sensitive notes. Though, it uses this information for setting reminders, I thought it can be exploited futher.</p>
<p>I personally, write my tasks on Post-It Notes and photograph them with the Evernote Camera. This way I can always carry them with me without the fear of losing them.</p>
<p>However, while planning for an appointment, I found it hard to arrange my notes according to the deadline. If a Calendar View were to be introduced, it would prove really useful.</p>
<p>There are two views,</p>
<ol>
<li>Month View with the calendar on top and the notes arranged chronologically at the bottom.</li>
<li>Week view can be opened by clicking on a particular week which would then show titles of relevant notes along with thumbnails of images if attached.</li>
</ol>
<h4>Prototype Video</h4>
<p>In order to showcase the concept, I created an animated Prototype and added the video to the Evernote User Forum.</p>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F144352631&amp;dntp=1&amp;url=https%3A%2F%2Fvimeo.com%2F144352631&#038;image=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F542172057_1280.jpg&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=vimeo" width="1280" height="720" frameborder="0"><a href="https://medium.com/media/5c1ff049bfa9cd9075e335f450aaeef5/href">https://medium.com/media/5c1ff049bfa9cd9075e335f450aaeef5/href</a></iframe></p>
<p><em>Note: Created the entire design and animation using Microsoft PowerPoint. I was a PowerPoint Junkie and used to create even full length motion graphic videos in PPT. You can see some </em><a href="https://www.kaustubhadhav.com/motion-graphics.html"><em>here</em></a></p>
<h4>End notes</h4>
<p>Chances of Evernote adopting this idea seems slim now that they have <a href="https://blog.evernote.com/blog/2017/06/26/evernote-end-support-blackberry-windows-phone/">anounced that they will be dropping support for Windows Mobile.</a> Hey! But a guy can always try! 😁</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/128/1*xm9ZlE3laTYZmTJQaE3B4g.png"></p>
<p>I am a Product Designer and a Graphic Designer. You can connect with me on <a href="https://www.behance.net/kaustubhadhav">Behance</a>, <a href="https://in.linkedin.com/in/kaustubhadhav">LinkedIn </a>or <a href="https://twitter.com/kaustubhadhav">Twitter</a>. To view my work, visit <a href="http://www.kaustubhadhav.com">www.kaustubhadhav.com</a></p>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2Ff51076%3Fas_embed%3Dtrue&amp;dntp=1&amp;url=https%3A%2F%2Fupscri.be%2Ff51076%2F&#038;image=https%3A%2F%2Fe.enpose.co%2F%3Fkey%3DdRXnS9Gplk%26w%3D700%26h%3D425%26url%3Dhttps%253A%252F%252Fupscri.be%252Ff51076%252F%253Fenpose&amp;key=d04bfffea46d4aeda930ec88cc64b87c&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="400" frameborder="0"><a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a></iframe><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=b3a0ca7bc9db" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://blog.prototypr.io/designing-a-new-evernote-for-windows-mobile-b3a0ca7bc9db">Designing a new Evernote for Windows Mobile 😅</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


Designing a new Evernote for Windows Mobile

Background…

Top Stories