Final Major Project

Critical Review

I have come so far since starting this MA; I went from learning the basics of HTML and CSS on CodeAcademy (2018) over the summer before starting, to being able to build finished, responsive websites. Throughout my degree, I contemplated multiple topics for my final project, including finishing the e-commerce website I had started to design and build for Lily Howell in Semester 1. When it came around to starting the final project research proposal module, I realised that it would be difficult to write a proposal on something I had already half-finished and decided to move away from my original idea. My main area of focus was around Web and UX Design, but I was unsure of where to take it. I had thought about social media mainly from the research proposal perspective, but moved away from this area as I struggled to then think of what the final project could include.

Initial Ideas

It was when I realised that I had to start thinking about getting a full-time career that I realised where I could take my final project. The portfolio I had was not quite up to scratch and this was a project that would not only use my skills and knowledge but also help me reach my final end goal of getting a career in UX or Graphic Design. It also meant that I could exlore an interesting topic in my research proposal.

Final Ideas

Introduction

For my Final Major Project I wanted to design and create an interactive portfolio without learning any new code and building on my current knowledge. The final outcome was my own personal website which contained my best pieces of work and interactive sections to improve user experience. To achieve this, I set myself a number of goals and areas I needed to research and develop ideas:

- Identify my Target Audience
- Create a Site Map
- Form initial ideas and designs
- Use these ideas to form wireframes
- Research Design Theory and put together branding guidelines for my portfolio
- Design and create a logo
- Design and create icons, some of which are animated
- Research hosting and follow this process
- Test my website

Module Outline Brief and Mind Map

Design Research

Target Audience

The target audience for my final project is potential employers for jobs that I am interested in. My portfolio needs to show that I am capable of doing that particular type of work and that I possess the skills required by the job specification. The target audience needs are fairly simple: they need to find everything they need to make a decision and find it quickly. They want to know who you are, what skills you possess, your experiences and abilities shown through project examples, and how to contact you. Their main concern is whether your portfolio matches the CV you have sent and whether, collectively, they match their job description.

Target Audience

With some research into UX portfolios specifically, I found useful information that influenced the way I created this portfolio. The emphasis was on showing the process of a project, starting with the problem and working through your process of overcoming that problem leading to the final outcome (Cotterill, 2017).


“Hiring managers usually have a very limited time to look through portfolios. You should have a portfolio that allows a manager to look through your work in 30 to 60 seconds and know what projects you’ve worked on, get inside your mind, and know how you solve problems” (Cotterill, 2017).


Another important part of a UX portfolio is actually testing it with others as you would with any other project. This could be getting volunteers to complete small tasks to find crucial information and time how long it takes them (Cotterill, 2017).

Target Audience

Another piece of research that I did was primary research studying the job descriptions of User Experience Jobs and what skills/software/abilities were required. Not only does this help myself visualise where I fit into this industry, but it also helps inform my portfolio to display work and skills that employers are looking for.

Job Descriptions

User research was crucial to this project to show that I can complete a UX process to understand my users and their requirements. After doing my research into who my target audience is and what they are looking for, I moved on to creating two User Personas. They were very different from one another and reflected the slightly different job roles I would be applying for. If my portfolio satisfies their goals then I have achieved the aims and objectives of this project.

User Personas

I also looked at User Journey, looking specifically at UX design as this is the main area I wanted to get in to. The journey starts with their purpose and why they need this job role to be filled, going through every stage of the employment process. I highlighted that my final project needs to be focussed around the very first part of that process, as this is when I need to impress potential employers and end up in their shortlist.

User Journey

After all of that research on my users, I looked at things that they would look for specifically on a portfolio and questions they might ask. I aim to fulfil most of these questions with my portfolio as this will increase my chances of employability.

Things Employers Look For

AirBnB Design Systems

