Building a portfolio website
As part of the webmedia paper, we were asked to build a static website displaying attributes of agile technology. The objective of the site was also to incorporate appropriate user stories and display ux, ui and ixd best practices. This blog will discuss how the project was implemented.
At the planning and conception stage, considerable research was done to look at the features of other portfolio sites. A website called toggl was used to keep a track on the time spent on building the website. I also looked at the templates on webflow and their structural hierarchies.
A Trello board was used to list the different functions to be included, personas (i.e. the targeted audience for the website), content (i.e. what information and sections the site should include). There was also a section on user stories which listed the what the website expected the visitors to do on the site. It also included a section on execution where ideas for the look and feel of the website was listed. The inspirations for the site were also listed in a separate column.
The mockups of the proposed site was then drawn up on the balsamiq platform. It included a basic idea of the links and placement of the content and design of the pages. These mockups were guided by the intended user stories.
Here is a mockup of the home page. The intension here is to gradually introduce the visitor to the site, try and control the bounce rate and give the visitor links to all possible sections of the site as well as external links to the social media websites. The homepage will cover the entire screen of the computer and there is no scroll element on the site so the user has to click on the different tabs to go to the different sections. A button called ‘check out my story’ has been included here to take the user directly to the projects page. This is particularly important since the target audience are recruiters or people looking to hire writers or social media campaign managers.
The next is the ‘about me’ page. Here again the header i.e. the navigation bar and the footer containing the social media icons have been maintained so the user can change their mind and move to different sections if needed. Also, the into text on the page is minimal and it is linked to the projects page again with the same prominent yellow button.
This is an important page of the site since it lists the projects and links to more information and details on each section. It also has a link to the cv which the user may want to view and download. Meanwhile, the navigation bar and the links to social media icons in the footer remain constant as other pages of the website.
This is the last page on this 4-page website. It includes a form for people to get in touch and other icons that are on the other pages of the site.
The Trello board was updated as the project progressed. and cards were moved to the ‘Done’ section.
A little over 42 hours was spent on the project. The time was recorded from conception to the publication of the site. Here are the snapshots from the Toggl website.