Jessica Shields is a senior designer and developer needing to showcase a portfolio of work across a wide variety of design types. This online web portfolio will be used for professional opportunities.
I developed this portfolio in three sprints focusing on Information Architecture, Visual Design, and usability testing for further refinements.
Table of Contents
- User Persona
- Needs Analysis
- Sprint 1: Information Architecture
- Sprint 2: Visual Design
- Sprint 3: Usability Testing & Refinement
User Persona
Needs Analysis
The primary stakeholder needs are to:
- showcase a large set of work and skillsets
- maintain a simple and functional design
- deliver in 30 days
The user needs to be anticipated are to:
- see a quick overview of skillset and past work
- ability to learn more when needed
- understand the design process
Sprint 1: Information Architecture
The first sprint of development was determining the IA. I began by collecting and compiling content with an initial outline of 115 portfolio pieces that could be included.
I designed several sitemaps and considered different ways of categorizing and organizing the portfolio. I determined that the best option to organize was to organize around Three major categories with multiple sub-categories, visualized in the site map:
The final phase of this sprint was digital content creation. I collected, wrote, edited, and uploaded all content to WordPress. Each entry was categorized under the top six categories. Then I tagged each entry for the skills showcased.
Once the IA was complete began the next sprint to develop the visual design.
Sprint 2: Visual Design
Initial Design Decisions – Freehand Wireframe
The solution I chose allowed me to highlight specific skills and types of design work with a focus on a high-level overview of capabilities that links to additional details.
I started with wireframes where I was able to experiment with a few ideas quickly in Freehand. I focused most explorations on the home page with different combinations that included an initial display of work and those that did not. The layouts that had visual designs shown immediately didn’t meet the needs for simplicity nor did they allow visitors to quickly see an overview. There were too many competing elements and the focus was not evident.
Visual Design – InVision Prototype
After determining the layout, I moved to Invision Studio to create a prototype. I wanted to maintain the simplicity of the final wireframes while also injecting color and personality on the homepage.
These are some of the design decisions made:
- Emphasis – The main goal on the homepage is to introduce the designer. I highlighted a short introduction with a colorful background image to provide contrast from the rest of the page. I also included a button linking to a page with additional information. The emphasis along the top of the page isolates the main use case of learning about The designer.
- Rhythm – To move the viewer’s eyes through the design I repeated the background image from the top of the page to the footer. I also created a progression between the number of columns on the homepage repeating in style but varying slightly with each iteration.
- Balance – To showcase skills and portfolio categories I wanted to create balance while also retaining interest. I chose a two-column layout for skills so that they are most prominent, followed by a three-column layout for portfolio categories. Varying the grids create a design that is balanced but visually interesting.
Design Development and Design Deployment – WordPress
With a solidified visual design I developed the final product in WordPress using the Genesis responsive framework. The development required a child theme with custom PHP, HTML, and CSS. I ran a WAVE accessibility check on the site and found 0 errors. The Google mobile-friendly test verified that the design is mobile-friendly.
Visual Design Results
The final design meets all of the needs that were originally outlined.
The primary stakeholder needs were to:
- showcase work and skillsets – I added 91 projects, categorized and tagged them for organization
- maintain a simple and functional design – the visual aesthetic has a perfect balance of simplicity and functionality
- deliver in 30 days – complete!
The user needs were to :
- see a quick overview of my skillset and past work – the homepage has a short introduction, a selection of key skills, and a selection of portfolio categories
- ability to learn more when needed – the homepage overview, skills, and portfolio are all linked to additional information. I also added additional skills and categories to the footer of each page to learn more
- understand my design process – I began with this post—thanks for reading! I hope this gives you an introduction to my process and some of the design decisions made along the way. Read more about my UX design process.
Sprint 3: Usability Testing & Refinements
– ongoing –
Usability testing is conducted as informal conversations about the usage of the site. Some user questions that were not evident in the initial design with proposed solutions:
- What is my design process?
To better address this question and added additional content to explain my design process. - What is my leadership experience?