I find AirBnB very inspiring with the design work that they do. I particularly like their Design System, laying down the foundations first and then creating components that can be used for multiple things and changed without breaking the design or the functionality of their site (Saarinen, n.d.). The process begins with defining the brand guidelines: the typography, colour palette, icons and spacing. You then create components using these guidelines that can co-exist with others and evolve independently (Saarinen, n.d.).


“A unified design language should not just be a set of static rules and individual atoms, but an evolving ecosystem” (Saarinen, n.d.).


With a design system, you can focus more on user experiences. With this research and knowledge, my portfolio will be designed in components that can be altered in the future without breaking the rest of the website. This will allow me to update my portfolio and allow it to evolve as I learn more and gain more experience in the area I am in.

AirBnB Design Research

Hierarchy of Needs

Abraham Maslow created a model that represented human needs and how we must fulfil the most fundamental needs before others: a hierarchy from the most basic to the most complex (Interaction Design Foundation, 2017). This model can be applied to design and coding projects to ensure that the basic requirements are met before the website is made to be interactive and fun to use.

Design Hierarchy

With regards to User Experience, there are also fundamental needs that must be met before the website adds in creativity and aesthetics. For example, users must be able to use the website and fulfil the basic needs of a website before it enables a user to do or achieve more by using it.

Design Hierarchy

Examples

From the start of my MA I have particularly liked one specific portfolio by Denise Chandler (2017). This has been a big inspiration of my work and has continued to be through my final project. The one thing I really like about this portfolio is that it is themed and includes icons from that theme: nautical. The navigation bar was also very nice with how it blends into the background and becomes more obvious as a “bar” as you scroll down the page. If I were to improve the portfolio and make it “mine”, I would add some interactivity such as icons that move when you hover over them and buttons that have eye-catching effects on them.

Denise's Portfolio Homepage

When starting this project and finding examples of other peoples’ work I stumbled across an interactive infographic website that I thought was incredible and had made good use of interactive elements. The scrolling effects catch the eye immediately and show multiple ways you can use it; for example, the “0’s and 1’s” falling into someone’s head and the cars that look like they are driving in the background. This is the kind of interactivity I would like to add to my own portfolio: scrolling backgrounds, moving graphics and animated icons when you hover over them.

Why we crave infographics

Another interactive website that stood out to me was a personal portfolio by Robby Leonardi (n.d.). Although a different kind of interactivity, it was still inspiring and had elements that could influence my work. For example, animations that occur when you reach a certain point on the page and the fireworks at the end reflecting the completion of a video game with options to connect on social media or contact the person directly.

Robby's Portfolio

Development of Ideas

Site Map

Although this isn’t a very large website, I thought it was still important to draw out a site map for the project so that I was clear how the pages were linked. The one thing I had not considered were the individual project pages that contain all the write-ups, however this would not make too much of a difference to the layout. I also considered linking to my blog but then due to not using it throughout the entire year, I decided to leave it out and only link to it in the relevant projects.

Site Map

Wireframes

Rather than taking a mobile-first approach, I wanted to design my portfolio so that it was adaptable to smaller screens. This was because I was aware that most employers will probably look at my portfolio on their computer at work rather than on their mobile in their personal time. It was still important for it to be designed to fit mobile screens, but not designed for mobile first.

As I already had a portfolio, designing a new one was easier because I already had the foundations to start with and to improve. I had also tested new ideas on a new portfolio at the start of this project, which then heavily influenced the work I have done.

The first thing I did was draw my initial ideas in my sketchbook reflecting on the designs I had already tested on my portfolio. I thought about what each of the designs could be used for and whether they have any animated effects on hover. I also considered the menu buttons and the effects they could have.

Initial Ideas

