Personal Blog for The Wild Thinker

luginasp
August 8, 2023
alwinmreza.com

Role

UI/UX Designer and Web Dev.

Platform

Website Desktop and Mobile Responsive.

Responsibility

Ideating features, creating branding identity, designing website, and building the web.

Tools

Figma, WordPress, ElementorPro.

Project Background

My client, Alwin, is a clinical psychologist with thousands of ideas and wild concepts inside his head. He really loves spending his time writing whatever he’s thinking and sharing it with people. That is why a personal blog site would suit his needs.

Project Overview

He wanted a simple blog site to start, so I offered to build it from the design phase through the development of the website. First, he provided some examples of the article websites he desired. Based on his references and requirements, I took notes on some features that could be useful to him and feasible for me to develop. Then, I proceeded to design the hi-fi in Figma and discussed it with him. Not only did I create the interface, but he also wanted to have a logo and a portrait illustration of himself. After making several changes to the design, I started developing it using Elementor Pro in WordPress.

Understanding Needs

His writing topics vary, but he did not yet figure out how to categorize them. Therefore, he preferred to leave all his writings uncategorized for now. Through his writings, he hoped to find many people interested in collaborating with him, such as individuals keen on doing projects or writing together. Initially, his friends would probably be the primary users, most of whom sometimes browse using their phones, so building a mobile-responsive version is necessary. Considering all of these aspects, my job was to ensure that users can easily read the articles and reach out to Alwin for collaboration, whether from a desktop or a mobile device.

Building The Identity

Although this is a personal website, it still needs a solid identity so that people can remember it. First, I needed to determine the colors. I took an easy approach by asking about his favorite colors and the vibes he wanted to convey. He loves earth-tone colors and wants to portray tranquility on the website. So, I went with some turquoise shades and dark cool tones.

Done with the colors, he wanted to name the website. The brainstorming process to determine the name was quite interesting. We played with some words and tried to find the best mix of words that people would remember. Eventually, we came up with “be.thought”. In English, it has a sort of meaning related to thinking deeply about something. Meanwhile, in Indonesian, it could be mistakenly read as “betot”, meaning “pull hard”. By combining both meanings, it conveys the idea of thinking about something in a profound and intense manner.

I used all of those identity aspects as a base to build the website’s logo and the components library. As for the logo, he wanted a simple design that conveys tranquility and a contemplative mindset. To create the logo, I began by looking at some references and sketching out ideas. Then, we discussed the sketches and selected one. After that, I proceeded to refine and finalize the logo with some revisions.

Designing The Website

To fulfill his needs and cater to the users, we agreed to start with three pages (Home, Journals, and About Me). This website will provide many articles, so a light-mode color scheme would be the best fit. Light mode helps users read more easily and quickly. Regarding the language, it was decided to be a mix of English and Indonesian. Since this is a personal website, using both languages for the content may help the author (Alwin) express his messages better.

Even though this design was supposed to be simple, creating a design system was still important to me. I developed a simple design system with a set of colors, fonts, and components. It might not be extensive, but it was sufficient to maintain consistency.

After exploring some references, I created a simple wireframe and continued with the Hi-Fi design. While reviewing and discussing my design, Alwin also completed the copy. Once everything was finished, it was time for me to build the website.

Building The Website

I built the website using WordPress and Elementor Pro. I didn’t really need to code because, with these tools, I can build any website by simply dragging and dropping the widgets. The widgets are customizable and can be edited using code if needed. These are the results after I finished building it.

Home

Not only does it showcase his newest writings, but it also creates the users’ first impression of him. I provided him with some spaces to express his messages using body copy and quote block.

Journals

It is a page dedicated to showing all of his writings. For now, the list of articles will be loaded using the lazy load system for a faster loading process. So users can just scroll down easily and wait for it to load in a second, no need to change the page.

Article

It is a page where people can read his writings. Users can easily share the article using the share icon button. At the end of the article, users can find the references. And at the bottom of the page, there will be 3 recommended articles for users to continue reading. By doing this, hopefully, users will be interested in reading more articles and, eventually, it can increase the website’s average screen time, which will also improve the SEO.

About Me

This page is dedicated to providing a short introduction about Alwin to assure people that they can connect or collaborate with him. To give it a unique and artsy vibe, I also drew an illustration of him. Additionally, there is a clickable email address that can help users write an email to him right away.

Mobile Responsive

There’s a significant chance that many people will access the websites through their smartphones. Therefore, building mobile responsiveness is a must! Here’s a view of how the mobile responsiveness.

It's a Wrap!

This project was really fun because I got a chance to explore not only the UI design but also the concept, logo, website name, theme, etc. Not only that, I really enjoyed the brainstorming process because I was able to discuss it with someone who had so many ideas and was keen to know our ideas too. Additionally, I could also sharpen my website-building technical skills. There will be upcoming improvements so that many people can benefit from this website.

Don’t forget to visit the website here at alwinmreza.com !