Honours Project
When deciding on a topic for my project, time management has been something that has always intrigued me. One key area of this was the issues people experience when trying to perceive how much time they have, whether to fit in a chore or find value in how they dedicate their time.
LLENO translates to ‘Full Day’ in spanish.
About LLENO
The covid-19 pandemic has had a significant effect on the well-being of many people, myself included. The unprecedented new regulations and the change in social normality forced people away from what they were accustomed to each day.
There was an imbalance in people’s lives.
However, many people took this as an opportunity to learn a new skill, meditate, do some home exercises and much more. YouTubers, podcasts, radio stations, and apps were at the forefront of this, guiding people to self help.
The pandemic has led to a surge in downloads of mental wellness apps, such as Calm, Headspace and Fabulous, as everyone tries to de-stress. Although the market is growing exponentially, there may still not be an app tailored to a user’s specific needs.
LLENO takes a step back from the strict confines of daily planners and offers a more abstract way for a person to track what they have achieved each day. It differentiates itself as a planning and reflection tool because there are no objectives and the expectations set out by the user are fluid and interchangeable.
When mental well-being can be a challenge for many, the app aspires to be a fun and satisfying experience that motivates users to fill each day and look back at what they have achieved in a positive light.
Discover
Project Direction
Deciding on a brief for my final honours project was a task that stalled me many times. The deadline for submitting it pushed me into the topic of anxiety and analysing the process behind how someone manages their thoughts, either positive or negative, and creating a visualisation to help comprehend what is going on. Although the brief remained open, I got assurance that a focal point would appear from conducting my research.
I used Miro, an online board, to build up a collection of links, statistics and diagrams.
The initial focus was Anxiety Spiralling. I started by understanding as much as possible by mapping out the process that would cause a person to spiral and, from there, aimed to create a product that would guide a user through a solution. As research continued, it became evident that there was a rabbit hole of information, and there were too many variations to consider.
Working in an area that tackles a vulnerability means more gates to ensure that the process is safe and practices are ethical. In addition to this, research into other wellbeing apps revealed the scientific backing for every technique they had developed. So after considering this, I chose to move away from a product that would claim to aid users with anxiety.
After discussing with Andrew, I came across my holy grail of books: Four Thousand Weeks by Oliver Burkeman. The book piqued my interest in the different approaches to time management and the issues people face with current-day interactions like social media.
I read a few other books such as Digital Minimalism. However the range of problems found in Four Thousand Weeks was better for ideas.
I ended up getting too tied up in web research and had to choose a select few to represent the main ideas of what I wanted to tackle.
Project Surrondings
To define my project’s focus, I began to map out and illustrate some people’s key issues when managing their time. From this, I grouped similar problems to see if there was a core ideology that I could build around.
The Glass Jar
In my Mark 0 and Guru day presentation, I used a familiar parable for how to prioritise your time. It consists of a few items such as several sizeable rocks, some pebbles and a bag of sand. The challenge is to organise all the things inside a glass jar. If placed in the wrong order, the items won’t fit.
The solution is to put in the rocks first, then the pebbles, then the sand, so that the smaller items nestle comfortably in the spaces between the larger ones. If you make time for the most important things first, you’ll get them all done and have plenty of room for less important things.
Strict Management
Taking too much control over how you organise your future can lead to frustration when something in your schedule is interrupted by an unforeseen problem. Any delay or additional task can cause a plan to fail if there is no flexibility.
Letting Go
The core challenge of managing a limited amount of time isn’t about getting everything done but how to decide most wisely what not to do and how to feel at peace about not doing it.
The Bottomless Bucket List
Social media and the internet are a double-edged sword. When looking for inspiration to make better use of your time, it simultaneously exposes you to many other potential methods, thus leaving you unsatisfied with what you currently have.
The style used in the the jar visual was the original idea for what visuals I had in mind. The idea of it looking like layered paper and a sort of puppet show effect would make the app appear less formal?
Physical Prototype
I aimed to play with the glass jar analogy when making my first model. By disassembling the elements, I questioned how each property could change.
A glass jar holds the core purpose of safely storing and transporting whatever is inside; therefore, it would not be intended for items to spill out. Referring back to my research, being able to dismiss an item can be a positive effect, so I decided to change the shape from a container to a bowl/plate. When there are too many items, the lack of a barrier makes things fall off easier.
In my guru’s day video, I highlighted that each item already has a predetermined value: rock, pebble, or sand. Only having three categories restricts the user and prevents any flexibility in changing the task’s priority. Using scrunched up paper, I created balls that would sit inside the bowl. The size represents the time it would consume, and the colour highlights the task’s category, such as exercise, working, etc.
It was still unclear how the user would interact with the balls at this stage. The initial intention was to use it to monitor their retention of a task, but the concept became counter-intuitive since it would distract them from the task at hand.
One of the key insights was that the model gauged visual interest and was quite ornamental. Since the balls needed to change in size, they needed to be more fluid or organic. The motion made me look into Lava Lamps, and they tied in very well because they are ornamental, fluid and relaxing.
To create a product with so many changing elements forced me away from something physical because I could achieve an elevated level of detail and motion with a screen.
The black base is actually to hold a fancy glass jar but made for the most subtle stand that had a slight indent. The colour ended up making the balls even more visible which also lead to the decision of a black background.
Existing Mental-Wellbeing Apps
I started to further research the other well-being apps and take notes of the visual interface and user experience for strengths and weaknesses. Even accidentally purchasing a yearly subscription.
The Fabulous app helps you build routines over time by breaking habits down into small, attainable steps and journeys. Each action is explained in-depth and backed by scientific studies.
The Calm app features hundreds of calming exercises, breathing techniques, and sleep stories. Sessions can range anywhere from 3-30 minutes.
Key Insights
The colours are vibrant and cheerful, either pastel or opaque.
Every corner is rounded, and the text is never all uppercase.
Information is readily available to reassure the user.
In multiple stages, a progress bar or text indication is always present.
Define
Target Audience
Most of the popular wellbeing apps (such as Headspace and Calm) follow similar UI and soft and inviting themes while also aiming to keep their target market as wide as possible.
When defining an audience for my project, I wanted to target my app toward a smaller pool of users. Because it has been a personal issue, and after talking to other students, I chose to focus on people at university or that of a similar age.
It is essential to clarify that the app does not aim to replace current methods to organise but to work in tandem instead, primarily as a mental aid instead of a way to schedule specific times, dates and other uses for a calendar.
When further developing the app, there are more advanced interactions such as holding, pinching, etc. and paired with the choice of a dark UI, eligibility and usability may become an issue for users who may need a clearer and basic model.
Technology
The main strength of Adobe software is the cohesiveness that allows me to transfer illustrations and other items across platforms with ease. Further down the proces, I chose to use Nuomorphism as a base to my visual interface.
Nuomorphism was created from the combination of skuomorphism and flat design. This 3D design is textured but still soft and simple and can be produced using the right blend of shapes, gradients, background colours, highlights and shadow play.
After experimenting across different Adobe Platforms, Xd provided the most simple solution to creating the desired nueomorphism effect because of their drop shadow and inner shadow feature that was simple to use. By creating two layers with adverse effects, the shape would have the desired result.
The inner shadows and radial gradient features gave the orb is smooth and 3D feel by creating a glow around the inner edges and a darker centre to the shape.
I felt comfortable getting the most out of the Xd software due to the experience gained in previous projects. Although there are limitations, there are tips and tricks I have picked up to circumvent most problems.
Switching to a new software would risk more time spent learning the program and also the possibility of undiscovered issues down the line that I may not be able to foresee.
Software Capabilities
Auto-Animate
I most prominently used the Auto-Animate feature. The software would recognise any changes in properties such as shape, movement, and colour and animate a transition from one board to the next. The feature ranged from creating a loop from multiple boards to giving an orb its fluid appearance, or a smooth transition where buttons would move, preventing a static experience.
Component Library and Layering
However, the software would be prone to making the animations look glitchy if it failed to understand the change of a component between boards. Good organisation can prevent this by having everything in order and the correct layering so that it would still understand its assignment when altering a feature.
Opacity
Despite the auto-animate capabilities, sometimes there needs to be a longer alternative to create a particular effect. From one transition to the next, it can recognise the opacity of an object which is useful for fading in and out. Unfortunately, when the colour of an object changes, the transition is sudden and needs another solution.
I can use two layers, and by switching the opacity, one can fade in while the other fades out, creating the illusion that the colour is gradually changing.
Transitions
There are also transitions not seen by the user. By switching a page without using any time, the user will not recognise any change, but the loop will be able to continue without any issues.
An example of this is using rotation with the auto-animate feature. The software recognises an object pivoting around a central point. Once it completes a full 360 degrees, it will be confused when recycling back to 0, as it will return anti-clockwise instead of staying still.
Insight Gathering
There would be lots of jumping around with ideas throughout the whole process. Because the app concept remained quite ambiguous in the early stages, the outcomes and inputs methods changed frequently. Large app areas would change at multiple points because the interactions would drastically change after feedback or a new idea.
Every tiny or messy note would end up in the sketchbook as sometimes referring to old ideas or pieces of inspiration would lead to a new branch of ideas. An early sketch in the book prompted the idea of looking at widgets as inspiration. I didn’t carry it forward because it wouldn’t work with the other interactions at the time, but after flicking through the pages again, it became relevant as it fitted in with a newer concept.
Discussions in the studio would lead people to recommend looking at another app or a visual idea related to our conversation. Even a small underlined sentence like ‘Pixar Inside Out’ developed into a theory about how I could show the statistics.
Develop
Mark 1 Presentation
At this stage in the process, I was still working towards a complete ideology. There were still theories over how things would work or what else I could squeeze into the app. Mark 1 was an excellent opportunity to see what could develop or if anything needed cutting.
Structures
Many of the fundamentals from the physical prototype remained the same but with a few additions or tweaks. Instead of just a circle, I began experimenting with other shapes as the border. The first inspiration was Maslow’s Hierarchy of Needs, a triangle with multiple levels starting with psychological needs at the base and self-actualisation at the top. The most important activities would move to the top so the user could have an additional cue on what they could prioritise. The linear method was the least developed and essentially acted like a list.
The ‘Blobs’
I looked to create a theme around the Lava Lamp idea that I attained from my physical prototype and rough digital mockup.
Firstly, the balls changed into a more fluid form. At Mark 1, I named them blobs as a placeholder, eventually choosing orbs as an appropriate replacement. After some testing and discovering that there was not enough space inside the border, I developed the idea of sub-categories to reveal more detail, but I was uncertain how to access them.
Visual Language
When I made an illustration of a lava lamp, it became the primary visual language for the presentation and, subsequently, the rest of the app. The thin white lines looked sharp on a dark background, and the glow of the vibrant orbs made it appear to be emitting light.
Wireframe
The wireframe was very rough but portrayed the idea of having three or more areas to swipe in-between with a menu to add orbs or edit the ones you currently had.
Feedback
There was a lot of discussion about the ideology and how the app would function, leaving a lot of unanswered questions to move forward. The main positive was that the visual language was strong, and the inspiration of a lava lamp was a great comparison to how the app’s experience should be.
Animation
Making the app feel alive was the main feature. Not only does it need to be satisfying to watch like a lava lamp, but when the user interacts with it, does it feel immersive and fun?
The orbs require the most detail as they need to appear fluid. Achieving this is very challenging as there are multiple factors to consider.
The Science
In a liquid, there is adhesion and cohesion to consider. The effect makes something fluid appear sticky, so you can see the tension when pushing and pulling a liquid.
Application
The orbs are constantly fluctuating inside the border and moving alongside other orbs in the app. The user can also influence the orb by dragging it around.
After Effects
I discovered the most proficient way to simulate a fluid object was on Adobe After Effects by combining blur and roughen edges or a matte choker. A prominent issue was how I would make this interactive and fit it alongside every other app element.
Meta Ball
For this reason, I chose to use Adobe Xd and a plugin called Meta Ball. The plugin only functioned as a static way to show two circles splitting apart, but by using a few auto-animate tricks and scaling, the animation became convincing.
Mark 2 Presentation
I had made a lot of progress in the prototyping on Adobe Xd by this point, and the app finally felt like it was taking shape.
Visually there were a few changes. The design felt flat, so I incorporated the nuomorphic design as a backdrop, and this worked even better with background lighting, bringing more colour to the screen when a user would tap on an orb or button.
The orbs looked sharper by removing the blur around the edges. An inner shadow and radial gradient also added an extra glossy feel. A thin white outline would make it stand out from the rest when selected, and a tag to show the user what they had chosen.
I began to see how the orbs would float around and move alongside one another by individually changing each small step. In the presentation, I also demonstrated the detailed animations from the previous page.
Feedback
The lecturers were happy with the strong visual language I’d continued to build on and liked the addition of the nuomorphism. I had shown all the animations in the other document, but there was still a tab in my primary model that slid in for more information.
Andrew pointed out that the current design still contradicted my project’s focal point. I lost focus on creating a playful interaction with the orbs instead of using boring menus.
I now had to challenge myself to develop a creative way to reveal information without moving away from the main area.
User Testing
I would get people to offer their opinions on visual elements or interactions by sending over screenshots or a video at every opportunity. Testing constantly led to over a hundred iterations that would end up not being used, but it let me narrow down on minute details. The app needed a refined feel, so I tested every slight movement. Even if it were hardly noticeable, each detail would pay off.
When selecting a colour for an orb, I managed to animate it so the white indicator would slide around the edge, following the user’s orb movement. The slight change made a considerable difference to the feel compared to jumping around.
I used a paper prototype to discover what interactions felt natural or if the purpose of something felt obscured. Each user would talk through their process, indicating if they needed a prompt. I tested with people who knew the concept and those with no starting information to see how hard the idea was to grasp.
Finalising
Branding
Since making the Illustration of the lava lamp, the theme has slowly developed and improved. Thin white lines and bursts of colour stand out clearly on a dark background, so I used the same techniques as the components on my app when making the logo.
Font
The font featured is Segoe UI. Paired with defining height intervals, I used Bold, Regular and Light to create a clear hierarchy.
Name
LLENO felt most fitting as a name because it highlighted a perspective change. Other ideas rotated around themes like Flow, Reminiscing, Treasure and Pallete.
Logo
I wanted to incorporate an icon that could be a standalone thing in the logo. Experimenting with the shape of the orb felt too messy as it didn’t fit in with the rest of the text. The original solid colour didn’t feel like it represented a range, so I used the colour wheel to show all the options the orbs could be.
Final Outcome
There were a lot fewer boards for the final prototype because I had improved the efficiency of the animations. The change improved the performance issues as there was less to process, making the app run smoother.
There are multiple loops in every part of the app, ensuring there is always something moving. In the colour selection, the orbs are currently limited to 8 colours which are enough to showcase in the working prototype.
Because of the complexity and limitations of Adobe Xd, I needed to use some smoke and mirrors by anticipating and restricting some of the user’s interactions. The movement was the hardest to achieve because the effects were not as powerful as After Effects. However, the final prototype still conveys the playfulness and relaxing nature of the app.
Hamburger menu, icons and buttons.
Hero Image