There was one section that I had not included in my previous portfolios, which was a section that highlighted my skills and software that I have experience with. I originally thought of a tool belt that had hover effects to show my different skills and experiences, however this idea didn’t really fit the design of the rest of the portfolio. I then thought of just listing the skills with animated icons and brief descriptions but found that this wasn’t descriptive enough and there is potentially another way to display the information. Similar to the tool belt, I also thought about a graphic of a laptop with icons on the screen showing the software I use and with hover effects to show a description. This idea seemed really great until I thought about how long it would take me to do that one section and it was something that I had never really done before. It also goes against what I aimed to achieve with this final project, which is to build an interactive portfolio without learning anything new and using resources online to add interactivity to the webpage.

Skills Design

I decided to research what other people do on their personal websites and found that most people use a bar or a star rating on a scale. However, I found that this isn’t particularly helpful to employers because my 60% efficiency in Adobe Illustrator could be someone else’s 40% (Rocheleau, 2017). Therefore, this section needs to be descriptive and use a different scale to display my abilities more clearly.

My favourite example of someone who does the two things I mentioned above is Livius Cristian Ghiban’s portfolio that lists skills with the number of years experience and the number of projects that have used that particular skill (Rocheleau, 2017). It is also important to display the skills that employers are looking for, as they will be able to make a better decision on whether to hire me based on a more accurate visualisation of my abilities.

Skills Research

Another issue I had whilst designing this new portfolio was the list of projects and how to style the project outlines. This is because some images are square but others have transparent backgrounds and therefore a circular design wouldn’t work the same for all projects. In the end I tested to see what would look best which was to make square images circular and images with transparent backgrounds are left as they are.

Project List Design

The final part of the designing process was to put together my final ideas and how the individual blocks would fit together. I made sure that I highlighted areas where I could add interactive elements.

Final Ideas Design

I then moved on to create these wireframes on Desktop, Tablet and Mobile.

To view the desktop wireframes, click here.

To view the tablet wireframes, click here.

To view the mobile wireframes, click here.

Logo

Although I have designed and created logos for other projects, I have never thought of a logo for my own personal brand. I therefore had to do some research on the process of designing a personal logo which helped significantly because I didn’t know where to start.

The research I did outlined 9 main points of designing a logo:

  1. Know Yourself
  2. Create a Mood Board
  3. Avoid Cliches
  4. Be Clear
  5. Dust off your Colour Wheel
  6. Custom Type is Key
  7. Keep it Simple
  8. Find the Balance
  9. Be Meaningful
Logo Research

I first focussed on asking myself questions about myself and answering them to better understand who I am as an overview and why I am creating this portfolio in the first place.
Once I had reflected on these questions, I moved on to creating a mood board of all the colours and designs I liked of logos that were similar to what I had imagined.

Know Yourself

Creating the mood board was the easy part, coming up with an idea of a logo was much harder and spread over a couple of pages. There were a few designs that stood out from the rest so I copied these again and mentioned why I liked them.

Mood Board
Logo Designs
Final Logo Designs

I then recreated two of the designs in Adobe Illustrator first using different fonts to see which style looks best.

Logo Ideas 1 Logo Ideas 2 Logo Ideas 3

I didn't like these designs and I struggled to recreate my original designs with a professional look and with an appropriate colour palette. Despite spending so long on this section, I moved away from this type of logo and decided on creating a handwritten logo that just contained my name. I chose a handwritten font on Adobe Typekit, then followed a tutorial to create an animated GIF to make it appear like the text has been written (Kekous Tuts, 2014).

The inspiration I had to create this type of logo was when I found another UX portfolio that had this style of animaton - Melanie Daveid.

Final logo

Refresh to view.

Colour & Typography

Although I have researched colour before, I wanted to explore the meaning behind colour again looking at different design tips. There is a sociology at ‘the heart of colour’. It can make us feel certain emotions; for example, blue indicates peace and tranquillity and yellow represents energy and cheerfulness. Complimentary colours are also on opposite sides of the spectrum – something that is scientific and subjective.

Moving further towards the science behind colour, there are three categories that colour can fall into: pures, shades and tints. The pure colours are usually used in bright designs and are a lot more energetic giving a “cool” appeal. Shades are mixed with black for more dark, mysterious moods and tints are mixed with white to convey lighter, more peaceful feelings.

