My Website - Design Process & Brand Guidelines

Please click on the video below to see examples of my best areas of my website.

Design process and outcome for my own online business and portfolio website

Independent Designer

Jasmin Khalique

Year Created

Completed in 2023

Website Builder

Readymag.com

Introduction

Hello, I'm Jasmin Khalique, a skilled graphic designer and independent freelancer running a creative business. My project focuses on offering diverse creative services, including logo design, digital illustrations, card invitations, paintings, and brand & logo identity, along with website development. I bring ideas to life through captivating visuals and exceptional design.

Aims & Objectives

My goal is to create a website that showcases my work, particularly focusing on my design projects. This website will serve as both a portfolio and a business platform, featuring an online shop to sell my artwork. I aim for the website to reflect my diverse skillset in graphic design, digital art, and more, providing a detailed and immersive experience for visitors.

Plan to build the website

I devised a plan for building my website with a strong emphasis on content organisation. This involved categorising content, creating a mind map, and sketching basic user experience (UX) layouts. By employing various techniques and careful thought, I ensured the content remains relevant and streamlined. These steps are guiding me toward shaping the overall website structure.

Click on the images above to access a larger view of the corresponding section below.

Prototype process

I developed a prototype to guide me in creating and structuring my website. This prototype establishes connections between pages and buttons, aiding in navigation and highlighting areas that require focus and further development.

Please be sure to click on the video link below to view the wireframe in action.

Here is a clearer version of the prototype pages, menubar, and footer without the wireframe.

Visual aspects

In terms of finding visual inspiration and developing the visual aspects of the website, I've created a list of adjectives that describe my website. This list helps guide me toward the visual style I aim to achieve. I've ensured that the design reflects my personality at its core. I've also explored top inspirations and various design influences, although I've only listed the main ones.

Audience perception survey

I conducted a detailed survey focusing on teenagers, younger adults, and middle-aged adults to thoroughly analyse my website. The aim was to identify pain points and areas requiring improvement. This analysis provided valuable insights into potential enhancements for improving the overall user experience and effectiveness of the website.

User-feedback graph analysis

The bar graph shows user feedback on website improvements, highlighting the importance of enhancing creativity and visual appeal for a standout website. Users also prioritise improving functionality, performance, and website structure. This feedback, while mostly positive, helped identify key areas for improvement and guided a detailed analysis to enhance the overall user experience and website effectiveness.

Survey results and feedback reflection

After reflecting on the survey results and personal feedback from users, it really helped me to improve my website further in terms of making it more user-friendly and appealing to them. I carefully considered the results and feedback and implemented developments. Overall, it was instrumental in elevating my website and giving it that extra push. Based on the responses I received and the opinions from people in the survey, I formulated ideas on how to make changes to the website, following the personal feedback from Jane, Salter, and Helen.

Key improvements

After reflecting and brainstorming new ideas, I made improvements to my website, focusing mainly on structure, functionality, and creativity. These aspects helped elevate my website's performance. Additionally, I used feedback from Jane, Salter, and Helen to enhance my website significantly with three main developments explained in the following sections.

Redirection link

Jane's feedback was about making it more evident that there is a print option available for users interested in my artwork, especially since it may be pricey for them. Therefore, I used this feedback from Jane to improve the art payment page. I included a redirection link with a caption encouraging users to look for a cheaper option, and the link directs them to the print page where cheaper versions are available.

Core website improvement areas

Salter's feedback was crucial as it directed my attention to core aspects: Navigation, Functionality, Consistency, and Usability. I utilised these areas to enhance the website's performance. Ensuring consistency in elements such as font size and colours was a priority. Additionally, I focused on improving functionality and usability to enhance the overall user experience.

Improving navigation was my top focus. Implementing arrow buttons and streamlining pathways enhanced user experience and site usability, leading to significant improvements overall.

Vector-based animations

Helen's feedback inspired me to add motion to my website, leading to the creation of vector animations. I sketched out the animations and refined them using ReadyMag's animation feature, maintaining a consistent style with minimalistic vectors and subtle movements. These animations are related to different topics and sections on my website, enhancing its overall creativity and user experience.