Experience with building a personal website
Last Wednesday, I shared the first issue of my weekly wrap-up, which focused on personal websites. At that time, I started coding my website and portfolio. Today, I'm sharing some of my experiences before I started designing and building my website. I'm still not done with development, but I will share my process in the design part.
📝 My process
To be honest, I start from scratch when working on my website and portfolio, treating it as a new design project or side project. Before I begin coding, I take some initial steps like understanding who will be my audience, doing some research to determine if I need to follow new trends, and deciding if I should use no-code tools like Framer and Webflow. I also define my reasons for building a new one. Then, I try to generate ideas by sketching some initial drafts. Finally, I test the portfolio with others, often seeking feedback from my network and friends.
The process I used was almost the same as the design thinking framework. But why I will take more time to do that thing in my portfolio? The answer to this is always to treat my portfolio as a new design project, even if it is a re-design.
So what is Design Thinking (DT)?
Design thinking is a non-linear, iterative process that teams use to understand users, challenge assumptions, redefine problems, and create innovative solutions to prototype and test. It is most useful to tackle ill-defined or unknown problems and involves five phases: Empathize, Define, Ideate, Prototype, and Test.
The five stages of design thinking, according to the d.school, are:
Stage 1: Empathize— Know your audience
Stage 2: Define— Clearly articulate your purpose
Stage 3: Ideate— Brainstorm creative solutions
Stage 4: Prototype— Bring ideas to life
Stage 5: Test— Gather feedback and iterate
Let's use a design thinking framework to build a website or portfolio.
Stage 1: Empathize— Know your Audience
At this phase, I identify my intended audience. I consider the individuals who will access my website and their specific requirements and preferences. This includes hiring managers, recruiters, potential clients, or even just a random person.
In summary, these two or three personas are the most likely audience for my portfolio.
Potential opportunities: Targeting headhunters, recruiters, or hiring managers.
Reviewing your process and case studies.
It may be challenging to review your work and make hiring decisions.
Prefer a clean and professional design aesthetic or Visuals hold significance for them
Want to see well-organized and easy-to-navigate portfolios
Value clear and concise information about your skills, experience, and achievements.
Potential clients: who are interested in my services and want to see examples of my work.
Value original and inventive solutions for their challenges
Appreciate a portfolio that showcases a diverse range of projects
Interested in seeing your portfolio to assess your style, creativity, and the quality of your work
Look for portfolios that demonstrate a deep understanding of their industry or specific needs
Value clear communication about your services and pricing
Want to see testimonials or case studies from previous clients.
Other individuals: Peers in the design field or professionals within the industry who may want to collaborate or network. Alternatively, someone might come across your work on social media.
May be interested in the latest developments and progress at work
They seek inspiration and fresh ideas for their own projects
Eager to gain knowledge from my methods and strategies
Possibly interested in sharing or teaming up on projects
May consider connecting with individuals who have similar interests in order to expand their professional network
Recently came across your profile on social media and would love to connect with you.
Now that we know part of my audience, I need to carry out some research, which is also an essential step before starting the design project. Researching my audience's needs and preferences will help me create a website that effectively communicates my skills and attracts the right attention. By conducting thorough research on my target audience, I can align my website design with their preferences.
After completing the research, I take into account several other important steps:
Desired position and target industry: If you are interested in working with design systems and financial technologies, focus on highlighting your expertise and experience in these areas. But if you don't have enough, just put it in the last part.
Analyzing other portfolios: Identify other design professionals who work in the same area and see what they are doing on their websites. Look for opportunities to differentiate yourself and provide unique value to your audience. Create a board with what you like and don't like.
Your goals and objectives: My aim is to create a blog and share a curated reading list, with the goal of sharing my expertise in design systems and providing valuable resources and tips based on my experience.
Finalize the content and structure of the website: Finalize the pages and structure of your website based on the research. Consider the layout, navigation, and overall user experience. Ensure that the website is user-friendly and easy to navigate, with clear calls to action for visitors to engage with your content or contact you.
Stage 2: Define— Clearly articulate your purpose
After I know who I'm targeting, I should find out what they want and what problems they face. Recruiters might want to quickly evaluate my abilities and experience, while potential clients may be interested in the specific types of projects or expertise I have. Knowing these requirements will help me customize my portfolio accordingly.
Based on my analysis of the audience and thorough research, I have identified four primary goals for building my website:
It's all about me: One of my main goals is to create a platform that effectively showcases my skills, experience, and accomplishments. The objective is to provide visitors with a concise summary of my background and expertise, enabling them to readily grasp the unique value I bring. I aim to make a compelling argument for why I am a suitable choice for potential opportunities.
Showcasing my projects and process: In addition to showing the final products of my work, I understand how important it is to explain my design process for each project in detail. This transparency helps potential clients or employers understand how I approach design, problem-solving, and creativity. By not only displaying the outcomes but also sharing the journey, I hope to stand out in a competitive field and create a story that connects with people who appreciate a careful and strategic design process.
Focus on creating valuable content: In addition to a fixed portfolio, I imagine my website as an interactive space that provides more than just displaying my work. A special blog will serve as a platform to share my experiences, curate reading lists, give tips, and provide thoughtful commentary related to my expertise in the field. This will not only establish me as a respected authority but also encourage interaction with my audience. By encouraging discussions, seeking feedback on my content, and actively participating in conversations within my industry, I can build a community around my brand.
Easy to navigate: With a focus on creating an easy-to-use website, my goal is to make sure that visitors can navigate through it without any trouble. The design will be simple and intuitive, allowing users to find the information they need easily. I will organize the sections of my portfolio, blog, and other content in a way that makes it user-friendly. By reducing any obstacles and making it accessible, I want to create an environment where visitors can fully engage with the content I offer.
To summarize, when I define the purpose of my website, I need to understand what my audience wants and set clear objectives that match their needs. By creating a visually appealing and strategically designed platform, I can create a website that not only displays my abilities but also connects with my target audience.
Project / Case study structure
Well, I learned about this structure from Budi Tantrim on how to structure a case study. You can check out his blog post for more information. I have been following this structure ever since I started my career as a UI Designer.
Title of case studies - I prefer a longer title with context, such as "A social chat and audio app for mental health awareness," instead of a simplified title like "A mobile app for MedingTree.”
Client/Company name, Duration & Year started this project
Challenges about this project
Context - Why this project started? What was the initial hypothesis?
My role like include what you did in this project
Research like User’s persona and User’s journey
Problem - What was the problem?
Approach - What was the approach you took in the project? like Information architecture and wireframe sketches
Output - How was the output or artifacts look like? like breakdown of each screens with final prototype
Outcome - What was the impact on the customer and the business?
Lesson learned and shoutout that team that you worked
Website structure
Well, for the structure, it's really simple. But here's what I did for now, and I'd like to add shortcut keys for each page to facilitate navigation for my audience.
Home - I started by introducing myself with a photo. After that, I presented some selected case studies and highlighted a chosen blog post.
About - I want to include my work experience timeline, volunteer work, speaking engagements, and my design process for potential freelance projects or side gigs.
Projects - All case studies are currently available, including those that are scheduled for release in the future. It is also possible to showcase projects that are subject to a Non-Disclosure Agreement (NDA), but access may be required.
Writing - Currently, I am publishing my writing on Substack. However, I would like to provide a preview of my content so that when users click on it, they will be redirected to my Substack page.
Resources - Like bookmarks with categories or tags, podcasts that I listen to from the Philippines and internationally, newsletters that I read and highly recommend, and others for things like tools, books, and other resources that I think might be helpful for my audience.
Contacts - Well, that's just a list of my social media and email addresses, but I don't plan on adding any forms or contact forms to minimize spam.
Stage 3: Ideate— Brainstorm creative solutions
Now that I know what my audience wants, it's time to think of new ideas to meet those needs. This means questioning assumptions and being creative to make a unique and impressive portfolio that makes me stand out from others in my field.
In this stage, we will come up with ideas for how the site should look, its structure, and navigation. Here are some things to keep in mind when brainstorming:
You need to make a good impression at first sight
Design a beautiful website that catches visitors' attention and reflects your style and personality. You can also try the following to make it even better:
Try different designs: Test out different ways of organizing your website's content and design elements to find the layout that looks the best and is easy for users to navigate.
Make your website mobile-friendly: As more people use mobile devices to browse the internet, it's important to ensure that your website works well on different screen sizes and provides a good user experience on all devices. To create my own website, I did research on my target audience and what they want.
Clear and readable fonts: Select fonts that look good and are easy to read. Use typography hierarchy to direct users' focus and make the content easy to scan for improved readability.
Making things easy to use for everyone is important
Make the website accessible to everyone, including people with disabilities. This means adding features that make it easy to navigate and use for everyone, no matter their abilities.
To ensure website accessibility, focus on the following tips:
Alt Text: Adding descriptive text for images on your website is important. Alt text gives a written description of the image, helping people who are visually impaired or unable to see it understand what it is.
Contrast: Make sure there is a clear difference between the text and background colors to make it easy to read. Use colors that have enough contrast for the text to be visible and clear.
Font Legibility: When creating your website, focus on making the text easy to read. Select fonts that are clear and use appropriate font sizes.
Keyboard Navigation: Allow effortless navigation without using a mouse. This is especially crucial for people with disabilities or those who prefer using keyboard shortcuts to navigate websites instead of a mouse.
Descriptive Links: Using clear and descriptive labels and descriptions for hyperlinks is important. It helps users understand where the link will take them and what information they can expect.
Transcripts: Transcripts are very important for audio or video content. Including transcripts ensures that everyone can enjoy your audio or video content, no matter their abilities or preferences.
Color Consideration: Some users may not see colors or have trouble telling them apart. Instead, use visual cues such as icons, labels, or patterns in addition to color to effectively convey information.
Accessible Forms: Forms should be easy to use and navigate for everyone, regardless of their abilities or disabilities.
Making your website as your personal space
I want my website to be my own space after seeing Brian Lovin's website and SJ Zhang's website, which really impressed me with their reading list or bookmark resources. But what else can I put on mine? Here are some list i want to put for now
Bookmark - I want to categorize it under design, development, career, portfolios, articles, design system, UI/Figma tips, and general.
Newsletter - Honestly, I start reading newsletters from UX Movement, Budi Tantrim, Better by Design, and more. So, I want to list all the newsletters I am currently reading and also some that I recommend.
Podcasts - I want to include some Filipino and international podcasts that I used to listen to a lot while commuting.
Others - In this section, I would like to include random things such as the book I am currently reading and recommend, new tools, useful links, and it might be beneficial to add affiliate links.
After all brainstorm
For accessibility reasons, I can only implement this part once I start the development. However, I usually rely on pencil and paper for creating rough sketches and low-fidelity wireframes. Once I'm done with that, I begin creating a semi-high fidelity wireframe using Figma. Since I already have an idea of the desired structure, my main focus is on organizing the content. As for the layout, it's similar to my current one, but I aim to make it feel more like a dashboard.
Stage 4: Prototype— Bring ideas to life
In this stage, I began with a Figma prototype. I didn't want to spend time on coding or usio code solutions at the moment. I just wanted to validate my website. I am aware that I am currently in this phase (since i started to development) and need to iterate more, especially by improving accessibility.
Why Figma prototype?
Well, it's easy to update once I receive feedback. Nothing more, nothing less. This allows me to iterate faster, as my designs are constantly evolving from version 1 to version 5.
Stage 5: Test— Gather feedback and iterate
During this stage, I will ask for feedback on my website and portfolio, particularly on the structure of the case studies. I understand the importance of feedback in the design process as it helps me make necessary improvements and refine my work. By incorporating feedback, I can make sure that my designs meet the needs and expectations of my audience. It's a continuous process of gathering feedback, making updates, and iterating until I achieve the desired outcome.
So how i did?
I use Useberry tools. What I did was the Five second test, where I asked participants to look at my portfolio within a 5-second time interval and remember as much as they can. However, the results are mostly random.
2 out of 10 participants noticed the sidebar with shortcut numbers.
5 out of 10 participants noticed the big introductory text and my photo.
3 out of 10 participants noticed the navigation.
So far, I am happy with the result.
The second test was the Single task test, where I asked participants to navigate to my case studies. They easily understood that the "Projects" section is also a list of case studies.
How do i get the participants
Mostly, I ask my network, which includes a friend in a different field who works in HR, and my mentor (who was my manager when I worked in Print design). You can also reach out to other professionals on LinkedIn. Another helpful resource is ADPList.
Feedback from the structure of my case studies
The feedback I received is that it's too long and needs to be more visual and less written, which I understand. However, the length really depends on the scope of the projects. Regarding the structure of my case studies, as I mentioned before, I based it on the Project / Case study structure shared by Budi Tantrim.
Feedback from the resources section
Out of the 10 participants, 8 expressed curiosity about the resources I have. As a result, I asked them for their thoughts on this section. The response I received was that it's a curated collection of various resources. I then explained my goal, and they were amazed by it.
The next step
Now I successfully done using design thinking my next step is implement it with front-end development. Maybe i will create another post for the next step and some resources that i can share you can also review my first issue of weekly wrap-up to get some inspiration. Also don’t forget to join from my first issue i’m giving a way of one pdf only book of That portfolio book.
🙌🏻 That all for now!
First, I want to thank you for reading this. I know it's quite long, but I want to plan it in stages. However, I'm not sure if this is a good idea since I want to ensure that I finish every piece of writing I start. Sorry if i can’t show the whole flow but once i’m done with development i will also share the Figma prototype presentation.