Finally, it is important to design for diversity by making content as easy to read as possible, for example avoiding neon-yellow on a light-grey background. (Puri, 2004).

Colour Research

For my portfolio, I chose a random colour palette on coolors.co to use as a template. I looked at my personality and words that people would use to describe me and the colours that represent those characteristics. This resulted in a majority of yellow and pink – I also used my favourite colour too because I felt that this would truly reflect my personality.

Portfolio Colour Ideas

I went back onto coolors.co as it is the quickest way to generate colour palettes and focussed on the colours I had chosen. There were two options that were too bright or too dull, so I crossed these out straight away. I then found 3 colour palettes that I thought looked much better with a gold rather than a yellow colour. I then asked friends and family to vote on the one they thought looked the best which meant the third palette came out on top.

Colour Palettes

However, although I had done all that research and even tested the colours on my portfolio, the colours didn’t feel right and I still preferred the colour palette I had used as a template. Although fairly different to other palettes I had put together, it still used the pink/yellow in peach tones which I felt still reflected my personality.

Testing with different colours Testing with different colours Final colours

When it came to typography, this was fairly easy to put together. Firstly, I needed a font that is readable and simple, but not too popular so that it looks like every other website. After doing a bit of research into different Google Fonts, I found a few that would be suitable for my portfolio and decided to print off examples of each one. The theme that I have been following is circles, bubbles and rounded edges – and the fonts that I chose reflected that very much. The font I chose in the end was “Source Sans Pro” as two of the fonts had weirdly designed ‘W’s that I thought would look weird on my portfolio. I also went with a handwritten font to match the other that was used for my logo.

Typography

Graphics and Animated Icons

The first thing I thought of adding to my portfolio based on the design ideas I had so far was animated bubbles. I had a rough idea of how to create these on Adobe Illustrator, but I decided to follow a tutorial to create a higher quality graphic. I then animated the bubbles using the animation cheat sheet, using different classes to create the look that they are floating individually.

Bubbles

I then thought about creating an animation of the bubble popping when the user hovers over a bubble. This was simple, using plain lines and using the "content:()" css to change the image.

Poppped bubbles

The next task was to create icons for each area of design I specialise in, and I wanted the design to change when the user hovered over them. I thought this type of animation would be better as it wouldn't slow down the webpage by having lots of moving objects.

As this project is based on skills I already have, I didn't want to create GIF icons using Adobe Animate or After Effects because I do not have enough knowledge or experience to work on this software. I therefore created new icons using Adobe Illustrator that change when the user hovers over them.

My inspiration for these icons came from an animated GIF found on Google Images that followed a certain style - outlined and one colour scheme.

Inspiration for Icons 1

I had drawn some ideas in my sketchbook, however I mainly went with what I already had as icons and made them my own. I followed the colour scheme for my portfolio and used the same style to complete all icons. They were very easy to make, and matched the rest of the website.

The final result:

User Experience Design
USER EXPERIENCE
User Experience is vital for a project to be successful - from how users interact with your product to how you organise and display your content.
Web Design
WEBSITES
Design is a crucial stage of the development of a website - from wireframing to testing a Hi-Fi prototype.
Graphic Design
GRAPHICS
Unique, hand-drawn illustrations make your product stand out from the crowd.
Design Theory
THEORY
Colour, typography and spacing; features that are crucial in establishing a consistent brand across all platforms.

I then moved on to create icons for the project overview, which will form part of a pop-up overview before a user views the entire project. This will help my users understand what projects I have done without having to read the whole write-up of them. I tried to keep these icons as simple as possible, following the same colour scheme to match my portfolio and something simple to illustrate clearly what they are representing. I used the old placeholder icons from iconmonstr as insipration for my own.

Summary Icons

Coding Development

Navigation Bar

