Wieismelissa.nl was created from a UX/UI design perspective. It started with the question: "Why would a potential user want to visit wieismelissa.nl?" Thereafter, I executed the following steps: user research & analysis, generating ideas, paper prototyping, digital prototyping, building website, usability testing.
Company
Personal project
Software
Figma, Webflow, Adobe After Effects / Illustrator / Photoshop
Challenge
This personal project served to gain a better understanding of UX/UI design, as well as to implement various aspects of it. The goal was not only to achieve a satisfactory end result, but also to enjoy the learning process. This project arose from the desire to improve my hard skills. At university, my soft skills were developed extensively, but I had little experience with various Adobe Tools, for example.
Responsibilities
I made this website myself, making extensive use of YouTube tutorials and other online resources. The photos were taken by Niek Rutten. In addition, friends and family played the role of users in user research and usability testing.
process
During this process I kept a workbook in which all design choices are written down. The most important steps and learning moments are formulated in this section.
User Research & Analysis
I started by interviewing users (friends and family) about why they would want to visit wieismelissa.nl. As a result, I formed two personas. Here, it became clear that the goal of wieismelissa.nl is that users get to know me better, both personally and professionally.
Generating Ideas
As a next step, I brainstormed about various options for achieving my goal, which is to get to know myself better, both professionally and personally. I then converted these options into sections. For example, I wanted to show my hobbies on the website, because this is a good way to get to know me personally. I could have done this via blog posts, for example, but I chose a kind of photo album. This way it takes less time to maintain and the visitor learns my hobbies more quickly.
Paper Prototyping
I opted for a long page scrolling design, so that I can include the user in my story. Most users will visit this website once. For repeated visitors, there is a menu that links to the desired section. The order of these sections runs from professional to personal.
Then I used Sneakpeekit's templates to wireframe. I first did this for mobile phones, as it is easier to go from a smaller screen to a larger screen than the other way around. This is partly because it is easier to add content than to remove it, and because it forces you to show only the most important information. After all, the average user spends little time on a website.
Digital Prototyping
I chose Figma, a popular and relatively new interactive prototyping tool. This is where graphic design started to play a role. I researched color psychology and typography. The colors are divided according to the 60-30-10 rule where about 60% of the website is white or black, 30% yellow and 10% red. According to psychology, the color yellow is cheerful, energetic and creative.
Building the Website
This website is made in Webflow, an application that allows designers to build responsive websites in visual editing software. Webflow automatically generates the HTML, CSS and JavaScript code. I chose Webflow because the free version has few restrictions (domain name and a small hover element at the bottom right). In addition, Webflow has an extensive library of tutorials and an active forum.
I made the website from scratch, so I had complete freedom. This makes the website innovative and striking.
Usability Testing
As soon as the website was almost finished, I asked friends and family to do a user test. They shared their screen via a video call so that I could see how they navigated the website. The main points that emerged from these user tests were: the legibility of the titles, the accent color red (was purple at first, this color was too cold) and the menu was too static (now animated). Later on, I decided to translate the website to English instead of Dutch, because the audience I want to reach is expected to understand English, but not everyone may be able to read Dutch.
Key takeaways
Building the website itself was harder than expected. I had watched many tutorials in which it seemed easy, but to do it myself was different. I also found it difficult to make the website visually attractive. Through the hard way I learned why something sometimes works on one website and not on another, or how color and typography play a crucial factor. If I were to built myself a new website, I would use more basic elements to ensure the responsiveness fits all devices.
Furthermore, I also learned more than I expected in advance. I am proud of the final website itself.
