Above are my homepage, a zoomed-in portion of my homepage and the top of my Rebrand case study page. The overall feedback for my portfolio website was really positive. However, I was advised to consider making the following changes. The first concern highlighted to me was the use of a hamburger icon instead of a normal top nav with links listed across the top of the page. I chose to use a hamburger menu instead of a normal top nav as I had seen this being done on design studio sites such as IDEO. I thought this looked really clean and minimal. I, therefore, decided to include a dropdown nav for purely aesthetic reasons. This was not a good reason for the design choice. On further review, IDEO has loads of links included in their drop-down nav while I only had 4 links included in my drop down nav.
Hiding information away is an approach strongly advised against by Joe Leech stating that it’s “not how good design works”. In the above example, MoMA wanted to sell more tickets and reduce queuing outside events. Their original website was seen on mobile as shown on the left. Leech by simply removing the hamburger menu and displaying the menu options was able to improve ticket sales and store sales. This to me clearly demonstrates the benefits of not hiding my menu options away in a hamburger menu particularly on desktop where there was no need to do so. I am still however moving forward with the hamburger menu option on mobile. This is due to the fact that all of the navigational options presented in the menu can be found on the homepage as well.
I was also advised to include the title of my lead case study and I was able to have a conversation around the possibility of including a “Feature Case Study” subtitle. In addition, It was suggested that I add a button to the hero section of my website that would navigate the user to my work (by scrolling down the page). I was also advised to experiment with highlighting my roles in each case study by changing the colour of the type.
Above are mobile mock-ups. As it is recommended that designers design mobile-first this is the approach I have taken in my mockups. I drew from wireframes that I had created and when I felt elements didn’t fit I swapped them out and explored other options. One of the biggest issues I faced on mobile was that the information seemed really dense. I was concerned this would be offputting and a little overwhelming for the user. I tried to resolve this issue by increasing the space between sections and adding line rules between major sections. I also played about with line heights on text, getting this right was particularly important and this impacts readability. Another consideration I made throughout the above mock-ups was whether to make images fullscreen width or to keep a particular amount of padding on either side. I decided to go for a blend of both options. When images were particularly detailed, generally relating to research and development, I made them fullscreen width. When images were less detailed I included padding on either side.
In my desktop mock-ups, I was able to present a clearer hierarchy of information, particularly on my homepage. I increased the size of my “Feature Project” image and had the case studies below present in a blend of two-column and one column layouts with larger margins on either side. I was really pleased with this outcome as I feel it effectively promotes the case studies which I believe present the best work and process. As seen in both my mobile and desktop layouts I have selected a light blue colour to create a box to help divide up my page and information I want to draw attention to such as the link to my blog and the problem and solution sections of my case studies.
At the bottom of each case study, I decided to include two projects/ case studies for the user to select from. I felt this was a good approach used by Dawson Andrews as it allows the user to still have a choice without there being too much choice, see The Jam Experiment.
I also maintained the approach of including a contact me section at the bottom of every page as if it were part of the footer as I feel this is a really important section and I want it to be readily accessible no matter what page the user is on.
I considered factors such as the inclusion of icons. On completing the content audit of my original portfolio website I had considered removing all icons even including social media icons. I experimented with both approaches when creating the above mock-ups and really liked the cleanness and clarity of text over icons. I, therefore, decided to remove the icons used in my original website.
Finally, when redesigning my footer my primary concern was the inclusion of my monogram and a secondary nav. I decided on a two-column layout with a left alignment on the left column and a right alignment on the right column. I was very please with this outcome as I achieved the balance I was looking for.