As I stated before, I had already started with the foundations of a portfolio, and the design only needed improving. The first thing I did was use a CodePen.io Pen to improve the navigation so that it was more responsive than the one I had created at the beginning of this project. Once I had copied the html and css, I only had to change the design slightly to fit the rest of my portfolio. This included the font family, colour and spacing.

navigation before new navigation

The main changes were that the navigation bar now spans the entire width of the page and the mobile menu opens when the user clicks rather than hovering over it.

One issue I had with the new navigation bar was the height of the background which caused the bar to have only half fill and I wasn't sure about what line of code was responsible.

Navigation issue

After testing multiple solutions, I finally found a line of code that specified the styling of this background. I then ensured that the height matched the navigation bar and tested it again to make sure I had solved the problem.

Navigation Bar inspection Navigation Bar code

Project Overview Pop-Ups

For the overview, I copied code from this Codepen to add interactivity to the website but also provide a better space for an overview of each project. This meant that users will be able to see what each project is without having to read the entire project. I chose this way of doing it because of the previous research I had done that stated that employers look through a portfolio in 60 seconds (Cotterill, 2017).

Pop Up Example

Skills & Experience section

The first thing I needed to do was select my top skills and experience to add to my portfolio - this was based on the research I did on skills that employers are searching for in job descriptions. I then noted down how many years experience I have in that area and how many projects have used that skill.

To add this section in I created a table with each block containing a skill and the number of years and projects. Using an unordered list, I created the circles that lighten and enlarge on hover.

Creating the skills section on CodePen Creating the section using W3Schools Designing the circles Skills Final

Contact Form

For the contact form, I used TypeForm. This meant I could add a contact form without any code, but still match it to the rest of the portfolio. Once I had create my form using a template, all I had to do was copy the HTML code into my portfolio. The contact form submissions will be sent straight to my email.

Contact Form

Publishing a Website

For my final project, I wanted to publish my website with its own domain name, such as "charlotteseabrook.com". Although I know how to design and develop websites, I have had little experience with actually publishing them. Some quick research gave me access to multiple tutorials, teaching step by step how to publish a website and add a custom domain name. The article I followed was on code.makery (Code.Makery, 2018). This article was very useful because it also gave some recommendations for companies that offer hosting. It was also very easy to follow.

I created a bitbucket account to upload my files into a private repository. This means I can work on my portfolio in the future and push changes straight to my live website. For hosting, I used Netlify, which is a modern service for building, deploying and managing websites. This was the service the article had suggested. I then bought a domain name from GoDaddy, following the tutorial on Netlify to connect my custom domain to my default subdomain. I ran into a few issues here as I didn't know what I was doing despite researching it.

Firstly, my domain name "charlotteseabrook.me" was redirecting to the URL of the hosting page instead, which isn't what I wanted. After looking at the hosting page, I looked at redirecting the page to my primary domain (charlotteseabrook.me). I tried numerous times to make it appear as "charlotteseabrook.me", but I just couldn't do it. I then noticed that on mobile it was showing my custom domain, which then confused me even more.

By testing the website I also noticed a few issues with my portfolio, firstly that I hadn't correctly linked my navigation links on the project pages. This was a simple fix. The other issue that I did not like was the .html at the end of url. I read the tutorial/guide on redirects, which meant I can specify the url that is displayed instead of the file name. With the issues I had already had with the URL, I decided to leave this alone until I understand what I am doing a little bit better.

Testing

Before I made any interactive changes to my portfolio, I applied for numerous UX Design jobs. Some recruiters explained that my lack of experience was my only weakness; however, I was eventually offered a telephone interview, which led to a proper interview. This was for a UX/UI Design role with a company called Pure Cremation. Although I got the job, I still asked for some feedback on the portfolio they had seen.


"I was impressed with the range of project types contained within the portfolio and particularly with the interface for medical professionals, patients and their families.
This project clearly shows a very thoughtful approach towards both functionality and style and a keen interest in real usability for a varied group of clients. This piece demonstrates a real “passion for purpose”, creating an application and user experience that delivers benefits to carers, professionals and patients that goes beyond a fresh approach to accessing and presenting patient data."

