Online
portfolio
Project brief
My goal was to gain the necessary skills to create an online portfolio for documenting my work. I followed the design process used throughout my diploma.
Research
My first step was to explore existing portfolios, take notes and analyse my findings. As well as communicate and discuss with others to help me gain a deeper understanding of what made a successful portfolio stand out.
Competitive benchmark
Using similar colour coded annotations to my diploma note taking exercises, I split my notes into categories, followed by a brief summary, when researching each portfolio. I found this to be an easy way to digest, annotate and gain inspiration from a lot of different approaches to the same solution. This process helped me get the basis of my objectives and goals for my portfolio, figuring out what I would do and what I would do differently.
Usability test
Of the various portfolios I'd researched, I did a quick usability test with the two which I found to be the most inspirational. The purpose of this was to make sure the positives I'd noted for these portfolio's stood out to others in a similar way.
I found this helpful in validating the ideas I was beginning to form for my portfolio, for instance, confirming the importance of clear, simple navigation. However doing the tests also highlighted some new points that expanded my knowledge and scope for consideration; for example, the level of security and amount of personal details available.
Analysis techniques
Affinity diagram
Using my research, I started noting key points on post it notes. Focusing at first on getting everything in one place, split into positive/negative points. I then looked for themes, links and similarities between them, before finally using these links to organise everything into sections.
Design
The design stage of this project felt as though it was made of two halves. The first involved thinking about what I was going to create from a visual and functional perspective. How I wanted it to look, feel and what I wanted it to say, with all my research and development for reference. This felt very familiar and relatable to previous projects.
The second half was focused on learning what is required technically to build and create the portfolio. This I found more challenging, as it was totally new to me. It required a lot of research, learning and discussion with others to gain the skills needed to progress, but was also hugely rewarding to start seeing everything come to life.
Flow diagram
I collaborated with an experienced friend, who helped get my head around the process and steps for starting to build my portfolio; from purchasing a domain and hosting, to SEO and security. We sketched out the entire flow and process, which was invaluable for my next steps.
Interaction design
The meeting also doubled as a great opportunity to go through my planned structure, layout and ideas for the portfolio visually, which was extremely useful for beginning to join the dots between concept and creation. Sketching out the prospective layout of my portfolio, the visual hierarchies and how I wanted to balance visual and written content. I also considered and experimented with a range of options; informed by my research and feedback. Once happy, I also began getting the main bodies of text together that would make up the written content for the portfolio.
Build
I then began the necessary steps to get set up and begin building my portfolio; researching and choosing a DNS & domain, before sorting hosting and choosing a builder. Using the notes and direction in my flow diagram as a start point. Once I'd gotten all of the framework completed, I began to form my portfolio.
Initially I found myself struggling to create and implement everything as I had intended in my sketches and designs. However after some practice iterations, deeper research and experimentation, I found myself building more and refining as I was going. Allowing me to implement a more agile design process, whilst still completing the key goals I'd set out to achieve.
Feedback & development
Once I was happy with the main structure of my portfolio, I began to send it to others for feedback and development. Allowing me to note certain features/sections/requests that frequently cropped up, both negative and positive, so I could amend further and continue developing. Allowing me to keep updating, improving and changing the portfolio over time.