Selling myself short

Challenge

I felt that my online portfolio no longer represented me or my abilities. It only showcased the end result of a project and not all the steps that I took to get there, or how I solved a problem using design. It also doesn’t showcase any of the skills or tools that I have used.

Approach

When approaching this project I need to understand the expectation of a portfolio of this nature, what people would be looking for, and how I could inject my own personality into it. I also noted down requirements and ideal functionality.

Role

UX Designer & Front-end Developer

Skills & Tools

UX design, Research, Adobe Experience Design, HTML, CSS, JavaScript

Process

  • Research

    To give me some direction, I researched online portfolios of leaders in design and development industries. I noted down how they showcased their projects, what it was that set them apart, and the structure/hierarchy of their websites.

    Sketch

    With the research done, I put pen to paper and used what I had learnt to sketch out some different ideas. I especially focused on the home page and a project page. I needed to understand how these would work to help define the rest of the sites.

  • Wireframe

    From my selection of sketches, I started wireframing the ideas that I thought would work best together. Once I was happy with those initial wireframes, I then experimented with combining elements from different sketches. This allows me to search for a better alternative, something better looking, with a friendly experience.

    Mock ups

    As I would be coding this up, and due to wanting to get it done as quickly as possible, I decided not to do partial mock ups. I put in enough content, shapes and colours to be able to set global styles and get a feel for how things should look.

    I started by experimenting with typography, colours and buttons, doing it this way allows me to quickly spot styles that would work together and it helps set the overall style of the website.

  • Results

    Overall, I am quite happy with zep.design 2.0. It showcases my skills and my analytical approach to projects, as well showing off a bit of my personality.

    This project also allowed me to try out a few new technologies and methodologies. Setting up the Gulp environment was pretty quick and easy and allowed me to work much more efficiently. I can really see the benefits of using a task runner like Gulp and really want to see what else is possible.

    CSS methodology BEM. Everyone has an opinion, so I'm going to throw mine it too. Although the concept is a good one, I don't think it's for me. I know it's intended for large-scale websites, but I thought the little man could utilise the idea. I normally have quite an object orientated approach to CSS and found this a strange way to approach a project. I'm not saying I'm completely done with the BEM approach, but I think I need to try a couple of other methods before making my mind up.

    I'm always evolving and improving the sites I work on, this will be no different. I didn't get the chance to implement a CMS, so at the moment this is a static site and it's laborious to update, I need a CMS! I'm going to evaluate some different options and go from there. I also want to add some sort of blog to the site so will need to consider that while looking for a CMS.

    If you're in to that sort of thing, you can check out the source code on github

    Other Projects

    Redesign to re-engage

    After a redesign didn't quite hit the mark for the readers of a news website, I jumped in to help re-redesign it to try and re-engage them. I analysed behavioural flows and user interactions to work out what had annoyed them and to come up with a solution.

    Role: UX Designer

    Speed UX Design

    A short project to showcase my skills for the second stage of an interview. A fun and challenging project where I sped through the entire UX Design process. Sketches to Prototypes.

    Role: UX Designer