Catherine Powell


The other type of testing that I wanted to do was to time how long it takes different people to find certain information that employers would be looking for. However, I did run out of time to do this. You can read more in my reflective process report.

Conclusion

In the end, my final project achieved a lot of things I aimed to acheive. However, there were a few things that were missing and that I struggled to fix with a lack of experience. In my proposal, I stated that I wanted to create a portfolio using the skills and knowledge I already had without learning anything new - this meant that I did not want to waste time learning how to fix the more difficult issues. There were also other interactive elements, such as icons that move as you scroll, which I had attempted to implement but my lack of knowledge in JavaScript meant I couldn't add it to my work. With getting a job in the beginning of July, my timeline and milestones changed drastically as I only had evenings to complete my work in the last 3 months. This also impacted how much I could get done, and if I had longer I would have learnt how to fix the issues I was forced to ignore temporarily. This project also considered costing, which was for the custom domain name. As the price only came to £3.50 for a year, I decided to pay for that for now and consider costing again as the price increases to over £10.00 after the first year. Overall, I am happy with the outcome of my project.

References

Bestfolios. (2017) ’10 Great Fonts for Portfolio Design’, Medium, 2nd April. [Online] Available at: https://medium.com/@bestfolios/10-great-fonts-for-portfolio-design-2debfe2f1bb9 (Accessed 15/07/2018)

CodeAcademy. (2018) Homepage. [Online] Available at: https://www.codecademy.com/ (Accessed 12/08/2018)

Code.Makery. (2018) Part 2: Publishing Your Website. [Online] Available at: https://code.makery.ch/library/html-css/part2/ (Accessed 22/09/2018)

Cotterill, T. (2017) ‘How to Create a UX Design Portfolio: Tips from a UX Recruiter’, Career Foundry, 20th June. [Online] Available at: https://careerfoundry.com/en/blog/ux-design/ux-design-portfolio-tips (Accessed 15/07/2018)

Format Team. (2015) ‘9 Tips For Designing Your Portfolio Logo’, Format Magazine, 23rd December. [Online] Available at: https://www.format.com/magazine/resources/design/9-tips-portfolio-logo-design (Accessed 15/07/2018)

Kekous Tuts. (2014) 'Handwritten Text Effect | Self Writing | After Effect Tutorial’, 14 November. [YouTube] Available at: https://www.youtube.com/watch?v=Ph6WkBCW3rA (Accessed 11/09/2018)

Interaction Design Foundation. (2017) ‘Needs Before Wants in User Experiences – Maslow and the Hierarchy of Needs’, Interaction Design Foundation. [Online] Available at: https://www.interaction-design.org/literature/article/needs-before-wants-in-user-experiences-maslow-and-the-hierarchy-of-needs (Accessed 15/07/2018)

May, T. (2017) ‘9 things employers are looking for in your portfolio’, Creative Bloq, 20th March. [Online] Available at: https://www.creativebloq.com/features/9-things-employers-are-looking-for-in-your-portfolio (Accessed 15/07/2018)

Puri, R. (2014) ‘3 color theory tips to inspire your digital design’, The Next Web, 6th August. [Online] Available at: https://thenextweb.com/creativity/2014/08/06/3-color-theory-tips-inspire-digital-design/ (Accessed 15/07/2018)

Rocheleau, J. (2017) ‘Web Development Portfolio Tips: Ultimate Guide to Show Your Skills’, DesignModo, 9th October. [Online] Available at: https://designmodo.com/dev-portfolio-tips/ (Accessed 15/07/2018)

Saarinen, K. (n.d.) ‘Building a Visual Language: Behind the scenes of our new design system’, AirBnb Design. [Online] Available at: https://airbnb.design/building-a-visual-language/ (Accessed 15/07/2018)