Resolve — smarten up!
This project was carried out as part of the TechLabs “Digital Shaper Program” in Münster (winter term 2021/22).
Abstract
Nowadays, many people have difficulties achieving their resolutions. It was our objective to change that and create a website to help people keep and develop their goals. For this purpose, we decided to use the SMART-method in order to assist our target group with creating good goals and thinking about preexisting goals methodically. Furthermore, we offered a personal dashboard to the potential user and also built a carefully designed homepage.
Introduction
In our daily lives, many challenges are thrown at us. One of these challenges is to achieve what one puts their mind towards because of a discrepancy between visualization and implementation. That can be a lesson learnt by programming, but it is also relevant in mundane tasks. A good example of this are New Year’s resolutions; around New Year, many people decide to improve something in their lives, may it be in their personal or professional lives, may it be for themselves or to achieve something greater. Even the Romans had a tradition like this where they made promises to their god Janus, who gave the month January its name. From the people that undertake New Year’s resolutions, studies show that many people fail to keep their New Year’s resolution.
Our main goal was to bridge the gap between what is desired and what is achieved. Therefore, we wanted to create a tool that helps people to achieve resolutions of all kinds — Resolve was in the wings.
Planning Phase
As our track was web development, a big part of our work turned out to be about pondering the design and functionality of our final product. We began with discussing what we wanted our tool to offer, how the user interface was roughly supposed to look like and the ways the user should be able to interact with it. Based on this, we developed a functional flow diagram. It became clear soon that we would have three webpages: The first one was the homepage which would be the first page the user would look at when accessing the tool, the second one would be the dashboard where the user would be able to keep and organize personal information, and the third page would be the process the user would have to go through to make a new resolution.
For each of these webpages, we had different kind of challenges. Regarding the homepage, we wanted it to look especially attractive to our potential target audience. The dashboard was intended to reproduce the information the user entered into the website and materialize a “journey”, but it was hard to estimate what would be possible to achieve right at the beginning. For example, did we want to use dates to remind the user of keeping their goal? How would we visualize it? How would we stack the goals the user decided on in an efficient, pleasing way?
However, the trickiest one to decide on was how, exactly, to help the user keep their resolution. One of the most important aspects for that was our interference in the user’s organization and decision-making process. There was a trade-off between independence and support. It would largely shape the way our tool would look in the end, and if it would be attractive to a certain target group. Specifically, there were two major ways to be an influence: First, it could happen through the dashboard. For example, we could motivate the user to keep their goal through a reward system, by awarding them points, emojis or using signal colors. Secondly, we would have to set them up for success, which connotes that we would have to help them set new goals with an understanding about how the human mind works. There were many possibilities and interesting reads about the psychology of keeping resolutions. In the end, we decided that less is more — we didn’t want to overcomplicate the progress for the user. It was better to keep it as simple but effective as possible. In the end, we decided on using the SMART-method — this method is commonly known and easy enough to use, but also deemed by us to have all the necessary components for success. So, we decided that to set new goals, the user would use a stepper to evaluate their goals in detail.
Methodology and result
To design our webpages, we used Figma. We decided on several color palettes and looked up vector graphics to fill the homepage. Additionally, we decided to create a glass UI, an UI with gradient colors and varied opacities. We also did research on the psychology of colors and decided on blue which is supposed to have a calming effect.
The coding itself happened it Visual Studio Code and we shared our code per GitKraken, a popular Git client.
For the stylesheet language, we decided on Tailwind CSS, which is a front-end CSS framework. Tailwind CSS is preferable to other frameworks like bootstrap because instead of offering premade components (such as buttons, navbars and so on), it entails a big set of utilities to make unique designs. It’s also possible to create custom styles with it, meaning that it’s possible to extend the framework and add a specific color palette, typography scale etc. Style elements created by Tailwind CSS are added directly into HTML classes, which makes the framework easy to use.
While styling the user interface, there was a steady learning progress which included many little challenges. We had the Figma designs but it was hard, although entirely possible, to replicate the design exactly as visualized.
To create the stepper, we used Tailwind CSS and Vue.js. By using the flexbox layout, it became possible to optimize the usage of available space without having to measure the exact size or axis placement of the items in it. This is done by using flex containers. The design gets more flexible and can stretch or shrink. Overflow is also prevented.
There was much experimentation involved to figure out how to use flexbox. E.g. it was important that the design looked good on every platform, no matter if it was a mobile phone or laptop. Because of this, we had to be mindful of the ways we sized up elements. Some solutions to designs created more problems to solve. For example, in our design, we placed the letters of SMART into a transparent circle with a gradually colored, broad border. It’s not possible to create a gradually colored border without effortfully adding to the framework, so in turn, we placed a smaller circle into a circle to create that border. That, however, made it impossible for the inner circle to be transparent while the outer circle, which operated as the border, had a color. Because of this, we settled on not making the border of gradient color. Another interesting problem was that in flexbox, buttons that were meant to be completely round by design became oval despite having the same height and width. That’s because the padding had to be corrected, too, else it affects the form.
Apart from the design, it became pretty difficult to actually create the stepper with all its steps by using Vue, which is something to still work on in the future.
In the backend we decided to use Firebase. Unfortunately, there were only three of us and we all concentrated on the frontend. Therefore, not much could be implemented in the backend in the short time. However, it was possible to implement the login and registration process with firebase auth REST API. The implementation was very simple. After logging in the user gets to the dashboard area, before it is not accessible. Nevertheless, the project was a success for us, even if we were not able to complete it. We learned a lot in the frontend and further consolidated existing skills, worked with new tools and had fun implementing the project. We would recommend others to rather take on something less, because more functionalities can always be added later :). What we also definitely recommend is to take the exam period into account when planning your project and coordinate accordingly!
The team
Oğuz Caymazer Web Development: Front & Back End
Kabir Un Din Web Development: Front End
Vivienne Assaf Web Development: Front End
Roles inside the Team
Oğuz — everything backend, styling of the homepage & dashboard, Figma design
Kabir — generally helped with researching problems we had while programming, Figma design
Vivienne — styling of the SMART-Page, Figma design, the lion’s share of this blogpost
Mentor
Chris Schimetschka
