Reflection

The process of building a website has to start with a solid idea. However, the process of building a good, effective and usable website has to start not only with a solid idea, but also with a clear purpose. A purpose-driven website considers other factors apart from web design and visual aesthetic. It takes into consideration the intention of why the website is created in the first place as well as who is it for. The overall experience is the main priority when building a usable and effective website.


For this assessment, I have decided to create my own website that features my online portfolio of my photography and videography projects. The purpose of my website is to showcase my work and skills to potential clients and future employers. Hence, I have taken into consideration my website’s structure and usability based on my target users. Going through the process of building a website has given me a better understanding of the workflow of developing and designing websites in the actual practice. I have learned the importance of creating multiple mock-ups and paper prototypes before moving on to actually making it in the computer. Before solidifying the structure and design of my website, I had to go through several changes and tweaks.

 

Sample webpages from Paper prototype/Mock-up 1

 

Creating paper prototypes is also a helpful way to see the usability of the design. It is important to take into consideration elements of user experience and user interface at an early stage in order to avoid any inconveniences when building high-fidelity prototypes. After multiple paper prototypes, I have decided to create a mix of a scroll-type homepage and the traditional click through for the other pages. The reason being for this, is that I wanted to focus on information that users would want to know straight away rather than navigating through the website without having a clear direction of what the website is all about. In addition, the scroll-type homepage serves as a guide that orderly shows who I am, what content they can expect to see and how they can get in touch with me. Having a well-planned structure that flows cohesively does not overwhelm the users with information but rather, gives them an enjoyable experience that visually exhibits the website’s purpose.
I proceeded to create my low-fidelity prototypes using Balsamiq. I found Balsamiq to be a helpful and efficient program because it provided ready-made assets for both web and mobile prototyping. This saved me a lot of time and it gave me a great visual representation of how the web page will appear before fully building its high-fidelity version.

 

Low-fidelity prototypes made in Balsamiq

Similar to my paper prototypes, I had to create multiple versions of my low-fidelity prototypes before finalising it. However, I found myself changing a lot of things once I started creating my high-fidelity prototypes in Photoshop. This is because my low-fidelity prototypes did not have the actual content and information but rather it only showed wireframes and placeholder text. As a result, I had to make changes and adjustments so that all my visual elements and information can actually fit and be cohesive as a whole. My low-fidelity prototypes served as a useful tool and basis of what works and what doesn’t as some webpages looked good in the low-fidelity prototype but did not when it came to the high-fidelity ones.

Most of the changes I made were the placement of text and buttons. I had to reconsider where these elements were placed to make it easier for the users to read and click on. I also changed the placement of text information so that it would flow cohesively. Initially, I had the placement of text information in my about page at the left side but I found that most people did not find it visually pleasing. This goes for my contact page as well because I had the text information placed on the right side and my social media links to the left. From a visual perspective, it does not necessarily look bad but it does appear somewhat cluttered. However, the difficulty of reading the information and the unclear placement of buttons were the main reason why I decided to change the website layout.

Another issue I had to deal with was the placement of the portfolio and the digital cv in the homepage. I was decided on making the 2 as separate pages and I wanted to feature both options in the homepage straight away. However, this affected my portfolio because I had photography and videography projects. At first, I wanted to combine both my photos and videos into one page but upon feedback from other people, they preferred it to be separate so that it would be easier to identify. Since I was planning to put portfolio as a stand-alone button in the homepage, this meant that there would be another page dedicated for another 2 buttons (photography and videography) that the users have to choose from. I thought that this would be too much and it felt that it was unnecessary to have another page that would simply be another layer to get to what the users want to see. Moreover, since the purpose of my website is showing it to future employers by providing a link attached to the cv, having a digital cv within the website would be redundant. I decided not to have the digital cv as its own button but rather, place it in the contact page instead. This gave me an idea to focus on the portfolio by having the photography and videography as 2 buttons so that it would be easier to click onto straight away. Also, since my homepage is a scroll-type, I prioritised its navigation by adding the circles at the side to indicate which part of the homepage they are in. The users can also click onto the designated circle to get to which part they want to view more quickly, rather than scrolling all the way up/down. I put a lot of attention and focus on my homepage because it would be the first part of the website that my target users would see. Making sure that the homepage has all the necessary information, visual aesthetic and effective usability makes a lasting impression overall.

