<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0" xmlns:media="http://search.yahoo.com/mrss/"><channel><title><![CDATA[One semicolon at a time;]]></title><description><![CDATA[Life, Tech, Business (not necessarily in this order)]]></description><link>https://razvanilin.com/</link><image><url>https://razvanilin.com/favicon.png</url><title>One semicolon at a time;</title><link>https://razvanilin.com/</link></image><generator>Ghost 5.20</generator><lastBuildDate>Fri, 10 Apr 2026 21:37:08 GMT</lastBuildDate><atom:link href="https://razvanilin.com/rss/" rel="self" type="application/rss+xml"/><ttl>60</ttl><item><title><![CDATA[Norman's Design Principles - Design Stories 3]]></title><description><![CDATA[The designer has his or her conceptual model and the trick is to be mindful of that and make sure that this translates well in how the user conceptualises this.]]></description><link>https://razvanilin.com/normans-design-principles-design-stories-3/</link><guid isPermaLink="false">635ba9afad083dbcad3e90ae</guid><category><![CDATA[design stories]]></category><category><![CDATA[design]]></category><dc:creator><![CDATA[Razvan Ilin]]></dc:creator><pubDate>Sat, 22 Feb 2020 11:38:50 GMT</pubDate><media:content url="https://razvanilin.com/content/images/2020/02/firdaus-roslan-5uXz8YbHhCQ-unsplash.jpg" medium="image"/><content:encoded><![CDATA[<blockquote>Prepare your coffee or tea and let&apos;s get ready to go through the second design story, part of the <a href="https://razvanilin.com/design-stories-series-part-0/"><em><em>Design Stories</em></em> series</a>.</blockquote><img src="https://razvanilin.com/content/images/2020/02/firdaus-roslan-5uXz8YbHhCQ-unsplash.jpg" alt="Norman&apos;s Design Principles - Design Stories 3"><p>In this article, we&apos;re going to look at <a href="https://jnd.org/">Don Norman&apos;s</a> design principles that he discusses in his book called <a href="https://jnd.org/the-design-of-everyday-things-revised-and-expanded-edition/">The Design of Everyday Things</a>. If you didn&apos;t read it already, I fully suggest you check it out. I&apos;m going to discuss the principles and give some examples along the way, but I&apos;m not going into too much detail as that can be found in the book.</p><blockquote>Throughout this article, I keep repeating &quot;object&quot; and &quot;artefact&quot;. These can be a physical device, a user interface, anything really. I use those terms because the definitions that are discussed below apply to anything.</blockquote><h2 id="performing-actions">Performing actions</h2><p>When using an object, an interface or taking any action, we do it because we set some goals in our mind. Without goals, we wouldn&apos;t need to take any actions, right? Taking actions is an iterative process that happen on two dimensions: Execution and Evaluation.</p><p><strong>Execution </strong>- In this dimension we examine our goals, intent to act, build up a sequence of actions and execute them.</p><p><strong>Evaluation</strong> - After we completed the actions we notice what has happened, we interpret and lastly evaluate the results which helps us generate new goals and then everything repeats.</p><figure class="kg-card kg-image-card"><img src="https://razvanilin.com/content/images/2020/02/actions.png" class="kg-image" alt="Norman&apos;s Design Principles - Design Stories 3" loading="lazy"></figure><p>A good example that came in my mind now that I was writing this article is the actual keyboard typing. I have the goal to write a sentence, I intend to use the keyboard, I know what I&apos;m going to write and which buttons to press, and then I type everything down. I examine the screen and I evaluate the situation. I notice that I made a spelling mistake in the middle of the sentence and then my new goal will be to correct this. The new sequence of actions will be to click where the mistake is and type the right thing. And this process goes on and on because that&apos;s how we function as human beings. This seems pretty obvious, but as designers it helps to think about these basics to create useful interactions that doesn&apos;t break the cycle of coming up with new goals.</p><h2 id="conceptual-models">Conceptual Models</h2><p>Whenever we want to interact with an object we already have an idea how it works or we can consult the instruction manual to learn more. So how does the <strong>conceptual model</strong> work when it comes to designing a new artefact?</p><p>The designer has his or her conceptual model and the trick is to be mindful of that and make sure that this translates well in how the user conceptualises this. A good example here is an open-source project where the designer/developer created a documentation to unify the creator and user conceptual models. Take a look below at a diagram describing this scenario:</p><figure class="kg-card kg-image-card"><img src="https://razvanilin.com/content/images/2020/02/conceptual-model-1.png" class="kg-image" alt="Norman&apos;s Design Principles - Design Stories 3" loading="lazy"></figure><p>Of course, you might say the documentation example is too much and a good designer should design something that can be easily used without having to write pages of instructions. And you&apos;re right to think that! This is where the following come in:</p><h3 id="affordances">Affordances</h3><p>This means that the object that is designed should have perceivable actions. The user should be able to look at the object and know how to manipulate it without having to consult the instructions. When a door has a handle on one side and a plate on the other, you know that you can pull and push respectively.</p><h3 id="signifiers">Signifiers</h3><p>Signifiers are used to indicate certain actions. In the example with the door above, a signifier can be a hand drawn on the plate to indicate that the door can be pushed with the palm. Sometimes it&apos;s a bit tricky to distinguish between <strong>Signifiers </strong>and <strong>Affordances. </strong>My usual approach is to think about affordances as being the innate properties of the object that can be perceived and signifiers are any perceivable signs that point to how an object can be used. So you can think that signifiers make the affordances more clear. </p><blockquote>The signifiers term was added in the latest version of <a href="https://jnd.org/the-design-of-everyday-things-revised-and-expanded-edition/">The Design of Everyday Things</a> book. If you&apos;re reading an older version you won&apos;t find the term described there.</blockquote><h3 id="mapping">Mapping</h3><p>This concept refers to the relationship between the actions performed and the results in the world. The mapping should be easily remembered so it becomes obvious the next times the object is used. Another aspect of mapping is that the controls should match the effects in some way. This can be done through shape or positioning (grouping and patterning). Norman gives several examples, but I selected two of them to better explain what I mean by mapping through shape and position.</p><p>In terms of shape, Norman gives and example of the seat adjustment controls that are placed in the shape of the seat itself. You can see the example in the image below where the the two buttons that resemble the seat map nicely to the effects you expect as the user - left button controls the lower seat and the one on the right, the back rest.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://razvanilin.com/content/images/2020/02/image-3.png" class="kg-image" alt="Norman&apos;s Design Principles - Design Stories 3" loading="lazy"><figcaption>Image taken from: <a href="http://www.bavarianmw.com/guide-3147.html">http://www.bavarianmw.com/guide-3147.html</a></figcaption></figure><p>When looking at the position, I like Norman&apos;s example of light switches. For a good mapping the light switches should be grouped by which room they control the lights in and in which order. So let&apos;s say you enter a hall and the hall leads directly to the living room. As you enter there are three switches. The first one should be for the hall itself and then the two others should be for the living room in the order in which the lights are placed apart from each other.</p><h3 id="constraints">Constraints</h3><p>The constraints are a powerful concept to keep in mind when designing an artefact. They come in multiple shapes and forms, but they basically do what they say - they don&apos;t allow users to perform certain actions. Take the scrollbar on the side of this page as an example. You can see where you are on the page and how much you will be able to scroll. You can&apos;t scroll more than the top or bottom of the page. Also, since we are on the topic of UI design, the greyed our menu options or buttons are examples of constraints as well. They allow easy communication with the users to let them know certain actions are not possible.</p><h3 id="feedback">Feedback</h3><p>So we have a nicely designed artefact that has all the affordances and signifiers in place, it&apos;s properly mapped and limits the user from taking the wrong actions with the constraints. Now the user is using the object and something happens. This &quot;something&quot; should be visible to the user so that we can complete the execution evaluation cycle that I talked about above. If the user takes an action and there&apos;s no feedback, then the tendency is to try again and then declare the object broken. A button on an interface can have &quot;pushed&quot; and &quot;released&quot; animations and some kind of result should appear on the screen. This could be a <strong>loader </strong>and a <strong>checkmark </strong>when the process is complete.</p><h2 id="mistakes-happen">Mistakes happen</h2><p>Even if all the concepts above are extremely well implemented, the user is bound to make a mistake at some point. As a designer you should prepare for these situations by making sure users can recover from them. The mistakes can happen for a several reasons:</p><ul><li>Lack of knowledge</li><li>Instructions errors</li><li>Losing concentration</li><li>Slips, etc</li></ul><figure class="kg-card kg-image-card"><img src="https://razvanilin.com/content/images/2020/02/image-4.png" class="kg-image" alt="Norman&apos;s Design Principles - Design Stories 3" loading="lazy"></figure><p>The user tends to blame themselves when something wrong happens when using the object. So the errors must communicate the situation to let the user know what happened. The designer should <strong>design for errors</strong> in this case.</p><p>It might seem strange, but the design should <strong>allow mistakes</strong>. The reason being that the mistakes should be there for the user to know what is allowed and what is not in certain situations. Of course, this only works if the user is told that the action was a mistake. Another way is to allow the mistakes, but then <strong>ask the user</strong> how to proceed, like in the scenario where a user wants to exit a document that wasn&apos;t saved. In some cases that can be a mistake, but it can also be on purpose. So to solve that problem the system can display a dialogue asking the user if they would like to save the document before exiting. Another important function for designing for errors is to <strong>allow to recover</strong> from mistakes. An example can be the undo function.</p><blockquote><strong>Bonus</strong>: If you want to explore other ways to think about interaction design search for Schneiderman&apos;s rules for interaction design. <a href="https://www.interaction-design.org/literature/article/shneiderman-s-eight-golden-rules-will-help-you-design-better-interfaces">Here is a good article on that</a></blockquote><hr><p>Next time you design an object or an interface try and think about all the concepts above, especially the affordances, signifiers, mapping, constraints and feedback. Or you can even take an existing interface and take it through all of those to see how they check certain things. If you find something interesting feel free to <a href="https://twitter.com/razvanilin">get in touch with me</a> and we can discuss it.</p><p>Also, if you haven&apos;t done so, feel free to <a href="https://mailchi.mp/de7711b6d616/razvanilin">subscribe to the newsletter</a> to know when I post the next article in the series.</p><p>Until next time, with more design theory!</p><p>-Raz - <a href="https://twitter.com/razvanilin">@razvanilin</a></p><p>This article was based on a lecture by Patric Dahlqvist from KTH University and Don Norman&apos;s <a href="https://jnd.org/the-design-of-everyday-things-revised-and-expanded-edition/">The Design of Everyday Things</a> book (which I fully recommend for reading).</p><p>Cover photo by <a href="https://unsplash.com/@nikfrdszrsln_?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Firdaus Roslan</a> on <a href="https://unsplash.com/s/photos/cd-player?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></p>]]></content:encoded></item><item><title><![CDATA[Designing for memory - Design Stories 2]]></title><description><![CDATA[Human attention and memory capabilities have guided interface design throughout the years so let's have a look at interesting theories about this.]]></description><link>https://razvanilin.com/designing-for-memory-design-stories-2/</link><guid isPermaLink="false">635ba9afad083dbcad3e90ad</guid><category><![CDATA[design stories]]></category><category><![CDATA[design]]></category><dc:creator><![CDATA[Razvan Ilin]]></dc:creator><pubDate>Fri, 07 Feb 2020 14:07:12 GMT</pubDate><media:content url="https://razvanilin.com/content/images/2020/02/valentino-mazzariello-Ndm1hhIcwHc-unsplash.jpg" medium="image"/><content:encoded><![CDATA[<blockquote>Prepare your coffee or tea and let&apos;s get ready to go through the second design story, part of the <a href="https://razvanilin.com/design-stories-series-part-0/"><em><em>Design Stories</em></em> series</a>.</blockquote><img src="https://razvanilin.com/content/images/2020/02/valentino-mazzariello-Ndm1hhIcwHc-unsplash.jpg" alt="Designing for memory - Design Stories 2"><p><a href="https://razvanilin.com/human-perception-and-memory-design-stories-1/">In the previous part</a>, I wrote about the visual perception capabilities that we humans have and how important this is for design. We take all the current interface design for granted, although most of them rely on decades of research. Especially since the Gestalt Psychology school was founded at the beginning of the 20th century.</p><p>Now let&apos;s shift our focus towards our memory and to relevant theories that are guiding the design. Believe it or not, designing for memory is vital in ensuring that your users are not struggling with your product. Again, due to the decades of research in this domain, most of the current designs are doing a good job on this side of things, but the problem comes with more complex systems where you have to keep switching between familiar interface interaction and more specialised use. Let&apos;s go to the basics first.</p><h2 id="attention">Attention</h2><p>Attention, as I see it, sits right between perception and memory and has an important role in how we perceive the world. For example, you can look at something, but if you&apos;re listening to what somebody from behind is telling you or you are deep in thought, you will most likely not pay attention to what you&apos;re looking at. Some people are better than others at dividing attention, but as designers, we should not make these ideal assumptions.</p><p>Like I mentioned <a href="https://razvanilin.com/human-perception-and-memory-design-stories-1/">in the previous article</a>, we are constantly processing a lot of sensory information at any given time. When we are working in an office, we will pay attention to the temperature around us, the voices, notifications, the colleague chewing something near us, etc. We as humans have the capability of having <strong>selective attention</strong>. This is how we manage to focus on what we want to pay attention to.</p><p>There is an interesting effect called the <a href="https://asa.scitation.org/doi/10.1121/1.1907229">&quot;Cocktail Party Effect&quot;</a> which describes the situation when you look at something, but you pay attention to another thing. Much like at a party when you look at a person, but you concentrate your attention on someone else speaking behind you.</p><p>When it comes to design it&apos;s fairly difficult to design for attention since you have limited knowledge about the user&apos;s capability to maintain a focused state for long. The general rule of thumb is to make sure the user can resume the work at any time as though they lost attention. Thinking about an interface, this could be a visual state of the progress that&apos;s been done by the user, so they can safely resume.</p><blockquote>You can read some more in-depth theories in the <a href="https://www.amazon.com/Cognitive-Psychology-Robert-J-Sternberg/dp/1305644654">&quot;Cognitive Psychology&quot;</a> book written by Robert Sternberg.</blockquote><blockquote>More of an aside, <a href="https://devmode.fm/episodes/development-and-the-art-of-focus">here is a podcast episode from devmode.fm about maintaining focus as a developer.</a></blockquote><h2 id="memory">Memory</h2><p>Memory comes in three different levels that feed into each other, the <strong>sensory stores, short-term store, and long-term store </strong>(take a look at the picture below). Attention is part of the sensory memory and this is extremely short-lived in nature. If we stop paying attention to the information at hand, it fades immediately.</p><figure class="kg-card kg-image-card"><img src="https://razvanilin.com/content/images/2020/02/image-2.png" class="kg-image" alt="Designing for memory - Design Stories 2" loading="lazy"></figure><p>Now let&apos;s take a look at the other two parts, the short-term and long-term memory.</p><h3 id="short-term-memory">Short-term memory</h3><p>Short-term memory or <strong>working memory </strong>is where we keep the information we need to complete the tasks at hand. The information we keep here usually fades away in around 30 seconds. A good example is a sequence of numbers we use to make the next call. Let&apos;s say we have a chat with someone and this person tells us a sequence of 7 numbers to make a phone call right away. This usually works and most people will be able to keep this information in their memory long enough to make the call.</p><p>The cognitive psychologist <a href="https://en.wikipedia.org/wiki/The_Magical_Number_Seven,_Plus_or_Minus_Two">George Miller wrote a famous paper</a> where he discusses the ability of a person to remember 7 &#xB1; 2 numbers using their short-term memory. This number can be extended using patterns. Remember <a href="https://razvanilin.com/human-perception-and-memory-design-stories-1/">in the last article</a> how good people are when it comes to patterns? Well, this is the same when it comes to memory. For example, if we have a series of let&apos;s say 16 numbers, but we chunk this into groups of 4 and each group has a meaning for us, then we could actually remember this long sequence quite well.</p><blockquote>1980 4687 7734 2514</blockquote><p>What are the implications in design when it comes to <strong>working memory</strong>? As designers, we need to optimise the way the processes work within the application. The first example that comes to mind now is the 2-factor authentication. Let&apos;s say you secure your application and decide to send an SMS code to your users when they try to log in. The easiest way for the user is to glimpse in their notifications to see the code and then write it in the verification box on your site. Pay attention that the user will most likely have their phone on the table, locked and with a short on-screen time so writing number after number and checking the screen multiple times is a bit cumbersome. So what are most of the applications doing? They send a very short number, usually ~6. That way most users can remember the number with just one glimpse. Six is still a big number and the safest bet that the user will save the number in their working memory is more like 4.</p><h3 id="long-term-memory">Long-term memory</h3><p>Unlike the working memory, long-term memory is basically unlimited in capacity. Our long-term memory stores most of the information in a semantic way so that we can remember facts based on the context or we can even use our senses to pull down memories, for example, using our olfactory senses to recognise the perfume of a loved one or to recognise if food is fresh or not.</p><p>On top of the semantic memories, we also have two other types, <strong>episodic </strong>and <strong>procedural</strong>. The episodic memories are things that marked us in life such as important achievements and very negative experiences. You know how everybody says that once you learn how to ride a bike you will never forget how to do it? Well, this is the <strong>procedural </strong>memory at work. This type of memory usually is always accessible in our minds unless a person suffers a severe trauma that can interfere with the memory.</p><p>The implication in the design arises when thinking about how people retrieve the information from the long-term memory store. There are two ways that designers in HCI base their designs on - <strong>Recognition </strong>and <strong>Recall</strong>. My favourite example to understand these concepts is the one on the <a href="https://www.nngroup.com/articles/recognition-and-recall/">Nielson Norman Group&apos;s site</a> where it describes the situation when you meet a person on the street, you remember their face, but you think hard and can&apos;t remember the name exactly. The first part of the example when you remember their face is the <strong>recognition</strong> at play and the second, when you want to remember the name is the <strong>recall.</strong> You can see right away that recognition is a much better way to retrieve information from the memory. Recall requires more time and effort for the person.</p><p>Using the information above, we can reach the conclusion that we want to employ recognition as much as possible in our designs so we don&apos;t put too much pressure on the user. Recognition is easier because it relies on more cues to help a user retrieve the memory. In the example above, we might&apos;ve seen the person multiple times, but they didn&apos;t mention their name all the time for us to remember (I often forget names because of this). So when designing an interface we rely on common design patterns such as toolbar menus in photo editors with the familiar icons for <strong>select, bucket, crop, etc.</strong> </p><blockquote><a href="https://www.nngroup.com/articles/recognition-and-recall/">Have a more in-depth read about this on Nielson Norman Group&apos;s site.</a></blockquote><h2 id="discussion">Discussion</h2><p>In this article, we looked into the inner workings of the mind when it comes to memory. In my HCI journey so far one of the most prominent discussions arising were about the Recognition/Recall. Most designers nowadays try to use elements that users are accustomed to and really keep the user away from having to recall information or to learn new things completely. But I want to start a discussion with you on this.</p><p>One can argue that always designing for Recognition can kill innovation. Think about it - what if we&apos;re too afraid to come up with new interaction designs and miss out on opportunities to introduce new designs in the industry. <a href="https://www.lri.fr/~mbl/eintroduction.html">Michel Beaudouin-Lafon</a>, one of my professors at Paris Saclay, mentioned that it takes usually around 20 years for an interaction type to move from the lab to the industry. But now I&apos;m thinking, what if designers in the industry will stop taking current interaction designs for granted and become more creative? Do you think this will create chaos in the world of design or everybody will benefit from this? I would love to hear your opinion, so feel free to <a href="https://twitter.com/razvanilin">send a tweet my way and let&apos;s discuss</a>!</p><p>Catch you next week with another article in the Design Stories series. If you haven&apos;t done so, <a href="https://mailchi.mp/de7711b6d616/razvanilin">subscribe to the newsletter to know exactly when I post a new story.</a></p><p>-Raz - <a href="https://twitter.com/razvanilin">@razvanilin</a></p><hr><p>This article was based on a lecture by Patric Dahlqvist from KTH University and David Benyon&apos;s <a href="https://www.amazon.com/Designing-Interactive-Systems-Comprehensive-Interaction/dp/1447920112?SubscriptionId=AKIAILSHYYTFIVPWUY6Q&amp;tag=duckduckgo-d-20&amp;linkCode=xm2&amp;camp=2025&amp;creative=165953&amp;creativeASIN=1447920112">Designing Interactive Systems</a> book (ch. 21 and 23).</p><p>Cover Photo by <a href="https://unsplash.com/@vm32?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Valentino Mazzariello</a> on <a href="https://unsplash.com/s/photos/bookcase?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></p>]]></content:encoded></item><item><title><![CDATA[Human perception and how it influences design - Design Stories 1]]></title><description><![CDATA[In this article, we're going to take a dive into learning about different human capabilities when it comes to the perception and how it influences the designs we are creating]]></description><link>https://razvanilin.com/human-perception-and-memory-design-stories-1/</link><guid isPermaLink="false">635ba9afad083dbcad3e90ac</guid><category><![CDATA[design]]></category><category><![CDATA[design stories]]></category><dc:creator><![CDATA[Razvan Ilin]]></dc:creator><pubDate>Fri, 31 Jan 2020 06:44:00 GMT</pubDate><media:content url="https://razvanilin.com/content/images/2020/02/daniil-kuzelev-QRawWgV6gmo-unsplash.jpg" medium="image"/><content:encoded><![CDATA[<blockquote>Prepare your coffee or tea and let&apos;s get ready to go through the first design story, part of the <a href="https://razvanilin.com/design-stories-series-part-0/"><em>Design Stories</em> series</a>.</blockquote><img src="https://razvanilin.com/content/images/2020/02/daniil-kuzelev-QRawWgV6gmo-unsplash.jpg" alt="Human perception and how it influences design - Design Stories 1"><p>In this article, we&apos;re going to take a dive into learning about different human capabilities when it comes to the perception and how it influences the designs we are creating. This article is based on a lecture I had in the beginning of my course in HCI. It will be more theoretical than I planned, but I think it will be useful to get to know different theories, build up on that and then get to play around with some examples. It&apos;s funny how when I started studying these I was getting tired of all the theories and now I see the importance of all of them when thinking about design. And this is the point of this series - going back through all the material and extract the most interesting and important bits that I can then build upon and apply later in my projects.</p><h2 id="perception">Perception</h2><p>Even though we as humans can do amazing things with our bare hands, we got where we are today based on our ability to create tools to help us in the day to day life. You will hear this a lot in HCI, but one of the most sophisticated tools we are referring to in this domain is, of course, the computer. Even though there are advancements in different AI algorithms to make computers smarter, at the end of the day the computer is still meant to be used to help humans accomplish goals faster. What I&apos;m trying to get to here is that we have capabilities such as our perception of the world that influences how we create these tools. Knowing more about how we perceive the world means that we can design better tools.</p><p>Our perception capability is based on how we gather information from the world. This is done through our senses like vision, hearing, smell, touch and taste.</p><p>We are actually processing a lot of data every second:</p><ul><li>With our eyes, 10 million bps</li><li>With our skin, 1 million bps </li><li>With our ears, 100 000 bps</li><li>With our nose, 100 000 bps</li><li>With our tongue, 1000 bps</li></ul><p>So in total, <strong>our brain&apos;s bandwidth is of about 11 million bits/second</strong>. Naturally, perception becomes of great importance to HCI and related fields like Human Factors because then the design can take into consideration how humans communicate with the world around them. Since we&apos;re concentrating on HCI, we&apos;re going to look more into how humans communicate with computers, in particular, and how the design is influenced by this. The main sense we&apos;re going to look at is the <strong>vision</strong>.</p><h2 id="vision">Vision</h2><p>When it comes to vision, we as humans are super good at recognising patterns. Take the image below as an example where you can easily recognise all the letters in the image below as the letter &quot;A&quot; even though the letters vary in size and shapes. The fcat taht yuo cna raed tish aslo prooevs taht hmuans aer cool. </p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://razvanilin.com/content/images/2020/01/image-1.png" class="kg-image" alt="Human perception and how it influences design - Design Stories 1" loading="lazy"><figcaption>from <a href="https://www.s-cool.co.uk/">https://www.s-cool.co.uk/</a></figcaption></figure><p>This superpower can also play tricks on us with things in the form of what we call optical illusions. Take the image below as an example. What do you see?</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://razvanilin.com/content/images/2020/01/image-2.png" class="kg-image" alt="Human perception and how it influences design - Design Stories 1" loading="lazy"><figcaption>from <a href="http://illusions.org">http://illusions.org</a></figcaption></figure><p>These are all interesting observations because it hints that we can see things better if we group them. If we can&apos;t see patterns, it will be hard to understand and navigate the world around us and will create confusion in multiple scenarios. All these observations were the basis of a psychology school that was founded at the beginning of the 20th century called Gestalt Psychology.</p><h2 id="gestalt-psychology">Gestalt Psychology</h2><p><a href="https://en.wikipedia.org/wiki/Max_Wertheimer">Max Wertheimer</a>, <a href="https://en.wikipedia.org/wiki/Kurt_Koffka">Kurt Koffka</a>, and <a href="https://en.wikipedia.org/wiki/Wolfgang_K%C3%B6hler">Wolfgang K&#xF6;hler</a> founded the Gestalt Psychology school which studied human perception and created a theoretical framework and methodology around it. The theory is based on the following principles:</p><ul><li>The whole is more than the sum of the parts</li><li>The isomorphism principle or the similarity of structures</li><li>The organisational principle</li></ul><p>From my experience in HCI, the last principle is the most important one when it comes to design. This principle is split into <strong>proximity, similarity, continuity, closure and good form.</strong> You might find these under different names depending on what site you stumble upon, but don&apos;t worry too much about it as the meaning is the same. So let&apos;s see what these mean:</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://razvanilin.com/content/images/2020/02/image.png" class="kg-image" alt="Human perception and how it influences design - Design Stories 1" loading="lazy"><figcaption>Gestalt organisational principles</figcaption></figure><h3 id="proximity">Proximity</h3><p>Because we&apos;re so used to seeing patterns we tend to group items together based on the distance between them. If you look in the image above, you can notice right away 4 pairs of lines instead of 8 lines. To better illustrate this, let&apos;s think of a website UI where you group cards to better convey information. In the example below, you can see pricing plans grouped together in a row and then underneath there&apos;s more information about member pricing. The way you would read this is influenced by the position of the cards. You will most likely explore the different plans and only then look at the details. On top of this, both sections are close to each other because they both refer to pricing. The rest of the elements on the page are further apart to differentiate themselves from the pricing section.</p><figure class="kg-card kg-image-card"><img src="https://razvanilin.com/content/images/2020/02/image-1.png" class="kg-image" alt="Human perception and how it influences design - Design Stories 1" loading="lazy"></figure><h3 id="similarity">Similarity</h3><p>We also tend to group items together by how similar they are with each other. This works in the example above as well. The 3 pricing plans cards all look similar and our brain instantly sees them as a group. The members&apos; section is clearly referring to something other than pricing plans because it looks different. The picture above combines Proximity and Similarity to better convey the information. You might say that this is straightforward and that you do that without thinking about these terms and I 100% believe you. Don&apos;t forget that these principles were developed in the first part of the 20th century and website design evolved just &quot;recently&quot;. Now all good practices are based on these theories even though most designers don&apos;t know about these principles.</p><h3 id="continuity">Continuity</h3><p>The best example other than the picture above is a song. When you hear a song you don&apos;t hear every single note, you hear the entire melody, the continuity of the notes. In the example above, you don&apos;t notice every dot at first, you firstly see two lines intersecting each other. In UI design this is mostly reflected through the proper alignment of items on the page.</p><h3 id="closure-and-good-form">Closure and good form</h3><p>This is mostly reflected in the way we perceive messages from shapes. In the principles picture above, we can clearly notice that the image shows two circles and that one of them is on top of the other. I actually had to think a bit how this can be used in website UI design as I couldn&apos;t remember the examples we went through in the class when we covered these principles. Luckily, <a href="https://medium.muz.li/gestalt-principles-in-ui-design-6b75a41e9965">I found this article by Eleana</a> very interesting to read for more details and examples of how Gestalt principles can be used in website UI design. The closure and good form principles can be reflected by using iconography to convey quick messages on web pages.</p><h2 id="conclusion">Conclusion</h2><p>Human perception studies were and still are paramount to how Human Factor-related design evolves. The UI design is made for human use and it makes complete sense to know how we perceive different things. We have pattern recognition superpowers and our design should reflect this. I find it very interesting now that I look at all the websites out there and most use Gestalt principles in their design. I don&apos;t think this is all due to the studies done in the first part of the 20th century though. I&apos;m a firm believer that even without knowing about these studies we inevitably let our design be guided by how we perceive the UI as we put everything together. Is that enough? Maybe not, I think having theoretical knowledge can help tremendously. And, of course, having the practice takes you on a whole different level.</p><p>The next article will explore human memory capabilities and how to design for the different situations. Stay tuned for next Friday and don&apos;t forget to <a href="https://mailchi.mp/de7711b6d616/razvanilin">subscribe to the newsletter</a> to get a notification when I post a new part in the <a href="https://razvanilin.com/32-design-stories-part-0/">Design Stories series</a>.</p><p>Until next time,</p><p>-Raz &#x270C;</p><p><a href="https://twitter.com/razvanilin">Follow me on Twitter if you want to get in touch - DMs are open &#x1F4EC;</a></p><hr><p>Cover Photo by <a href="https://unsplash.com/@kuzelevdaniil?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Daniil Ku&#x17E;elev</a> on <a href="https://unsplash.com/s/photos/vision?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></p>]]></content:encoded></item><item><title><![CDATA[Design Stories Series - Part 0]]></title><description><![CDATA[I'm getting to the end of my classes at University and I was thinking of writing ~16 design stories, every 2 weeks from now, based on the knowledge I acquired in 1.5+ years of studying Human-Computer Interaction (HCI).]]></description><link>https://razvanilin.com/design-stories-series-part-0/</link><guid isPermaLink="false">635ba9afad083dbcad3e90aa</guid><category><![CDATA[design]]></category><dc:creator><![CDATA[Razvan Ilin]]></dc:creator><pubDate>Fri, 24 Jan 2020 12:56:44 GMT</pubDate><media:content url="https://razvanilin.com/content/images/2020/01/the-ceo-kid-GLMW7nufuI8-unsplash.jpg" medium="image"/><content:encoded><![CDATA[<img src="https://razvanilin.com/content/images/2020/01/the-ceo-kid-GLMW7nufuI8-unsplash.jpg" alt="Design Stories Series - Part 0"><p>This blog post was on my mind these past few days and I&apos;m glad to finally pull my thoughts together and write this down. So I have a plan. I&apos;m getting to the end of my classes at University and I was thinking of writing design stories, bi-weekly from now on, based on the knowledge I acquired in 1.5+ years of studying Human-Computer Interaction (HCI). I will graduate from University sometime in September so I selected the first Friday of September to be the last day when I post as part of this series. </p><h2 id="the-goals-of-the-series">The goals of the series</h2><p>I thought that it&apos;s better to share what are my goals, for me and for anyone that wants to follow through as I go through the stories:</p><p>&#x1F4DA; I want to better <strong>understand</strong> and <strong>stick the information in my head. </strong>I feel that there is so much good information that can help me in the future projects, that I just can&apos;t dig in all my notes and material from University to find what I need. This blog format is much more convenient.</p><p>&#x270D; I want to <strong>get better at writing</strong>, both in terms of <strong>storytelling</strong> and <strong>consistency</strong>. In the past, I was never able to be consistent with blog posting. In fact, ~16 blog posts is a number way above what I wrote so far in the online medium. I feel that writing is one of the most important skills to have as it&apos;s so versatile and I can use it in everything I do in life.</p><p>&#x1F4EC; Even though I write these posts primarily for me, I would very much enjoy knowing that <strong>what I share here is useful</strong> for readers out there to help them build awesome stuff.</p><h2 id="what-is-the-content-what-is-hci">What is the content? What is HCI?</h2><p>&quot;Design&quot; is a very broad term, and in my circle of makers in the tech world, it will most likely mean UI/UX. Well, the content of this blog will be a bit different. It will touch UX, yes, but there will be no UI here. I&apos;m going to talk mostly about the process of designing an interface or a digital product from start to <em>finish</em>. These processes are inspired and/or created by the research activities in HCI.</p><p>HCI is quite a vast research domain that focuses on building interfaces and digital products for a well determined user profile and to make this technology simple and accessible for those particular users. So HCI draws from other domains like Psychology and Human Factors.</p><p>To give you a better idea, here are some of the themes that I&apos;m going to cover through the stories:</p><ul><li>Discussing <a href="https://principles.design/examples/don-norman-s-principles-of-design">Don Norman&apos;s principles of design</a> and how looking at doors won&apos;t be the same ever again &#x1F6AA;</li><li>How to power up your brainstorming game and different methods to do so</li><li>How to interview users to get workable data</li><li>Information gathering techniques through observation</li><li>Usability testing (when to use it and when to stay clear of it) and other evaluation methods</li><li>Lo-fi &amp; Hi-fi prototyping</li><li>Video prototyping</li><li>...and many more</li></ul><p>Every story will have examples to nail down all the theory. After getting some concepts out of the way, I will try to write part of the series as a &quot;blog bootcamp&quot; where we start from an idea, then gather information, brainstorm, create scenarios, personas, sketches, lo-fi prototype, video prototype, evaluation, etc. A lot of stuff, but the beauty of it is that you can use whatever you feel it&apos;s necessary to design your product. The point of this activity is to make sure that creativity is not killed too early (which happens often and easily, without knowing). But we&apos;ll get to that in due time.</p><h2 id="who-i-am-and-why-hci">Who I am and why HCI</h2><p>Now that we got the more important stuff out of the way I can present myself, right? &#x1F601;</p><p>I&apos;m Raz, diagnosed as a geek when it comes to technology, mainly software. I have a background in Computer Science and I started studying it all the way back in high-school. I finished a 4.5 years Software Engineering degree at <a href="https://www.napier.ac.uk/">Napier University</a> in Edinburgh and then decided to pursue HCI and Entrepreneurship in a 2-year Master course. I started this Master course at <a href="https://www.kth.se/en">KTH</a> in Stockholm and then moved to <a href="https://www.universite-paris-saclay.fr/en">Paris Saclay</a> for the second year. I was contemplating between Data Science and HCI but went with something more different than my previous studies in the end.</p><p>It&apos;s not obvious straight away, but all this time I studied HCI affected (in a positive way) how I think about digital products or any products for that matter. A good example is <a href="https://chartbrew.com">Chartbrew</a>, a side-project that I started working on before beginning the Master degree. When I resumed working on it a few months ago I had so many ideas and I could see so many flaws in the way I was interacting with it. I think it&apos;s always hard to see the benefits of learning something as you are doing it, especially something very deep as HCI. I lost count of how many times I complained about having to do certain projects during the course, but it&apos;s all coming together now.</p><p>And with this series, I plan to reflect on everything I learned so far and apply the knowledge once more by writing about it and going through examples.</p><h2 id="writing-style">Writing style</h2><p>Even though the topic brings concepts from research labs, the blog posts won&apos;t be written as though they will be published in a journal. I will concentrate more on my reflections and providing examples than doing a literature review. Of course, I will explain the concepts, provide further reading and give credit when it&apos;s due, but the writing style will be more personal and less scientific. I do this for two reasons: <strong>I think it&apos;s easier to understand in this way </strong>and <strong>I hate scientific writing, </strong>at least I can take a break from that on my own blog. Feedback help as well and I can adjust my style based on it.</p><hr><p>I hope you will join this journey and most importantly, I hope this knowledge will prove useful to you. I&apos;m obviously not expecting anything of my readers. All the material here will be 100% free, open to critique and discussion. I guess one thing I can ask for is that if you join me on this journey you have to keep me accountable to post every week &#x270D;</p><p>See you all next week with the first story in the series!</p><p>-Raz </p><p>&#x1F4E7; <a href="https://mailchi.mp/de7711b6d616/razvanilin">Feel free to subscribe to my email list so I can let you all know when I post a new story</a></p><p>&#x1F424; <a href="https://twitter.com/razvanilin">I&apos;m also posting more stuff on Twitter these days</a></p><p>&#x1F4F7; Cover photo by <a href="https://unsplash.com/@theceokid?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">The CEO Kid</a> on <a href="https://unsplash.com/s/photos/planning?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></p><blockquote><strong>EDIT: </strong>The original goal was to write every week but this took too much of my time and concentration from my personal projects, so I changed it to bi-weekly instead. This will still allow me to cover a lot of ground.</blockquote>]]></content:encoded></item><item><title><![CDATA[The Chartbrew journey 👟]]></title><description><![CDATA[It's due time I start typing away about Chartbrew, a side project that I worked the longest so far. It all started in the summer of 2018...]]></description><link>https://razvanilin.com/the-chartbrew-journey/</link><guid isPermaLink="false">635ba9afad083dbcad3e90a9</guid><category><![CDATA[open source]]></category><category><![CDATA[side projects]]></category><dc:creator><![CDATA[Razvan Ilin]]></dc:creator><pubDate>Thu, 12 Dec 2019 11:27:38 GMT</pubDate><media:content url="https://razvanilin.com/content/images/2019/12/Annotation-2019-12-12-114901-1.png" medium="image"/><content:encoded><![CDATA[<img src="https://razvanilin.com/content/images/2019/12/Annotation-2019-12-12-114901-1.png" alt="The Chartbrew journey &#x1F45F;"><p>It&apos;s due time I start typing away about <a href="https://chartbrew.com">Chartbrew</a>, a side project that I worked the longest so far. It all started in the summer of 2018 when <a href="https://www.linkedin.com/in/kate-belakova/">Kate</a> and I were wondering what to work on through the three hot months. We bounced ideas off each other and then settled on the idea of creating a simple tool for data visualisation. This tool would have to be able to connect to different data sources so that no extra coding was needed.</p><p>The important part here is that we didn&apos;t need super complex visualisation tools like the ones already available in the market - we just wanted something to help us visualise data from our small side-projects and share them with the world. The final idea was to put the design in the spotlight and leave the functionalities on the 2nd plan. </p><p>And because it&apos;s hard to work on a nameless project, we had to come up with a name for it. After a few back and forth&apos;s we settled on <strong><a href="https://chartbrew.com">Chartbrew</a></strong>. It had a nice ring to it and we both instantly liked it. Next, because we both have technical backgrounds, we started working on setting up the project and coding different aspects of it.</p><p>It&apos;s worth mentioning that we wanted to make a business out of this new project, but we took the wrong approach of completely ignoring the validation process. When summer was drawing to an end, we started thinking more and more of how to approach people to see if anyone will be willing to pay for it, but the whole process was alien to both of us.</p><p>September was approaching and we were both due to return to studies - a two years Master course. During the first couple of months after we started our course, we began showing the project to online communities and we were getting a lot of positive feedback but nothing worth for validating the business idea. In other words, nobody was hinting that they were willing to pay for the platform. At this stage, we thought the clean design was just attracting eyes and it was easy to receive positive feedback on something that was pleasantly looking.</p><p><strong>About this time we received our first $9 for a monthly subscription</strong> on the basic paid plan. Unfortunately, this user churned out right after and we couldn&apos;t get in touch with the person to find out more about their intentions with our product. </p><figure class="kg-card kg-image-card kg-width-wide kg-card-hascaption"><img src="https://razvanilin.com/content/images/2019/12/flat_browser.jpg" class="kg-image" alt="The Chartbrew journey &#x1F45F;" loading="lazy"><figcaption>One of the first iterations of the dashboard</figcaption></figure><h2 id="the-slumber">The slumber</h2><p>It was time to switch the strategies a little. Since we both studied at KTH in Stockholm, we decided to get involved in the entrepreneurship scene over there. We managed to get into several programs meant to help out people that wanted to start businesses. In about the same period we started contacting small companies in Stockholm to try and get a call or a meeting with them to show them Chartbrew. This didn&apos;t work that well. We managed to have a meeting with a company but our product was not aligning with how they wished to work with a data visualisation tool. <em>We realised we didn&apos;t know who our customer was and this was pretty late int the business and product development cycle</em>.</p><p>Our initial goal with Chartbrew was to concentrate on making this into a working business, but it seemed we avoided most of the processes that involved developing the business and concentrated mostly on the product with our tunnelled vision.</p><p><strong>A very important lesson here is that it&apos;s important to align your goals with what you&apos;re willing to do to reach the goals</strong>. It&apos;s a bit of a backwards approach. If what you do doesn&apos;t take you to the goal you had in mind, you start enjoying what you&apos;re doing less and less. This culminated with a burnout period where we stopped working on Chartbrew almost entirely. </p><figure class="kg-card kg-image-card kg-width-wide kg-card-hascaption"><img src="https://razvanilin.com/content/images/2019/12/image-2.png" class="kg-image" alt="The Chartbrew journey &#x1F45F;" loading="lazy"><figcaption>Big direction changes happening</figcaption></figure><h2 id="it-was-time-to-switch-gears">It was time to switch gears</h2><p>Time has come to learn from past mistakes. Last time, the goals and actions were not aligned, so a shift was waiting to happen. Since we invested quite a bit of time in getting Chartbrew to this stage we couldn&apos;t just leave it like that. Moreover, we received a lot of good feedback before so there was definitely something there.</p><p>After the first master year in Stockholm, the degree continued in Paris. This is the time when thoughts about restarting work on Chartbrew started to crawl inside our heads. This time it had to be different. And we thought that since we don&apos;t have a clear idea on who our target customer is, let&apos;s open our codebase to other people and see what everyone thinks and how they would like to use a project like this.</p><p>As I mentioned in <a href="https://www.indiehackers.com/post/open-sourced-my-project-and-added-two-showcase-videos-any-feedback-eaec9938de?commentId=-LvbMBAPaDgib27eZKca">an Indiehackers discussion</a>, these are roughly the reasons why we made Chartbrew open-source:</p><ul><li>Some companies don&apos;t want to part with their data in any way, so they can run the whole project on their servers</li><li>Companies that run the project on their servers might contribute to the codebase or would require our services</li><li>Extra visibility in the developers&apos; world</li><li>Give back to the open-source community</li></ul><p>The Road to open-source wasn&apos;t like a snap of the fingers, though. The codebase needed some maintenance. The SaaS elements were also coupled with the rest of the application and these needed to be removed. After 2-3 weeks of working on it (part-time) everything was completed:</p><ul><li>SaaS elements decoupled</li><li>Homepage replaced</li><li>Full-blown documentation is written</li><li>Slack community created</li><li>New repository for the open-source project</li><li>New guidelines for making open releases on GitHub</li><li>Code of conduct for the community around Chartbrew</li><li>Contribution guidelines</li><li>Public roadmap</li><li>Modified the <a href="https://chartbrew.com">chartbrew.com</a> homepage to reflect all these changes</li></ul><p><strong>So as you can see, is not that easy to roll out an open-source project.</strong></p><!--kg-card-begin: html--><div style="text-align:center"><iframe src="https://ghbtns.com/github-btn.html?user=chartbrew&amp;repo=chartbrew&amp;type=star&amp;count=true&amp;size=large" frameborder="0" scrolling="0" width="160px" height="30px"></iframe></div><!--kg-card-end: html--><!--kg-card-begin: html--><div style="text-align:center;"><small>Show your love and star our project &#x1F497;</small></div><!--kg-card-end: html--><p></p><figure class="kg-card kg-image-card kg-width-wide kg-card-hascaption"><img src="https://razvanilin.com/content/images/2019/12/image-1.png" class="kg-image" alt="The Chartbrew journey &#x1F45F;" loading="lazy"><figcaption>New releases being rolled all the time</figcaption></figure><p>The next step was to keep the current SaaS project working. The next piece of work was to make sure the two repositories were synced properly. This was done without too much hassle and now it works like a charm; release updates on the open-source repository &gt; merge changes in the SaaS repository.</p><p>Moving to open-source and also keeping the cloud version running puts us in a better position to tailor our services with potential customers and at the same time build something for the whole community of open-source software to use. And now to refer to a point I made above:</p><blockquote>The goal is not to create a successful business, <strong>the goal now is to create something that people want to use!</strong></blockquote><p>I think this is an important lesson. You can have goals, any goals, but as long as you&apos;re not willing to direct your actions towards achieving that, it makes no sense to pursue it and you should analyse how you can turn it around. If the goals are aligned with what you&apos;re willing to do to achieve those goals, then you&apos;re in the right spot!</p><p>And that&apos;s what I think about the current state of affairs with Chartbrew. I actually enjoy working on it and telling people about the project.<a href="https://www.twitch.tv/razvanilin"> I started streaming the development over on Twitch</a> and I&apos;m super thrilled that most of the people that drop by are amazed by the project and happy to know it&apos;s an open-source codebase that the could contribute to.</p><p>Chartbrew will represent a big shift in how we think about specialised software like in this case, a data visualisation tool. All this design knowledge from <a href="https://www.interaction-design.org/literature/topics/human-computer-interaction">HCI </a>and interaction design research will contribute a lot to the direction where Chartbrew is going and we hope you&apos;ll join us and witness it. &#x1F44B;</p><p>This is just the beginning of the story of <a href="https://chartbrew.com">Chartbrew</a>. If you want me to keep you posted with the latest learnings, designs and frustrations of building this product, <a href="https://mailchi.mp/de7711b6d616/razvanilin">subscribe</a> below and/or give me a follow using the links below.</p><p>&#x1F425; I tweet here: <a href="https://twitter.com/razvanilin">@razvanilin</a></p><p>&#x1F4F9; I stream here: <a href="https://www.twitch.tv/razvanilin">RAZvanilin</a></p><p>&#x1F4AC; <a href="https://discord.gg/KwGEbFk">Join our Discord</a></p><p>&#x1F3E1; <a href="https://join.slack.com/t/chartbrew/shared_invite/enQtODU3MzYzNTkwOTMwLTZiOTA5YzczODUzZGFiZmQyMGI1ZGVmZGI4YTVmOTBkMTI0YzQ2ZjJjOGI5NzQ0NmNmYzRmMDk3MmY4YmI4MTI">Join our Chartbrew Slack</a></p><!--kg-card-begin: html--><!-- Begin Mailchimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
	#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; width:100%;}
	/* Add your own Mailchimp form style overrides in your site stylesheet or in this style block.
	   We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="https://razvanilin.us8.list-manage.com/subscribe/post?u=40d7e47179bec7fefe203400c&amp;id=6756103f7f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">
	<label for="mce-EMAIL">Get notified when I write something new</label>
	<input type="email" value name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
    <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_40d7e47179bec7fefe203400c_6756103f7f" tabindex="-1" value></div>
    <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
    </div>
</form>
</div>

<!--End mc_embed_signup--><!--kg-card-end: html-->]]></content:encoded></item><item><title><![CDATA[Hummi.nz  - Month one report]]></title><description><![CDATA[This whole journey of me launching an app started with a one week challenge to develop and release an app in a week. The app is called Hummi.nz, where people can hum songs for others to guess. ]]></description><link>https://razvanilin.com/humminz-month-one-report/</link><guid isPermaLink="false">635ba9afad083dbcad3e90a4</guid><category><![CDATA[side projects]]></category><dc:creator><![CDATA[Razvan Ilin]]></dc:creator><pubDate>Wed, 25 Apr 2018 20:02:00 GMT</pubDate><media:content url="https://razvanilin.com/content/images/2019/09/0_RavWeEVnW7WST2-s.jpg" medium="image"/><content:encoded><![CDATA[<img src="https://razvanilin.com/content/images/2019/09/0_RavWeEVnW7WST2-s.jpg" alt="Hummi.nz&#x200A; - Month one report"><p>This whole journey of me launching an app started with a <a href="https://razvanilin.com/challenged-myself-to-build-and-launch-an-app-in-a-week/">one week challenge to develop and release an app in a week</a>. The app is called <a href="http://hummi.nz" rel="noopener">Hummi.nz</a>, where people can hum songs for others to guess. A very simple concept, but it proved to be an entertaining idea for many people.</p><h3 id="highlights">Highlights</h3><p>&#x1F680; <a href="https://news.ycombinator.com/item?id=16692899" rel="noopener">Launched on Hacker News</a> and reached #9 in the main section and #1 in the show section</p><p>&#x1F680; <a href="https://www.producthunt.com/posts/hummi-nz" rel="noopener">Launched on Product Hunt</a>, received 80 upvotes and was featured on the main page for most of the day</p><p>&#x1F465; 502 user accounts</p><p>&#x1F53B; 705 app downloads</p><p>&#x2B50; 17 reviews with a total of 3.9 &#x2B50;</p><p>&#x1F34F; 30 people interested in the iOS version (will try to have a June release for iOS)</p><p>&#x1F4C8; Over 100 users using the app every day</p><p>&#x1F3A4; 499 songs hummed</p><p>&#x1F468;&#x200D;&#x1F4BB; 10 updates</p><h3 id="getting-the-app-noticed-with-the-website">Getting the app noticed with the website</h3><p>To create the initial traction, I created a website to showcase the app and add buttons for downloading for subscribing to news. The website address is exactly like the app name, <a href="http://hummi.nz" rel="noopener">Hummi.nz</a>. I wanted to keep this consistent across web and native OS. I&#x2019;m not sure if this will help me SEO-wise, but it was worth a shot and I liked the name. I posted this on a couple of subreddits and on Hacker News, generating a spike in app downloads and website traffic as seen below:</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://cdn-images-1.medium.com/max/1000/0*A11vQErEeIrO9inb.png" class="kg-image" alt="Hummi.nz&#x200A; - Month one report" loading="lazy"><figcaption>Google analytics chart</figcaption></figure><p>The first spike was caused by getting to the top of the show section and 9th on the main page in Hacker News. The second spike, there in the middle, was the launch on Product Hunt. Not as successful as HN, but quite good nonetheless. The total number of unique user sessions on the website this month was <strong>1501.</strong></p><h3 id="play-store-metrics">Play Store metrics</h3><p>In the beginning, the same story as with the website. I&#x2019;ve seen spikes in downloads at the same times as above, coinciding with the HN and PH launches. The successful launch on HN resulted in about <strong>140 </strong>new installs in the space of two days.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://cdn-images-1.medium.com/max/1000/0*5tcQJrFbt79ciiz5.png" class="kg-image" alt="Hummi.nz&#x200A; - Month one report" loading="lazy"><figcaption>Play Store app downloads</figcaption></figure><p>Interesting to note that in-between the Hacker News post and the next spike at the end of the graph, I actually did post the app on multiple subreddits, xda forums and Facebook groups, but nothing seemed to help me get more downloads. It was sitting on a stable 2&#x2013;3 downloads/day, but then I read more about App Store Optimisation (ASO) and how it&#x2019;s a very good practice to identify keywords that can get your app in front of potential users organically on the store.</p><h3 id="play-store-aso">Play Store ASO</h3><p>The best decision was to document myself more on the ASO best practices. I identified keywords that work best with <a href="http://hummi.nz" rel="noopener">Hummi.nz</a> like <strong>humming, song, sing, social, community, guessing</strong> and so on. One nice way to identify these keywords is to also research what keywords other apps that you want to associate yours with are using. So, for example, I inspired myself while re-writing the description from apps like Smule, Shazam, SoundHound, etc. The results? You can see those on the chart above or you can have a look at the spike in daily, weekly and monthly users below.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://cdn-images-1.medium.com/max/1000/0*kjRF9XUYyfcecyFt.png" class="kg-image" alt="Hummi.nz&#x200A; - Month one report" loading="lazy"><figcaption>Firebase chart for monitoring user&#xA0;count</figcaption></figure><h3 id="challenges">Challenges</h3><p>The main two challenges:</p><ul><li>Developing <a href="http://hummi.nz" rel="noopener">Hummi.nz</a> and launching it in the space of a week</li><li>Maintaining focus while for the most of the month I was getting only ~3 downloads/day</li></ul><p>The first challenge <a href="https://razvanilin.com/challenged-myself-to-build-and-launch-an-app-in-a-week/">was described more in-depth in my previous post</a> and it gave me a boost in confidence to finally release something and not abandoning it like most of my side hustles.</p><p>The second challenge was a bit more painful. The curious thing is that I wasn&#x2019;t actually planning on continuing with the development of the app, but since it was received so well on Hacker News, it gave me hope that the app could turn into something bigger than I imagined. It was a slow disappointment afterwards as the downloads were going down dramatically even though I was releasing nice new features that some people requested.</p><h3 id="next-month-s-plans-and-goals">Next month&#x2019;s plans and goals</h3><ul><li>Introduce filtering on song genres</li><li>Introduce a support program where users could support me to develop the app and can feedback on features they would like to see in the app</li><li>Optimise my database queries and API</li><li>Introduce user profiles</li><li>Add an achievement system</li><li>Reach 5000+ downloads</li><li>Maintain a review score of 4+ &#x2B50;</li></ul><p>Feel like humming some songs? <a href="https://play.google.com/store/apps/details?id=com.depomo.humminz&amp;referrer=utm_source%3Dpersonalblog" rel="noopener">Get hummi.nz from the Play Store</a> &#x270C;</p><p>I post updates regularly on my Twitter so make sure you give <a href="http://twitter.com/razvanilin" rel="noopener">@razvanilin</a> a follow if you&#x2019;re interested in keeping up-to-date with news about <a href="http://hummi.nz" rel="noopener">Hummi.nz</a> and other techy stuff.</p>]]></content:encoded></item><item><title><![CDATA[Woke up in the morning to find that my app reached top #10 on Hacker News]]></title><description><![CDATA[It was close to 10pm in Edinburgh, UK, I was resting in my bed typing away on my laptop. Just a few days before I launched my first app called Hummi.nz that I developed for myself as part of a personal challenge.]]></description><link>https://razvanilin.com/woke-up-in-the-morning-to-find-that-my-app-reached-top-10-in-hacker-news/</link><guid isPermaLink="false">635ba9afad083dbcad3e90a3</guid><category><![CDATA[side projects]]></category><dc:creator><![CDATA[Razvan Ilin]]></dc:creator><pubDate>Fri, 30 Mar 2018 20:01:00 GMT</pubDate><media:content url="https://razvanilin.com/content/images/2019/09/1__-MI9egCfGctsJLrwKkTgA.jpeg" medium="image"/><content:encoded><![CDATA[<img src="https://razvanilin.com/content/images/2019/09/1__-MI9egCfGctsJLrwKkTgA.jpeg" alt="Woke up in the morning to find that my app reached top #10 on Hacker News"><p>It was close to 10pm in Edinburgh, UK, I was resting in my bed typing away on my laptop. Just a few days before <a href="https://razvanilin.com/challenged-myself-to-build-and-launch-an-app-in-a-week/">I launched my first app</a> called <a href="https://hummi.nz" rel="noopener">Hummi.nz</a> that I developed for myself as part of a personal challenge. I knew about the <strong>show</strong> section in <a href="https://news.ycombinator.com/show" rel="noopener"><strong>Hacker News</strong></a><strong>(HN) </strong>and I though I will give it a shot and I posted a link to the Play Store page there. The app is about humming songs and I though maybe people will laugh at it or something along those lines, but I gave it a shot anyway. About half an hour later I received a couple of positive comments which was more than I expected. So I went to sleep with a smile on my face.</p><h3 id="morning">Morning</h3><p>The alarm started ringing, time to wake up. I picked up the phone to stop the alarm, I look on the screen and I see over a dozen notifications from my app. Wow, people are actually using it. I went in my app to check the leader-board (a quick way to see the number of users) and there were over 40 users. Prior to that I had about 10. I jumped out of bed, went to my desk and I went quickly to <a href="https://news.ycombinator.com/item?id=16692899" rel="noopener">my article on HN</a>.</p><figure class="kg-card kg-image-card kg-width-wide kg-card-hascaption"><img src="https://cdn-images-1.medium.com/max/1500/1*_pmCslvu3IBKor8kMtoXIg.png" class="kg-image" alt="Woke up in the morning to find that my app reached top #10 on Hacker News" loading="lazy"><figcaption>I actually reached #9 during the day but I forgot to screenshot it&#xA0;&#x1F622;</figcaption></figure><p>I was #10 in the list and I had lots of great comments and suggestions. Wait, oh no, some people complaining that they can&#x2019;t log in. This can&#x2019;t be&#x2026;</p><h3 id="technical-issues">Technical issues</h3><p>Of course nothing can go well especially when your API, database and mobile app were developed and designed in a week. Fired up my terminal, accessed my server, listed all my Node services running there and, weird, everything was up and running. Checked the logs, database failures, unique constraints errors on the username field. Basically and technically:</p><ul><li>The app was creating users without a username field</li><li>The username field was being populated on the next on-boarding screen in the app (very clever design, indeed)</li><li>Someone left the app without selecting a username</li><li>His username field was null</li><li>All the other users trying to register couldn&#x2019;t because it was restricted to have another user with a null username</li><li>Seriously, Raz?!</li></ul><p>So that was a disappointment. It happened while the app was getting a lot of attention from the HN community so I probably let down quite a few people. Problem patched, now time to check stats. Obviously, the site views went up quite a bit, but what got me excited the most, was refreshing the leader-board screen on my app and see how the number of users was going up, 45, 50, 60.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://cdn-images-1.medium.com/max/1000/1*vd4uJmAgNl4ms8S5BmCLHw.png" class="kg-image" alt="Woke up in the morning to find that my app reached top #10 on Hacker News" loading="lazy"><figcaption>Almost 100 by the end of the day&#xA0;&#x1F389;</figcaption></figure><h3 id="the-unexpected">The Unexpected</h3><p>I didn&#x2019;t expect my post will get so much attention, and really, I was thinking that I might maybe get about 4&#x2013;5 comments so I get to know a bit more about what people would like to have in a humming app like this.</p><p>Going back to the roots of the project, H<a href="https://hummi.nz" rel="noopener">ummi.nz</a> was developed and launched in a week, there was almost no time for market validation, getting feedback from potential users and any other processes that could&#x2019;ve helped me release a polished app with the perfect features. I basically developed and designed the app as it was pictured in my mind and released it into the wild. Then I visited the Play Store dashboard&#x2026;</p><p>Two 1 star ratings. This brought my app&#x2019;s rating at 3.something stars. After a bit of time I was slammed again with a 1 star rating, but luckily I was also getting 5-star ones to keep the rating above 3. One of the low ratings was from a user that couldn&#x2019;t log in because of my server problem. Fair enough, I fully deserved that. But what was most interesting was that I got two 1-star ratings because I would allow users to use the app only after they log in. People didn&#x2019;t like this and some of the discussion on HN was related to this as well.</p><p>I replied to the users on Play Store letting them know that I&#x2019;m going to modify Hummi.nz to not require a login for access. I took this idea to the board and reached the conclusion that it is indeed a good point and I&#x2019;m grateful to have received the feedback.</p><ul><li>Users can get into the app more easily just by entering a username</li><li>They get the option to make an account so they safely use the app on other devices</li><li>The whole on-boarding process becomes much easier</li></ul><h3 id="going-forward">Going forward</h3><p>This is all very exciting for me. I worked on multiple projects that had many users before, but it was never one of my own projects. I guess now I&#x2019;m going to work more than I expected on <a href="https://hummi.nz" rel="noopener">Hummi.nz</a> because of all the great feedback I received so far. The new on-boarding experience is already released and I have many other great features on the list.</p><p>I&#x2019;m going to end this post here, but I will come back with more from my journey with Hummi.nz and any other side-projects I&#x2019;m working on at the moment. Catch you all next time!</p><p><strong>I try to post about my progress more often on my Twitter. You can give me a follow at </strong><a href="https://twitter.com/razvanilin" rel="nofollow noopener noopener"><strong>https://twitter.com/razvanilin</strong></a></p>]]></content:encoded></item><item><title><![CDATA[Challenged myself to build and launch an app in a week]]></title><description><![CDATA[One app, one week, no procrastination, no perfectionism, just launch something and see how it goes. Don’t go into the developer mindset of regurgitating features that maybe people will not even want. Just the essential, and get to work, fast.]]></description><link>https://razvanilin.com/challenged-myself-to-build-and-launch-an-app-in-a-week/</link><guid isPermaLink="false">635ba9afad083dbcad3e90a2</guid><category><![CDATA[side projects]]></category><category><![CDATA[dev]]></category><dc:creator><![CDATA[Razvan Ilin]]></dc:creator><pubDate>Mon, 26 Mar 2018 15:01:00 GMT</pubDate><media:content url="https://razvanilin.com/content/images/2019/09/1_bevoBdC_6gVbc2przYUxzA.jpeg" medium="image"/><content:encoded><![CDATA[<img src="https://razvanilin.com/content/images/2019/09/1_bevoBdC_6gVbc2przYUxzA.jpeg" alt="Challenged myself to build and launch an app in a week"><p>One app, one week, no procrastination, no perfectionism, just launch something and see how it goes. Don&#x2019;t go into the developer mindset of regurgitating features that maybe people will not even want. Just the essential, and get to work, fast.</p><h2 id="short-background-story">Short background story</h2><p>I always loved the idea of making products and I even made a few, but looking back to them, I see a pattern. I never actually launched them. I am 100% sure that because I have a technical background, I get way too excited about the technology I&#x2019;m using to build an idea rather than about the idea itself.</p><p>So I need to train myself, my mind, to think business and use my time efficiently. Normally, before starting to develop a full-fledged application you would identify and consult with your target market, ask questions here and there to see if people want your product and eventually build a simple MVP to take the idea validation to the next step. For now, let&#x2019;s concentrate on that simple MVP part, the initial validation can be done with my next project. Baby steps, right?</p><figure class="kg-card kg-image-card"><img src="https://razvanilin.com/content/images/2019/09/1_BmrGk9_ETimEu0jd-i8KjQ.jpeg" class="kg-image" alt="Challenged myself to build and launch an app in a week" loading="lazy"></figure><h1 id="the-idea">The idea</h1><p>One evening I was walking home with my girlfriend and she started humming a song and we couldn&#x2019;t put a name on it. I thought of Shazam, but nah, the app couldn&#x2019;t detect the song if you hum it. So the idea instantly hit me. What if instead of using fancy technology to detect songs, I create an app where you can record yourself while humming the song and then other users will tell you what song it is. Well, it&#x2019;s a good idea as such, but how often will people forget songs like that? Not that often, so this won&#x2019;t be able to attract a big community of users. So then, I will just make it like a guessing game. You hum a song that you already know and see if other people will guess. They get points if they guess, there will also be a leader-board and people will compete with each other.</p><p>Done, found the idea.</p><h1 id="drawing-board">Drawing Board</h1><ul><li>Trello Board</li><li>Architecture design</li><li>Choosing technology stack</li><li>Minimal features and design &#x2014; strictly necessary</li><li>Name the app</li></ul><p>Hmm, I need to be efficient &#x2014; no drawings. I first started with a <a href="http://trello.com/" rel="noopener">trello</a> board and made a list of must-have features that were on the top of my head. I had to keep it simple because I told myself I only have a week to do it. Fellow devs out there will understand me here and will know that a usable app that actually does something will take more than a week to develop and launch.</p><p>I roughly sketched the user path and thought of services that I can use to make this happen. Architecture design, no problem, I do this every day. Even though I was tempted by dark thoughts of scalability, optimisation, military-grade security and other similar things, I didn&#x2019;t give in. Come on, Raz, concentrate, just a simple humming app.</p><p>I chose React Native as the main framework to write the application in. I used this on multiple projects in the past 3 years so it does make sense to go with what I&#x2019;m familiar with. It will also be easy to port it to iOS after I try it out with Android users. I will need easy portability for when the app goes viral, right? *wink*.</p><p>I will then develop a small service in NodeJs connected to a MongoDB database. The back-end service will take care of all the data transfers and authentication. I also needed a way to monetise this somehow because as a maker, it will be cool to get something out of it other than experience. The obvious and simple way was to serve ads and make the app free to use with an optional &#x201C;pay to get rid of the ads&#x201D; in-app purchase.</p><p>To come up with a name for the app, I accessed any possible online name generator out there and eventually, after combining multiple options from these sites, I came up with humminz. The <a href="https://hummi.nz/" rel="noopener">hummi.nz</a> domain was available as well, which was good.</p><figure class="kg-card kg-image-card kg-width-wide kg-card-hascaption"><img src="https://razvanilin.com/content/images/2019/09/1_FmOuWs7WCEMe5nNuEd4PHA.png" class="kg-image" alt="Challenged myself to build and launch an app in a week" loading="lazy"><figcaption>My brain dump on trello</figcaption></figure><h1 id="let-the-development-begin">Let the development begin</h1><ul><li>4 days of full development</li><li>Used React Native to develop the app</li><li>Invested quite a bit of time to integrate notifications</li></ul><p>So I have a bit of experience developing apps and services. This helped me set up everything quickly. React Native app, MongoDB with NodeJS API, and React app for the <a href="https://hummi.nz/" rel="noopener">hummi.nz</a> landing page. Boom, created a repository for each one of them, structured each project and started hacking around with the mobile app and API in parallel.</p><p>The good thing about React Native is that if you have the grips on it, you can hack something very fast. There is a module for everything out there in the open-source world. The problem comes when you haven&#x2019;t used it before. I would say React Native has a steep learning curve compared to other frameworks out there like <a href="https://ionicframework.com/" rel="noopener">Ionic</a>, <a href="https://cordova.apache.org/" rel="noopener">Apache Cordova</a> and <a href="https://www.xamarin.com/" rel="noopener">Xamarin</a>. But hey, this is my opinion so don&#x2019;t take it for granted. Part of why it might be difficult to get your head around React Native is the vast amount of articles about best practices out there that can eat your brain alive if you&#x2019;re not careful.</p><p>I think the hardest and most time-consuming part of the development was when I integrated the push notification system. I used Google&#x2019;s <a href="https://firebase.google.com/" rel="noopener">Firebase Cloud Messaging</a> for this with a cool react native module, <a href="https://github.com/evollu/react-native-fcm" rel="noopener">react-native-fcm</a>. It took about a day from my productive one week sprint. The way I designed hummi.nz is if a user records and send out a hum, all the other users will receive a notification. This needs a bit of control since you don&#x2019;t want to receive notifications non-stop. I wanted to control this somehow, so what I did was let my NodeJS service handle the push notifications. The users will be able to control the frequency they want to receive these.</p><figure class="kg-card kg-image-card kg-width-wide kg-card-hascaption"><img src="https://razvanilin.com/content/images/2019/09/1_7KJOUfT78joKtDfmu9cyiQ.png" class="kg-image" alt="Challenged myself to build and launch an app in a week" loading="lazy"><figcaption>Keeping a todo list while I was developing to maintain focus</figcaption></figure><h1 id="time-to-test-the-waters">Time to test the waters</h1><ul><li>Develop a simple landing page</li><li>Include an email signup to gather interest</li><li>Identify some places where to publish it</li></ul><p>After about 4 days of development, I started working on a landing page in React. It was something simple that took me about 2&#x2013;3 hours to put in place. The first iteration looked like the following:</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://razvanilin.com/content/images/2019/09/image.png" class="kg-image" alt="Challenged myself to build and launch an app in a week" loading="lazy"><figcaption><a href="https://twitter.com/razvanilin/status/976524867939000322">https://twitter.com/razvanilin/status/976524867939000322</a></figcaption></figure><p>People like to visualise things, so I placed a screenshot of the on-boarding screen and explained in a few words what the app was about. I also added a waiting list so people can enter their emails and get notified when I launch the app. I posted the link in a few places like reddit and <a href="https://www.indiehackers.com/" rel="noopener">indiehackers.com</a> and by the end of the day I had 8 signups. Eight is not a big number, but I was very happy with that. Even after I got the first signup I was in heaven. I also received valuable feedback and made me rethink some process I already developed. For example, I was planning to force the user to watch a promotional video if they wanted to record a hum in less than 10 minutes after the previous one. I received good advice that a &#x201C;feature&#x201D; like that will most likely break the user experience and will slow down community growth.</p><p>I highly recommend to anyone that is building something or thinking of doing so, to go out there and talk with people. It&#x2019;s incredible how useful this is because you don&#x2019;t build something just for yourself. You want other people to use this, so go and talk with them. It&#x2019;s not that easy, it takes time to find the right places where you can speak about it and it takes time to write about your idea. It is definitely more boring than writing code, but it is definitely one of the most important things you can do as a maker.</p><h1 id="wrapping-up-the-development">Wrapping up the development</h1><ul><li>Final development sprint</li><li>Hurdles with making the final build</li></ul><p>Now that I got some feedback about the app, I was ready to resume my favourite activity &#x2014; writing code. Oh, actually, this is where I stopped the progress for a couple of days because I had other places to be. Ok, then two days later I resumed the work on hummi.nz. I had another two days to code and get the app launched.</p><p>The development went smoothly until it came to the building part. I had to build the app for release and Google just released an update for Google Play Services (this is a package that is used by some of the React Native modules). I only released iOS apps before, so I was a beginner to these issues. Apparently, you can have just one version of Google Play Services in your project, so if a module requires version 11.8.0 and another one 12.0.0, then your build will fail. If you face the same issue, <a href="https://medium.com/@suchydan/how-to-solve-google-play-services-version-collision-in-gradle-dependencies-ef086ae5c75f" rel="noopener">this medium post</a> is the closest that got me to the solution. Although, I had to do some extra things, but this is not the point of the post I&#x2019;m making here.</p><p>I was already fatigued from all the constant coding and this was definitely not something I wanted to deal with. Eventually, after hours of googling and trying all the methods that miraculously worked for others but not for me, I managed to force all the react native modules to use the same version. *Rage levels went down*</p><p>Ok, almost there, I have the APK, finally I could touch (click) the product of my hard work! Time to test it on my phone, oh snap! Forgot to change the flags in my settings file to direct the connections from localhost to my server. Done, building&#x2026;installing&#x2026;successfully connects to my servers, oh snap! Forgot to change the Facebook credentials to my production app. Ok, you get the idea, there were a lot of these events until I eventually managed to build the final package, ready to be published on the Play Store.</p><figure class="kg-card kg-image-card"><img src="https://razvanilin.com/content/images/2019/09/1_gXQAqAUDE2WMedEaSRHYsw.png" class="kg-image" alt="Challenged myself to build and launch an app in a week" loading="lazy"></figure><h1 id="the-launch-">The Launch &#x1F680;</h1><ul><li>Release on the Play Store</li><li>Tell people about it</li><li>Long wait (not really)</li><li>Getting first users on board</li></ul><p>This part went smoothly without any problems, other than the fact that no people were getting the app for the first painful half a day with the app on the store.</p><p>I had to make the app look pro on the Play Store, so I made some mock-ups with screenshots from the app, wrote some things about the app with my limited writing skills, and there it was, something I built, out there, available for anyone to download and use. This was a great feeling, but it shortly got eclipsed by the dreadful wait for users to join. Even though I went back to those sites where I initially told people about the app and emailing people that showed interest, no one would join. I was even receiving good feedback and some enthusiastic &#x201C;yay! it&#x2019;s out&#x201D; replies, they were still not joining.</p><p>Hmm, maybe everybody has an iOS device nowadays? What can be wrong? You get the idea, I was a bit let down by this, but I guess it&#x2019;s normal when you were so positively developing something for a while.</p><p>Then something happened:</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://razvanilin.com/content/images/2019/09/image-1.png" class="kg-image" alt="Challenged myself to build and launch an app in a week" loading="lazy"><figcaption><a href="https://twitter.com/razvanilin/status/977657526304067584">https://twitter.com/razvanilin/status/977657526304067584</a></figcaption></figure><p>Woohoo! Users downloading the app, and they even recorded and sent hums &#x2014; best feeling in the world!</p><p>Well the number eventually stopped at about 9 new users by the end of the day, but for me that was an achievement. The next morning, 11, even better!</p><p><strong><strong>If you have a play with </strong></strong><a href="https://hummi.nz/" rel="noopener"><strong><strong>hummi.nz</strong></strong></a><strong><strong>, let me know what you think.</strong></strong></p><figure class="kg-card kg-image-card"><img src="https://razvanilin.com/content/images/2019/09/1_1AnWOg3J5FF_60ZHOx2nwg.png" class="kg-image" alt="Challenged myself to build and launch an app in a week" loading="lazy"></figure><h1 id="final-thoughts">Final Thoughts</h1><p>This was an incredible journey and a very good exercise for my developer mind. I now think more about where can I go and reach people that would want to use the app, rather than what features I can implement next. While implementing features is vital, it&#x2019;s not that useful if people don&#x2019;t want them or there are no users that can actually take advantage of them.</p><p>So go out there, build your idea, but please, don&#x2019;t spend months developing something that people don&#x2019;t have a need for. <strong><strong>Use your time more effectively, engage with other people, learn, prototype and launch quickly.</strong></strong></p><p>I also make this article the start of my writings about the projects I develop and what hurdles I experience along the way. Give me a follow and be notified when I post something new. And don&#x2019;t forget to press that &#x1F44F; button to give me a boost of motivation if you enjoyed reading this. Until next time!</p>]]></content:encoded></item><item><title><![CDATA[Using Sequelize with sqlite3 inside an Electron app]]></title><description><![CDATA[A few months ago I ran into some problems when I tried to use Sequelize with sqlite3 inside an Electron app. This post will walk you through fixing this issue.]]></description><link>https://razvanilin.com/using-sequelize-with-sqlite3-inside-an-electron-app/</link><guid isPermaLink="false">635ba9afad083dbcad3e90a1</guid><category><![CDATA[dev]]></category><category><![CDATA[open source]]></category><dc:creator><![CDATA[Razvan Ilin]]></dc:creator><pubDate>Fri, 02 Sep 2016 14:40:00 GMT</pubDate><media:content url="https://razvanilin.com/content/images/2019/09/construction-work-carpenter-tools.jpg" medium="image"/><content:encoded><![CDATA[<img src="https://razvanilin.com/content/images/2019/09/construction-work-carpenter-tools.jpg" alt="Using Sequelize with sqlite3 inside an Electron app"><p><strong>Update 8th of May 2020</strong></p><p>The method below may not be needed anymore. All you have to do now is to use <strong><a href="https://www.electron.build/">electron-builder</a></strong> and place a short script in your <strong>package.json.</strong></p><!--kg-card-begin: markdown--><pre><code>npm install --save-dev electron-builder
</code></pre>
<p>And then add the following code in your package.json scripts:</p>
<pre><code>&quot;postinstall&quot;: &quot;electron-builder install-app-deps&quot;
</code></pre>
<!--kg-card-end: markdown--><hr><h1 id="introduction">Introduction</h1><p>A few months ago I ran into some problems when I tried to use <a href="http://docs.sequelizejs.com/" rel="noopener noreferrer">Sequelize</a> with sqlite3 inside an Electron app. Even though I installed everything properly, I was getting this error:</p><!--kg-card-begin: markdown--><pre><code>Uncaught Error: The dialect sqlite is not supported. (Error: Please install sqlite3 package manually)
</code></pre>
<!--kg-card-end: markdown--><p>I was able to fix this using <a href="http://verysimple.com/2015/05/30/using-node_sqlite3-with-electron/" rel="noopener noreferrer">this website</a> but it appears to be down now. I decided to write down the method here and also adding a bit more details on how to solve the problem.</p><h1 id="solution">Solution</h1><!--kg-card-begin: markdown--><p>Go to <code>node_modules/sequelize/lib/dialects/sqlite/connection-manager.js</code> and identify the <code>MODULE_NOT_FOUND</code> error code. Log the error with a <code>console.log(err)</code> before the error is thrown.</p>
<p>Run the application and you will get a more detailed error:<br>
<code>{ Error: Cannot find module &apos;C:\Users\user\Documents\devStuff\work\app\server\node_modules\sqlite3\lib\binding\electron-v4.1-win32-x64\node_sqlite3.node&apos;</code></p>
<p>Note the <code>electron-v4.1-win32-x64</code>. You might have something different depending on the electron version you installed</p>
<p>Update and run the following commands to make this work:</p>
<pre><code>cd node_modules/sqlite3 &amp;&amp; npm install nan

node-gyp configure --module_name=node_sqlite3 --module_path=../lib/binding/electron-v4.1-win32-x64

node-gyp build --target=4.1.4 --arch=x64 --target_platform=win32 --dist-url=https://atom.io/download/atom-shell --module_name=node_sqlite3 --module_path=../lib/binding/electron-v4.1-win32-x64
</code></pre>
<p><code>--module_path</code> replace with what you got from the MODULE_NOT_FOUND error<br>
<code>--target_platform</code> win32, darwin or linux<br>
<code>--arch</code> x64 or ia32<br>
<code>--target</code> the version of electron you are using</p>
<!--kg-card-end: markdown--><p>If there are issues on Windows about MSB4019, check this issue https://github.com/brianmcd/contextify/issues/96</p><h1 id="that-s-all">That&apos;s all</h1><p>By following the steps above I managed to make the configuration work on Windows and Mac. Hopefully this solves the problem for you too.</p><p>If you still encounter the problem, check <a href="http://stackoverflow.com/questions/32423097/electron-and-sequelize-error-the-dialect-sqlite-is-not-supported" rel="noopener noreferrer">this post on stackoverflow</a>. It offers multiple approaches.</p>]]></content:encoded></item><item><title><![CDATA[Productivity - Waking up early in the morning]]></title><description><![CDATA[A lot of people recommend waking up in the morning because it gives your day a boost. Well, I actually started doing this for the past 3 weeks and I will describe my experience about it.]]></description><link>https://razvanilin.com/productivity-waking-up-early-in-the-morning/</link><guid isPermaLink="false">635ba9afad083dbcad3e90a0</guid><category><![CDATA[life]]></category><dc:creator><![CDATA[Razvan Ilin]]></dc:creator><pubDate>Fri, 29 Jul 2016 14:35:00 GMT</pubDate><media:content url="https://razvanilin.com/content/images/2019/09/20842801951_8843da03ba_k.jpg" medium="image"/><content:encoded><![CDATA[<img src="https://razvanilin.com/content/images/2019/09/20842801951_8843da03ba_k.jpg" alt="Productivity - Waking up early in the morning"><p>You probably heard this before or read about it in a blog somewhere. A lot of people recommend waking up in the morning because it gives your day a boost. Well, I actually started doing this for the past 3 weeks and I will describe my experience about it. I won&apos;t go over all the general benefits of waking up early because you can find that all over the Internet (I will leave some links at the end of the post).</p><h2 id="productivity">Productivity</h2><p>As the title says, productivity is one of the first motivation to wake up early in the morning. I work a lot on side projects and I am in need of some productive coding sessions when I&apos;m home. Before, I used to go to sleep at around 1-2am and wake up just in time to make some food and get to work in time. I was procrastinating a lot during my evening coding sessions.</p><p>Typically I was &quot;working&quot; from 7-8pm to around 12am. I say &quot;working&quot; because half of the time I was scrolling through Facebook, watching Youtube videos and many other things that were not classified as productive.</p><p>So how does waking up early affect productivity? In my experience, I found out that after work, my brain was quite tired. My concentration levels were not as high as during the day and that&apos;s why I found it so easy to drift into procrastination. At 5:30am in the morning I have an unpolluted fresh mind that helps me to be productive.</p><h2 id="longer-days">Longer Days</h2><p>Theoretically, the days are not longer for me but if I wake up early, I&apos;m under the impression that they actually are. Before, I used to sleep after 1am and wake up at around 7am. Now I go to sleep at 11pm and wake up around 5:30am. The amount of hours I sleep is about the same.</p><p>The problem is with not valuing the time properly. If I procrastinate I later thing that was all a waste of time when I could have been doing some more important stuff. Doing something I&apos;m later grateful of, make my day more meaningful and I feel like I achieved a lot in a day hence the &apos;length&apos; seems longer.</p><h2 id="quality-time-quiet-time">Quality time - Quiet time</h2><p>I feel like I own the world when I wake up early! I feel super excited to get on with my things and enjoy the morning silence while doing so. Currently, I live in a shared flat and even if my flatmates are quiet, I still feel their presence in the house. Early morning? Nothing. And I like nothing, I like hearing the wind, the seagulls and people rushing with their cars in the distance.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="http://razvanilin.com/wp-content/uploads/2016/07/cozyplace-1024x576.jpg" class="kg-image" alt="Productivity - Waking up early in the morning" loading="lazy"><figcaption>My morning workspace</figcaption></figure><h2 id="the-morning-meal">The morning meal</h2><p>Breakfast is the <a href="http://easacademy.org/trainer-resources/article/why-breakfast-is-the-most-important-meal-of-the-day-eas-academy" rel="noopener">most important</a> meal of the day because it gives you the much needed energy your brain and body needs for facing the day. I started eating a lot in the morning some time ago and I can confirm these benefits. When I get to work my mind is not thinking what will I have during lunch. I&apos;m also really productive and do things much quicker and without mistakes.</p><p>Waking up early gives you enough time to pay attention on what you&apos;re eating. You can cook something nice. I enjoy cooking and mornings are great for that.</p><h2 id="going-to-work-prepared-and-in-time">Going to work prepared and in time</h2><p>Before I started waking up early, I was rushing through making breakfast, having quick shower, ironing clothes and the running to work. Sometimes I was having just a tiny breakfast because I was running out of time. These things affect your mood. I found it better to have plenty of time in the morning to do all these and go to work relaxed.</p><p>Now that I wake up early I even have time to plan my day out. What exactly I will concentrate on at work, what will I do when I get back home, and so on. This saves me time later on and make me more confident.</p><h2 id="conclusion">Conclusion</h2><p>Waking up early is one of the best decisions I took lately. I feel good that I finally have time to concentrate on my own projects and be productive at work at the same time. I want to experiment some more with this and I will give you updates through emails so feel free to subscribe at the bottom of the page. One thing I want to try soon is to go running for about 20 minutes as soon as I wake up.</p><p>If you think your not productive enough during the day, I recommend you try waking up early and see if that boosts your productivity.</p><h3 id="promised-links-">Promised links:</h3><p><a href="http://www.lifehack.org/articles/productivity/this-why-productive-people-always-wake-early.html" rel="noopener">This is Why Productive People Always Wake Up So Early</a></p><p><a href="http://www.forbes.com/pictures/gglg45gfd/benefits-of-early-risers/#63222f2b2a46" rel="noopener">Benefits of Early Risers</a></p><p><a href="http://easacademy.org/trainer-resources/article/why-breakfast-is-the-most-important-meal-of-the-day-eas-academy" rel="noopener">Why Breakfast Is the Most Important Meal of the Day</a></p><p><a href="http://liveboldandbloom.com/01/habits/create-your-morning-routine" rel="noopener">Create Your Morning Routine</a></p>]]></content:encoded></item><item><title><![CDATA[ofxAwesomiumPlus]]></title><description><![CDATA[ofxAwesomiumPlus is an addon for openFrameworks. It works as an interface between Awesomium and openFrameworks.]]></description><link>https://razvanilin.com/ofxawesomiumplus/</link><guid isPermaLink="false">635ba9afad083dbcad3e909d</guid><category><![CDATA[open source]]></category><category><![CDATA[openframeworks]]></category><category><![CDATA[awesomium]]></category><dc:creator><![CDATA[Razvan Ilin]]></dc:creator><pubDate>Tue, 19 Jul 2016 23:31:00 GMT</pubDate><media:content url="https://images.unsplash.com/photo-1558655146-d09347e92766?ixlib=rb-1.2.1&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=2000&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjExNzczfQ" medium="image"/><content:encoded><![CDATA[<h2 id="about">About</h2><img src="https://images.unsplash.com/photo-1558655146-d09347e92766?ixlib=rb-1.2.1&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=2000&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjExNzczfQ" alt="ofxAwesomiumPlus"><p><strong>ofxAwesomiumPlus</strong> is an addon for <a href="http://www.openframeworks.cc/" rel="noopener">openFrameworks</a>. It works as an interface between <a href="http://www.awesomium.com/" rel="noopener">Awesomium</a> and openFrameworks. This addon was built on top of an existing one (<a href="https://github.com/mpcdigital/ofxAwesomium" rel="noopener">ofxAwesomium</a>) because it was too limited to use it for the project I was working on at the moment. This addon gives you the ability to easily set up an interface for your application using HTML and make it interact with you c++ codebase. In the picture above you can see how you can combine openFrameworks elements with the HTML UI.</p><h2 id="technologies-overview">Technologies Overview</h2><h4 id="openframeworks">openFrameworks</h4><p>This is an open source c++ framework with a lot of features aimed towards creative applications. I use this framework to work with OpenCV for the Computer Vision technology. Read more about this framework on <a href="http://openframeworks.cc/about/" rel="noopener">their website</a> and give it a shot. I found it really easy to work with and the community is great.</p><h4 id="awesomium">Awesomium</h4><p>Awesomium helps you build really nice interfaces using HTML, but what I like more about it is that you can bind c++ to javascript functions. You can also execute javascript straight from c++ and get JSON objects that you can use in your application. This all sounds really amazing, but I still find Awesomium a bit underdeveloped and apparently it doesn&apos;t seem like it&apos;s being maintained anymore. Also, if you plan to use cool CSS3 features, you might be a bit disappointed as not all of them work.</p><h2 id="clone-it-from-github"><a href="https://github.com/razvanilin/ofxAwesomiumPlus" rel="noopener">Clone it from GitHub</a></h2>]]></content:encoded></item><item><title><![CDATA[Nebulae - First game with Unity]]></title><description><![CDATA[Nebulae is a multiplayer space shooter game that I developed for educational purposes. I always wanted to learn how to develop using the Unity3D engine, and creating an actual game from scratch was the best way to do it.]]></description><link>https://razvanilin.com/nebulae/</link><guid isPermaLink="false">635ba9afad083dbcad3e909e</guid><category><![CDATA[gamedev]]></category><dc:creator><![CDATA[Razvan Ilin]]></dc:creator><pubDate>Sat, 09 Jul 2016 14:05:00 GMT</pubDate><media:content url="https://razvanilin.com/content/images/2019/09/Nebulae_v0-2014-05-31-01-30-41-45.jpg" medium="image"/><content:encoded><![CDATA[<h3 id="play-nebulae"><a href="http://gamejolt.com/games/nebulae/27928" rel="noopener">Play Nebulae</a></h3><figure class="kg-card kg-embed-card"><iframe width="480" height="270" src="https://www.youtube.com/embed/qFP8F5TpF2g?feature=oembed" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></figure><hr><h2 id="about">About</h2><img src="https://razvanilin.com/content/images/2019/09/Nebulae_v0-2014-05-31-01-30-41-45.jpg" alt="Nebulae - First game with Unity"><p>Nebulae is a multiplayer space shooter game that I developed for educational purposes. I always wanted to learn how to develop using the Unity3D engine, and creating an actual game from scratch was the best way to do it. The game was developed in a 2-week period and was submitted to a contest, <a href="http://venuspatrol.com/2014/05/venus-patrol-juegos-rancheros-present-space-cowboy-game-jam/" rel="noopener">The Space Cowboy Game Jam</a>. It wasn&apos;t a winning entry, but it gave me the necessary motivation to keep working on the game.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://razvanilin.com/wp-content/uploads/2014/06/bandicam-2014-06-01-20-42-47-403-1024x575.jpg" class="kg-image" alt="Nebulae - First game with Unity" loading="lazy"><figcaption>Nebulae Project inside Unity&apos;s editor</figcaption></figure><h2 id="technology">Technology</h2><p>The game was developed entirely using the Unity3D engine alongside their awesome editor. It was really fun to have a graphical interface to look at when you are writing code and see the changes you make in real-time, rather than compiling your code after each modification and wait for it to build. The game is also multiplayer and it was my first try in doing something like that. It was a really fun experience, but a bit frustrating at time, I must admit. Coding it for multiplayer involves a lot of changes in the architecture, making sure the information is sent to all the players so that everybody sees the same things and all the hits are registered accordingly.</p><p>The models used in the game were all taken from Unity&apos;s samples as my graphical design skills are not nowhere high enough to create my own models. Also the sound effects were taken from 3rd party websites. The effects that I have created are found in the ships&apos;s engine, lasers and space dust. These are all particles that have a specific algorithm in place to make them move.</p><p>There is a a bigger post that I&apos;ve written when I first developed the game. Feel free to <a href="http://blog.razvanilin.com/having-fun-with-unity/" rel="noopener">check it out</a>.</p>]]></content:encoded></item><item><title><![CDATA[Having fun with the Unity game engine]]></title><description><![CDATA[Unity is a really cool game engine which I wanted to learn a while ago, but had no time to do that. Less than two weeks ago I decided to go back to it and I started doing a  project tutorial that I found on unity's learning space]]></description><link>https://razvanilin.com/having-fun-with-the-unity-game-engine/</link><guid isPermaLink="false">635ba9afad083dbcad3e909f</guid><category><![CDATA[gamedev]]></category><dc:creator><![CDATA[Razvan Ilin]]></dc:creator><pubDate>Sun, 01 Jun 2014 14:20:00 GMT</pubDate><media:content url="https://razvanilin.com/content/images/2019/09/bandicam-2014-06-01-20-42-47-403.jpg" medium="image"/><content:encoded><![CDATA[<img src="https://razvanilin.com/content/images/2019/09/bandicam-2014-06-01-20-42-47-403.jpg" alt="Having fun with the Unity game engine"><p>I have been missing for a while, but now I&apos;m back with new material to write about. I finished the 2nd year of uni almost a month ago so now all I can do is wait for my internship which starts in about 3 weeks, so it&apos;s good that I stumbled upon <a href="https://unity.com/">Unity</a>.</p><p>Unity is a really cool game engine which I wanted to learn a while ago, but had no time to do that. Less than two weeks ago I decided to go back to it and I started doing a &#xA0;project tutorial that I found on unity&apos;s learning space (the tutorials area is really good). From the moment I began the tutorial I was hooked into it ... it was so amazing, waaaay better than playing an actual game. The Unity&apos;s editor is just perfect; you can see what you are modifying real-time, you can place objects in the world using a neat interface, you can write scripts to determine your objects&apos; behaviour and modify your public variables directly from the editor, you can reference other objects just by dragging and dropping the object in the right space.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://razvanilin.com/wp-content/uploads/2014/06/bandicam-2014-06-01-20-09-28-372.jpg" class="kg-image" alt="Having fun with the Unity game engine" loading="lazy"><figcaption>Script&apos;s public variables</figcaption></figure><p>Unity has a good way of reducing the amount of code you write for your game. Don&apos;t get me wrong, I like coding a lot, but Unity feels like a breath of fresh air, you don&apos;t have to play-test every time you make a modification to an object&apos;s position for example, you can just see it in the editor from every angle. The learning curve of the editor is not steep at all. It feels natural to drag objects around, import new assets, add components to your objects, etc. Of course, there are some more complicated things but 99% you will find something about it on the Internet that will help you understand.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://razvanilin.com/wp-content/uploads/2014/06/bandicam-2014-06-01-20-42-47-403-1024x575.jpg" class="kg-image" alt="Having fun with the Unity game engine" loading="lazy"><figcaption>Placing objects in the world</figcaption></figure><p>So as you have probably guessed I quite like using this engine. I can&apos;t remember finding something bad about it in the short time I&apos;ve been using it, but probably that&apos;s bound to happen at some point because, come on, nothing is perfect. For a hobbyist like me, this is a perfect environment where I can have some fun building games. What I like most about it is that you can make a good looking simple game really fast. You can place lights, make some atmosphere with a bit of fog, add some ambient light so the shadows are not completely dark, add 3D sounds and put an audio listener to your character so you can hear the sounds from your character&apos;s perspective. These things are just so amazing for an amateur like me.</p><p>After finishing the first tutorial (which you can find <a href="http://www.razvanilin.com/games/stealth/" rel="noopener">here</a>) I started another one but half-way through it I was like...<em>meh! don&apos;t want to do tutorials anymore, time to do my own stuff. </em>And that was a good decision because you learn faster by doing it on your own...well not completely on your own, I mean with your friend Mr. Google helping you out. I started working on a game called Nebulae which is a multiplayer 3rd person space simulator. As a beginner I think I progressed really fast with it because in less than a week I managed to implement quite a lot of features. The thing I am most proud of is that I managed to implement multiplayer as that was a first in my short game development journey.</p><p>Have a look at how Nebulae looks by watching the video below:</p><p><a href="http://www.youtube.com/watch?v=qFP8F5TpF2g">http://www.youtube.com/watch?v=qFP8F5TpF2g</a></p><p>If you like developing games and you never tried Unity, I really recommend it so give it a shot, it&apos;s free!</p><p>I think I&apos;m suffering from Unity hype right now *coughs*.</p>]]></content:encoded></item></channel></rss>