Portfolio Redesign

Website  |  2018
Skills Used
  • UX Design
  • UI Design
  • Sketch
  • CSS3/Sass, HTML5, jQuery
  • Foundation Framework
  Back to Work

Preface

It's 2018! New year, new you, right? My skills have evolved significantly since the last time I updated my portfolio (I've been working as an interactive designer at an agency, growing my skills in many areas), and I wanted a new place to display work—both past work and new, fun projects—that felt more like me. The result is the site that you're viewing now. It's still a work in progress, but what project isn't? I wanted it to be a playground to try new ideas, and my intention is for it to grow and change.

Although this project was personal and intended to be fun, the process by which I arrived at a final design was very much informed by UX/UI processes and best practices. I wanted this to be an example of what I could do, and I also wanted it to be something I could share with others. I know I always enjoy getting a peek at someone else's design process.

Challenge

As stated above, I wanted to redesign my portfolio to reflect my current skill level, include newer work, and have fun working on a personal project free from client needs. At a high level, I wanted to:

  1. Update the look and feel while retaining references to nature (because I love the outdoors, and that's an important part of who I am).
  2. Polish the overall presentation of work.
  3. Create a better layout for showcasing my work.
  4. Remove unnecessary elements and clutter.
  5. Build a site with room to grow as work and content is added in the future

Solution

Initial Research, Audit of Old Site

I started by combing through the websites of designers I respect. What did they include, what did they exclude? What felt like overkill, and what felt unnecessary? I realized that much like I enjoy succinct prose, I enjoy succinct websites. I didn't want a lot of distracting, ancillary content. Highlight the good (that you have permission to show!) and leave the rest out; it's always good to have a little mystery. I also knew I wanted the design to be exceptionally clean; I've always felt that clean, usable design was one of my greatest strengths as a designer, and I wanted my portfolio to reflect that.

Next, I considered my old portfolio and decided what to cut. I've always loved copyediting, and auditing a site isn't too different—my goal is to be merciless. The results are always better when you remove your emotions from the situation and view the project as objectively as possible. As a result, I made the following choices:

  • I was going to get rid of the blog. I never really updated it, and if I really had something to say another, non-internal platform would be better than an internally hosted one with three posts.
  • The look was dated. I needed to start over.
  • I didn't need to hook the new site up to a CMS. It wasn't very complex, and I wanted the flexibility/speed associated with building it statically.

Planning

I started by creating a small sitemap and sketching some basic wireframes, just to get my initial ideas down on paper. These were messy, but they provided a great foundation for the next step.

Wireframes

Next, I created a set of wireframes in Sketch. At this point, I started to think more deeply about copy, interaction, branding, and content. If you look closely, you'll notice that some of the features outlined aren't included in the current site. I prioritized launch over implementing all ideas, figuring that I would have the opportunity to come back to them later to play around. I wanted to shoot high and then decide what to cut.

Front-End Prototype

Normally, I would create some high-fidelity mockups (or other deliverables) as a part of the process. However, because this was a small site, I decided to skip this step and play around in the code instead. I wanted to get the structure down, because I would be able to layer the rest of the design on top of it—and because I knew I would be able to do it faster.

After creating the initial prototype locally, I refined the design and deviated from the wireframes where it seemed necessary based on the live interactions.

I paid particular attention to smaller screens throughout, knowing that planning for them at the beginning of the process is much easier than adapting your design at the end. I also tested across browsers to ensure a consistent experience.

Final (?) Design

I say final, but I expect this design to continue evolving. There are many more pieces of interactivity I'd like to add. That said, what you see here is the result of many hours of planning, designing, writing, and head-scratching. Thanks for reading, and I invite you to browse the rest of the site.

Recent Work

Get in Touch