Test.png

Original high-fidelity prototype of homepage layout (about, works, contact)

For the mobile version of my website, I wanted it to have the same cohesiveness of information and visual appearance. My mobile homepage is a scroll-type version as well however, I decided to remove the portfolio and contact page because I found it too long to scroll. It appeared too overwhelming with options so as an alternative solution, I made my portfolio, digital cv and contact page as 3 separate buttons instead. I found it easier to structure and design the mobile version because I was working with a smaller screen as well as ensuring it to being simpler than the web version. However, I found it difficult to make adjustments in terms of the sizing of buttons and text because it appeared smaller when I put my high-fidelity prototypes through Invision. Another issue I found is putting the commands in Invision. Since the navigation is done through touch in the mobile version, I had to keep resizing the hotspots because of its sensitivity to touch when scrolling up/down. I found this difficult when creating hotspots for the portfolio because the albums were placed next to each other without any spacing. I resized the hotspots so that it fits the album titles rather than including the album cover as well. Apart from that, I found that building the mobile version was relatively easier and simpler than the web version.

High-fidelity prototype of mobile version

(Right photo: Original layout of portfolio placed in the homepage)

For the mobile version of my website, I wanted it to have the same cohesiveness of information and visual appearance. My mobile homepage is a scroll-type version as well however, I decided to remove the portfolio and contact page because I found it too long to scroll. It appeared too overwhelming with options so as an alternative solution, I made my portfolio, digital cv and contact page as 3 separate buttons instead. I found it easier to structure and design the mobile version because I was working with a smaller screen as well as ensuring it to being simpler than the web version. However, I found it difficult to make adjustments in terms of the sizing of buttons and text because it appeared smaller when I put my high-fidelity prototypes through Invision. Another issue I found is putting the commands in Invision. Since the navigation is done through touch in the mobile version, I had to keep resizing the hotspots because of its sensitivity to touch when scrolling up/down. I found this difficult when creating hotspots for the portfolio because the albums were placed next to each other without any spacing. I resized the hotspots so that it fits the album titles rather than including the album cover as well. Apart from that, I found that building the mobile version was relatively easier and simpler than the web version.

Putting my low-fidelity and high-fidelity prototypes through Invision was quite straightforward and easy to do. However, one issue I found is that Invision didn’t have a feature that would allow me to place a hotspot in a specific area in my homepage. Since my about, portfolio and contact were all placed in the homepage, I could not redirect it to their designated areas upon clicking the hamburger menu button. I tried to figure out a way to make it work but I couldn’t do it without exporting the hamburger menu image on top of the homepage image and redirecting it into 4 different pages. Another issue I found with Invision is whenever I review and re-check my web prototype, certain hotspots that I have already positioned seemed to move further down. I’m not sure if it was my placement or if it was a bug/glitch from Invision’s end.

kkk.PNG

Positioning a hotspot on the same screen in Invision

Overall, I have enjoyed the process of building and designing my website. I have a better understanding of why UX and UI should be at the foundation of the website in order for it to be effective and usable. I also enjoyed using Balsamiq and Invision, which are both programs that are widely used in the industry. Having at least familiarity with these programs is a good advantage especially since I am aiming to be more competent in UX design and web development. If I had another opportunity to create another website, I would have loved to redesign the AT online top-up website. Initially, I wanted to do this as well but due to time constraints, I decided to stick with creating an online portfolio since I already had past works which would be convenient for me since I own the rights of the content. Moreover, I made sure that even if I created a portfolio, it would still have a purpose and that I can use it when applying for jobs in the future. Although this is only the first few stages of the process, I am looking forward to learning more about web design and development to further enhance my skillset and knowledge.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s