Solving Design Problems like a Mathematician

While reading a forum discussion on FreeCodeCamp, I came across a reference to George P贸lya’s book, “How to Solve a Problem”. In this post, I review P贸lya’s problem solving strategy. I then apply the techniques in this book to provide a structured account of the work I’ve completed in updating my portfolio. Also, some nice photos of the East River. 馃檪

In a recent FreeCodeCamp forum, someone asked a question about journaling:

Hi coders,
While looking for the source for my project, I saw that some programmers or developers wrote a kind of diary to keep track of the code. I think it鈥檚 nice, but I was wondering exactly how you can structure a diary and if any of you use this to write code.聽Question here.

Good question. I’ve seen other people use diaries or online journals, or those things people use…writing logs or whatever. 馃檪

Anyway, the only reply includes a link about using a “logbook”. On the link page, the author references George P贸lya聽and his book聽How to Solve It. I had never heard of this person or his book, so I did a little research.

George P贸lya, (1887 – 1985)

George P贸lya was a Hungarian-born mathematician who was known for his mathematics work, as well as his work in heuristics. Heuristics is “any approach to problem solving or self-discovery that employs a practical method”.

“Examples that employ heuristics include using a聽rule of thumb, an聽educated guess, an聽intuitive聽judgment, a聽guesstimate,聽profiling, or聽common sense.”

He聽wrote a book about solving problems using common sense principles.

1st edition cover of “How to Solve It”, published in 1945, by George P贸lya, a Hungarian mathematician.

The George P贸lya Method of Solving Problems

The Wikipedia page聽shows that聽P贸lya聽lays out some pretty good heuristics for solving problems. Although he intended for these strategies to be used for solving math problems, I think they could be used to provide a structured method for solving almost any difficult problem.

The P贸lya problem solving method involves 4 principles:

  1. First, you have to聽understand聽the聽problem.
  2. After understanding,聽make a plan.
  3. Carry out the plan.
  4. Look back聽on your work.How could it be better?

So how does it work?

Principle 1: Understand the Problem

P贸lya based the first principle, Understand the Problem, on the idea that math students struggled to solve problems due to a聽lack of understanding聽the problem in full or in part. His technique involved coaching teachers to prompt students with the following questions:

  • What are you asked to find or show?
  • Can you restate the problem in your own words?
  • Can you think of a picture or a diagram that might help you understand the problem?
  • Is there enough information to enable you to find a solution?
  • Do you understand all the words used in stating the problem?
  • Do you need to ask a question to get the answer?

Essentially one should not move past principle one until a constructive answer can be given. It’s not clear from the Wikipedia entry if a constructive answer is required for聽each question or the entire problem.

聽Principle 2: Make a Plan

Basically he felt that a person gets better at selecting a good plan/strategy the more times they solve problems. Here’s a big list of strategies:

  • Guess and check
  • Make an orderly list
  • Eliminate possibilities
  • Use symmetry
  • Consider special cases
  • Use direct reasoning
  • Solve an equation
  • Look for a pattern
  • Draw a picture
  • Solve a simpler problem
  • Use a model
  • Work backward
  • Use a formula
  • Be creative – (“[Have] patience to wait until the bright idea appears”)
  • Applying these rules to devise a plan takes your own skill and judgement – (“Always use your own brain first”)

Principle 3: Carry out the plan

Simple enough, but the main problem people have with this step is giving up too soon. For that, the Wikipedia entry says:

“In general, all you need is care and patience, given that you have the necessary skills. Persist with the plan that you have chosen. If it continues not to work, discard it and choose another.”

Principle 4: Review, Reflect and Extrapolate

Take a look at what you’ve done, and evaluate how well it worked (or didn’t), and see how you can use what you’ve discovered for future problems.


Finding the book:

If you want to find this book, I recommend trying your library. I found it by searching for "how to solve it book pdf" (Google suggested the "pdf") and I found a copy.

Applying These Principles

I recently had a conversation with someone about my job hunt, which I temporarily paused聽in order to聽more deeply analyze UX portfolios.聽The person I talked to聽did not understand why I had paused my search and why I seemed so focused on analyzing portfolios instead of fixing my own and getting on with the search.

Thinking back on that conversation, the problem I had in communicating was that I had already done so much prior to all the analyzing that I skipped a lot of the story in explaining my progress.

When I came across the question on FreeCodeCamp and the ideas in this book, I thought I should take the time to write down all the steps I’ve done to provide a more comprehensive and structured account of what I’ve done and accomplished in updating my portfolio and why. My strategy is that it will help me organize my thoughts and resulting actions, and help me either solve my problem(s) or cross an strategy dud off the list.


For the rest of this blog post, that’s what I’m going to do. It’s just going to be a bit of a stream of consciousness, so consider yourself forewarned!

Main Problem: I’m embarrassed to admit this, but my number one problem is unemployment. All of the portfolio problems I’ve been trying to solve for the past undisclosed months are directly due to job hunting. I’ve been so focused on my portfolio because of the feedback I received related to that, and I simply haven’t finished making updates.

Breaking this problem down into sub-problems has led me to spend time improving my resume in the beginning of the year, and now I’m focused on improving my portfolio. I don’t truly know if my portfolio is a聽contributing聽reason for my continued unemployment, but since it’s under my ability to change I’m making updates to see what works.

Although I got some portfolio feedback, I still wasn’t exactly sure how to improve my portfolio or the best tool to use for it.聽But the information I’ve gathered about portfolios has been helpful to help me narrow my options down.

Analysis

Sub-Problem: Which tool is best to rebuild my portfolio
  • Option 1: DIY is a common option and I recently discovered Tachyons.io CSS framework.
  • Strategy: Explore Tachyons.io as a DIY option, vs Bootstrap which I have used before.
  • Actions:聽I learned that the default WordPress 2020 will be using the typeface ‘Inter‘.聽From the Inter website: “Inter is a typeface carefully crafted & designed for computer screens.” When I looked at some of the samples, I saw these Swiss style posters.
https://rsms.me/raster/examples/poster.html
labs.jensimmons.com

The posters聽reminded me of Jen Simmons who uses a similar style for her site labs.jensimmons.com which explores experimental layouts.

There are a few Swiss poster-inspired websites and articles exploring experimental web layouts:

Anyway, because of CSS grid + the Inter font (which is free), and GridbyDesign.com, a site providing InDesign grids, I thought:聽Wow I could really create a unified online and offline experience based on the Swiss poster style!

Outcome thus far:聽Tachyons classes are a little cryptic because they’re meant to be applied one at a time. The other problem is that I don’t really have a design in mind (a sub-sub problem?) so聽it’s a little difficult to evaluate聽whether or not this is a viable option. (A sub-sub-problem I experienced was using BackgroundSync, which I couldn’t initially get to work. I find sub-sub-problems often come up in coding.) Ultimately, I might be better off using a CMS, like Squarespace, to solve the online portfolio problem / job hunting problem, which is more critical than a unified user experience at the moment. WordPress can be free/cheaper and it can be installed on a subdirectory. Squarespace and other CMS tools can only be installed on subdomains or the central domain.

Sub-Problem: How to improve my portfolio.
  • Strategy: Use quantitative analysis to uncover what specific elements make a top UX portfolios.聽And then replicate those elements on mine.
  • Actions: I started a quantitative analysis of a list of 80-90 UX portfolios to find out what makes them so great. For example, in the portfolio guides I read through, they suggested spending time making images look good. But I realized I didn’t really have a clear understanding of what this meant. And given that I’m an exceptionally private person, I also realized I didn’t聽really know聽what was聽appropriate for an About page. And I was curious to learn what most people used to build their sites. So essentially, I set about answering these questions, to help me put together the pieces for my own portfolio redesign.
  • Outcome thus far: Although DIY makes up a sizable portion of portfolios,聽I’ve been surprised to learn how many people use paid CMS tools for their portfolios. I’m trying to learn a little more about the backgrounds of the DIY authors, like are they students, who have time to build a DIY site, or developers who do it all the time. But now that I’m writing this down, I think I need to think a bit more about CMS options.
Sub-problem:聽Feeling overwhelmed with the amount of resources and need a place to put them all.
  • Strategy: Make an orderly list of resources that have been influencing my portfolio revisions and/or could serve as a resource in the future.
  • Action: I created a list of portfolio resources, of guides and websites, JavaScript libraries and CSS tools, and a short list of portfolios that might hopefully come in handy. That list is here.
  • Outcome thus far: Creating this list has led to more investigation on how to create a portfolio. I’m starting to see some overlap and understand more meaning in the portfolio suggestions.
Sub-Problem [Hypothesis]: Online portfolio projects weren’t showing my work and myself as a designer as well as they could.
  • Strategy:聽Go with a temporary PDF portfolio, and remove all projects from my website. Re-evaluate all online materials.
  • Actions: I removed all projects from my website and put in a message to contact me for sample work. My concern was that my website was a) out of date in both style and programming [Bootstrap 3]; b) didn’t represent me well in part due to A. I also took screenshots of all my online portfolios, at Behance, Cargo1, CarbonMade, and Coroflot, to view how I was really representing myself online.
  • Outcome thus far:聽Coroflot is still available, but I don’t link to it from anywhere. CarbonMade is online and I also don’t link to it from anywhere. The different sites have slightly different visual expressions and the experience using them can be different and limited based on the way that the site works.
  • Reflections: On her website, which is built with Kirby, Jessica Hische provides the following advice for getting freelance work:

Have a website.

This might be a no-brainer, but a ton of young people looking for work don鈥檛 have a functioning website because they’re still struggling to build some crazy flash bonanza themselves. STOP. Unless you want to do web work for a living, sites like cargo collective, indexhibit, and carbonmade are perfectly fine ways to make portfolio sites. Many professionals use them as they are easy to update, which you will learn is THE MOST important trait a portfolio website should have.聽Illustrators, this goes for you too.

I read this advice a while back and I think I may have misunderstood a little bit. While using a CMS is important, such as cargo collective, it’s apparently MORE important to have your own domain than it is to use a CMS like cargo collective.

Sub-Problem: Without an online portfolio, I need a way to share my site. Also online portfolios might be showing too much, leading to more opportunity for criticism.
  • Strategy: Use large, static images on Behance, rather than a true online portfolio. I attended a virtual portfolio session with Google, where a portfolio from a UX designer and a Visual designer were reviewed. The UX designer was Simon Pan and his Barclay’s bike project. The visual designer’s work was shared on Behance.聽The visual design project we reviewed was聽essentially a series of very long images that appeared to be created for Behance.聽I figured that if Google’s recruiting team was showing us this project as a viable format, it could potentially work for me. I could draw pictures and tell a story vertically, like the Behance version.
  • Actions: I chose to create聽4-5 projects in Sketch, for the purpose of sharing on Behance. I figured I could use them as slides for an offline presentation if needed.
  • Outcome thus far: I put them up, but they did not receive wide spread acclaim; like 4 appreciates. And the one recruiter I shared them with for a freelance gig didn’t get back to me, and the “views” didn’t increase so I’m not sure what the response was; my assumption is negative. Reflection: Simon Pan uses a custom WordPress theme. My assumption is that it would be聽significantly聽work to customize than even a basic site. But maybe this is an opportunity to use one of P贸lya’s heuristics,聽the inventor’s paradox:

The more ambitious plan may have more chances of success [鈥 provided it is not based on a mere pretension but on some vision of the things beyond those immediately present.

Maybe I should start with BlankSlate and customize the heck out of it.

Sub-problem: Fixing my Cargo1 (Cargo Collective) portfolio and website.

I’m writing these all under this one heading for brevity and also because they’re related.

Strategy to focus my website on only UX: Some of the feedback聽I got on聽my Cargo1 portfolio was that other links related to coding and design should be removed. I didn’t ask why, but my guess was they were either not interesting or not very good. When I tried taking a more objective view of my website, I felt that the code examples, which were set in a list, weren’t presented well. I chose to update my website to remove references to code examples. There were still 3 projects available, with individual pages for each.

I聽didn’t聽include this video in my other post on Portfolio Resources, but I came across聽a YouTuber discussing design portfolios. A point he makes is that it’s OK to have more than one portfolio. For some reason, it seemed revolutionary and I remembered labs.jensimmons.com. I can include my code examples, but I can put them on another site/portfolio that presents them more appropriately and doesn’t confuse an audience looking for UX projects.

Strategy to take聽my Cargo1 site offline to remove sources of negative criticism.聽I spent a LOT of time writing a significant amount of custom CSS for my Cargo1 site.聽 I also watched a video on web writing to focus on improving how I explained my projects. It’s a good video; I recommend it.

Despite all this work, I got plenty of feedback. To be honest, the feedback shocked me. I wrote about that in an earlier post.

I did attempt to make multiple changes back on feedback received聽鈥 specifically, describing myself/who I am and improving the writing聽鈥 I unpublished聽my entire portfolio聽of projects at cargocollective.com. I did not want to use the Cargo1 template and site as it was to serve as my homepage, meaning changing my DNS to use the Cargo1 site vs my own site.聽Essentially this decision is driven the design heuristic to not show anything you don’t want criticized. Given the feedback and feeling that my attempts to improve it wouldn’t be sufficient, I chose to unpublish it entirely until I settle on another strategy for my UX projects. At that time, I can use it again to show my ITP projects and end my subscription (which I should do now.

Strategy to narrowing down projects from 7 to 3.聽At one point, my site had about聽6-7聽projects and an About page that included logos of companies and brands I had worked for in the past. However, analytics showed that virtually no one was viewing the About page. Actions:聽I removed聽the About page聽because it seemed useless. Meanwhile, the few people that did come to the site in general only viewed a few projects. I decided to remove every project聽except for the聽3 most trafficked, which I re-ordered according to popularity.

Interestingly, one of the projects was just a聽series of experience journey examples, not an actual project. Despite this, visitors were visiting the page. I’ve followed the lead from the analytics ever since. Those 3 projects, including the experience journeys, have always appeared first in their specific order, anytime my projects appear online. Ironically, some of the feedback I got from my acquaintances was that I had too many projects. :/

 


Reflections

Something I haven’t talked about is how many weekends of beautiful weather I’ve missed trying to solve this main problem and all of these sub-problems.

One of my favorite activities is riding the ferry around NYC or riding my bike to my favorite park. I’ve missed at least a month of weekends and ridden my bike about twice in 3-4 months. It’s really been a heavy feeling to see the sun shining outside and feel so much pressure to complete this project, yet not knowing the right way to solve this problem. We only get so many days on this planet and each day is unique.

Here are some photos from聽some sunny days.


Next Steps

Writing blog posts takes time but I find writing helps me organize my thoughts. And this exercise has been helpful to review and take an account of what I have already accomplished.

Given everything I just wrote, I’m going to try and create a design for Tachyons, or at least a layout for a portfolio. Or, I should say create a design again – when I reviewed all my other websites, I found a design that I put together a few years ago!

Regarding DIY with vanilla HTML/CSS, I know that there are static site generators people use, but I don’t really know about using them for my own domain. It’s a bit of an esoteric problem that I’m not sure I want to get into yet. Maybe this knocks DIY off the list, since not using a CMS makes updating kind of painful.

I also want to look into some of the themes I found for WordPress. Probably not BlankSlate, but the guy who is leading the design for WordPress 2020 created a free theme called Chaplin. (Although he uses a theme called Harrison that’s not on his site.) Chaplin has 9,500 downloads. Maybe I’ll look into that. Since I have my own site, I can install WordPress in multiple folders and test out different options.

I think it’s also worthwhile exploring Squarespace (again), at least temporarily.

And maybe I’ll go take a walk while the sun is shining.

Portfolio Resources

These are sites I’ve come across that may help someone building a portfolio. (Writing it also helps me remember!)

Yet another portfolio post!

Rather than go on about my own issues, I wanted to share a few resources. Before I begin, I鈥檓 going to make a little rant in case you鈥檙e feeling overwhelmed, like I am.

One of the sites emphasizes the importance the design a portfolio has on your job prospects. I feel this importance is overblown because the the design or tool seems to have such a big impact on how the portfolio is perceived. I can’t emphasize enough how聽many聽people use paid templates, plus the cost of a web domain. And I would be lying if I said it didn’t bother me that choosing the wrong CMS template is the difference between gainful employment vs not.

The fact that聽the portfolio聽makes a difference at all seems like the difference between showing up in a limo, BMW, Toyota, or SmartCar. I guess it really is like dating, which I admittedly know absolutely nothing about.

At the start of this review, my feeling is that people just want to be entertained. My thoughts changed somewhat, which you can read at the end.

/rant

 

Ok, now that I’m off my soapbox, here is my list. It’s organized like this:

  • Sites – Guides, essays, and portfolio collections
  • Tools – What people use to create their portfolio
  • People – A small handful of portfolios

1. Sites

A collection of essays, slides, and guides.

Article page: The Case Study FactoryThe Case Study Factory聽is about how similar so many UX portfolios seemingly look alike. The authors write:

“How the formulaic approach to UX case studies is numbing our critical thinking as designers, and how to bring a unique point of view to our work.”

Provides some pretty good tips at the end, however I recommend you read the whole article for context. Also because it’s a good article.

  1. Define your area of focus
  2. Align the story with the medium
  3. Set up the context of the project
  4. Focus on insights rather than process
  5. Design your case study reading experience
  6. Obsess over your case study visuals
  7. Make it personal

 

Article home page

Sometimes it’s just helpful to look at a big list. Here’s a list of 80 portfolios.聽I talked about 2 in the People section.

Guides and Slides
Article page, “Design a Winning Portfolio 鈥 Tips + Tricks from a Google Designer “

Design a Winning Portfolio 鈥 Tips + Tricks from a Google Designer聽聽is a slide deck of tips and tricks. The slides are shared from Google slides (link).

This is a compilation of tips and tricks to improve a design portfolio. She states:

While each design discipline has slightly different project expectations (i.e. UX wants wireframes while Branding wants logo sketches), I鈥檝e realized聽there is an overall universal set of tactics that, when applied, will automatically enhance and differentiate any design portfolio.

The Google slide deck is really big and there are videos, so keep that in mind. It loads a little slow.

 

nng.com’s recent article, “5 Steps to Creating a UX-Design Portfolio” is probably what kicked this whole thing off. Actually I talked about this in another post, so I won’t rehash. But I will point out that I’ve made a number of changes to my website and my portfolio at Cargo Collective, which at this moment is offline.

My Personal Bookmarks

I’ve had the following links bookmarked for a few years. These seem more geared to PDFs.

Portfolio Handbook [PDF] from the聽Class of 2012 Industrial Design, DAAP, University of Cincinnati.

This book was put together for the purpose of facilitating higher-quality portfolios. It will not cover project processes, but will act as a guide to documenting a project well for your portfolio. We hope the book will ease some of the anxiety around creating your first portfolio and then later exist as a helpful reference book to check a newer portfolio concept against

 

UX Portfolio Guidance, from Zebra People [PDF], London

We are fortunate enough to see some great portfolios, however there are still many UX practitioners who are selling themselves short. There are some absolutely brilliant and in-depth guides about UX portfolios out there. But our intention with this document is to provide a concise, visual hand book on what to include in your portfolio.

Your portfolio represents you. But you鈥檙e not always there to talk about your work. No one gets hired on their portfolio alone. The best outcome is a meeting. Tonight is about snap judgments.


2. Tools

What people use to create sites

From the list of 80 above, (plus a few others I found) I randomly clicked聽into about 3-4 portfolios per group and I took a聽look at the page source.

Many, many聽sites are聽built using Squarespace, WordPress, Wix, or some other type of CMS with either built-in or plugins for flashy animation, grids, and what-not.

Other sites were hand-coded, often with Bootstrap or Foundation. I took note of the聽many聽JavaScript libraries.

WordPress and Adobe Portfolio

Semplice home pageFor WordPress,聽I came across a template called聽Semplice. It is advertised as聽a WordPress template for designers. The latest version is Semplice4. Price is $100. I wouldn’t be surprised if many people have upgraded to the Studio version for $140. Semplice does not seem to have options for blogging; I didn’t see it.

 

Salient Live Demo

Another theme I聽came across is聽Salient, although聽the聽site I found it on had a “Under Construction” label. It’s $60 and available on ThemeForest. It has over 5,500 reviews, over 95,000 sales, and is currently聽rated as 5-star.

 

portfolio.adobe.com

If you use Behance, you may be interested in聽Adobe Portfolio. It’s $9.99/month, paid annually (about $120). You get access to Adobe Portfolio, Photoshop, and Lightroom, as well as access to Adobe Fonts. You can get a free trial, but you need to upgrade to connect a domain/subdomain.

Free DIY Options

Startbootstrap.com offers free Bootstrap templates, themes, and snippets that you can download and customize. Basically everything is free, with the obvious exceptions that you cannot use Startbootstrap templates to create a competitive website serving free Bootstrap templates.

I have used Startbootstrap multiple times and I find them pretty easy to use and combine. Some have CSS or JS animations built in; mostly CSS.

It does require solid HTML and CSS knowledge.

 

Github Pages uses your own github聽respository to host a website. It’s 100% free. However, it will say username.github.io/yourproject. And your code will be online for all to see. I’m also not sure if you can use Google Analytics.

Again, this is for people who have experience developing websites.

Obviously, having a free site generator is great. If you want to have your own domain, you can get a personal email address, like yourname@yourdomain.com. And you can connect it to github. But all that is well beyond the scope of this post.

 

BlankSlate by TidyThemes allows you to completely customize a WordPress installation, by providing a theme with absolutely zero styling. Sometimes you use a nice theme, but end up undoing stuff you don’t really like. Needless to say, this theme is for people with a good amount of experience. I say no more.

JavaScript Libraries

If you code your own site, these were some of the libraries and plug-ins some people used. I thought tilt.js was pretty cool.

There are so many JS libraries, this list will keep getting updated.

Lightboxes & Carousels

Instagram Embeds

  • lightwidget.com – Embeds Instagram photos into a webpage.
  • spectragram.js –聽http://spectragram.js.org/ – Instagram API plugin

CSS

  • animate.csshttps://daneden.github.io/animate.css/ – Creates animations on elements, with classes.
  • superfish.css – There’s a CSS stylesheet for superfish.js, and you need to include both to use it.
  • themify iconshttps://themify.me/themify-icons. An alternative icon font to font awesome, with thinner strokes. Also it鈥檚 100% free.

Obviously Bootstrap, Foundation, grid/flex, and icon font libraries also showed up.

Jekyll/Jekyll Themes

  • poole – http://demo.getpoole.com/ – the Butler for Jekyll
  • hyde –聽http://hyde.getpoole.com/ –聽 a 2-column Jekyll theme

Layout

If you are a PDF portfolio person, you might be interested in using a grid.

The Grid System

Grid System

“The ultimate resource in grid systems.”

You can download InDesign templates, at 8.5 x 11 and 11 x 17. Good if you want to create a print portfolio, or if you want to redesign your resume.


3. People

A few portfolios in use

I randomly came across the following people, either in context of this post, or when reading an article, or serendipitously in some other way.

Caveat: In no way am I promoting any of the following people. I have never met them. I don’t know if they’re the kind of people who cut in line or litter. Maybe they don’t pick up after their dog….

The one thing that is true is that I took a look at their websites and I have an opinion. If you disagree, there’s a list of 80 portfolios above to check out.

Antonio Carusone, creator of Grid System. A very simple website. No images. He simply links to his other websites, most of them photography sites. The site is made with Cactus, which is another static-site generator not using Jekyll. (The last commit was 2 years ago, so it may not be maintained.)

I viewed a few other personal websites like this: simple, text-only, with no images. I think this is a good way to connect disparate interests. He seems to have a lot of experience, which is also good to know if you’re looking for ideas and you’re not early in your career.

 

Hiroaki Ito聽has聽this project on Behance. I’m including this person because I attended a virtual recruiter session with Google. The three recruiters reviewed two portfolios, and this project was one of them as an example from a visual designer. (The UX designer was Simon Pan, who uses WordPress. It appears to be his own theme although it could’ve started from BlankSlate.)

The project above is a combination of several very long images, stacked one on top of the other.聽This designer聽has a job at Google. He does not seem to have as much experience as the first guy.

 

Johna Paolino聽is someone I came across on Medium. She wrote an article on using CSS grid. Then I found her website, which is hosted on github. So that’s another – FREE – option. Looked like an interesting site and she seems to be employed at the NY Times.

That big font is BungeeShade.

 

Pendar Yousefi聽is the only person I came across in the list above that used Adobe Portfolio. It was pretty nice looking, so I’m including that here. He also appears to be employed at Google. He also seems to have many years of experience,聽which is another good data point.

To be clear, you cannot create an Adobe Portfolio account and link it to a personal domain without becoming paid subscriber. He does a good job of connecting his web properties. For him, he’s getting his money’s worth. But I just want to make sure it’s clear, according to the website, money appears to have been exchanged.

 

I came across聽Sharon Tsao‘s portfolio above, too. She聽does NOT appear to be employed. But I thought聽her simple site was an interesting example, and she seemed to explain her background particularly well.

She built this herself, or at least she did not use a template or CMS.


Foot imprints on sand near a beach
Photo by Matteo Kutufa on Unsplash

Thoughts & Reflections

I wrote this post over the course of 1-2 weeks. Right away, my initial thoughts for my own portfolio when the time of this post were聽to create聽a simple site that links out to other websites or to just expand my current WordPress installation (this blog). I also considered installing a separate WordPress instance altogether, which is still a strong possibility.

Yet after writing the majority of this post, I continued to investigate the list of 80 portfolios. I kept finding new CSS and JavaScript libraries. And, I wanted to dig a little deeper into some of these to find out more about how they were made and other details that the guides above don’t really get into.

Despite my rant at the top of this post, I have started to change my opinion a little on the importance of portfolios. I think there is something to be said for trying to display your work in as good a light as possible.

I’m still collecting more data about these 80 portfolios, so there will be another post. And I’ve found more items to add to the Tools section (Webflow, anyone?), so I’ll probably continue making updates to this post in addition to simply posting again.

[Featured image credit: Photo by Pierre Bamin on Unsplash]

7 Web Design Articles

At some point, I came up with the idea that reading 10 articles on one topic was a good idea. Well, I only made it to 7. But these 7 articles, on LESS and 404 pages, were very helpful for me so I’m still glad I read them.


Learn LESS in 10 Minutes

Related:

  • http://tutorialzine.com/2017/04/15-interesting-javascript-and-css-libraries-for-april-2017/
  • http://lesscss.org/features/#features-overview-feature
  • http://less2css.org/

I really enjoyed learning LESS, although I think it would be easier to use with a task runner.


15 Interesting JavaScript and CSS Libraries for April 2017

http://tutorialzine.com/2017/04/15-interesting-javascript-and-css-libraries-for-april-2017/聽

 


34 brilliantly designed 404 error pages

http://www.creativebloq.com/web-design/best-404-pages-812505

Getting inspiration and a sense of best practices while creating my own 404 page. I have to say, Bloomberg’s is hilarious. (Creative Bloq, October 10, 2016)

 


How Do I Create a Custom 404 Error Page?

http://www.htmlgoodies.com/beyond/reference/article.php/3472591/How-Do-I-Create-a-Custom-404-Error-Page.htm

Yes, I did create a 404 page, which is located at alliwalk.com/404/. But given that my current website is only one page, it’s hard to get lost.


Should I use a video as a background?

https://css-tricks.com/should-i-use-a-video-as-a-background/

(CSS Tricks, Dec 2015)


Create Fullscreen HTML5 Page Background Video

http://thenewcode.com/777/Create-Fullscreen-HTML5-Page-Background-Video


CSS Filters

https://css-tricks.com/almanac/properties/f/filter/

This is one of the coolest things I’ve seen in a while, but it’s still experimental so don’t use it for anything important.

Incorporating UX Audit Tasks into a User Research plan

The Beyond User Research presentation, from World Information Architecture Day, got me thinking about a related article called The UX Audit: A Beginner’s Guide, from Usability Geek. My other blog post about World IA Day was long enough, so I didn’t mention it then. But, the similarities in the article and the presentation were close and I wanted to mention it.

Alternative Methods for User Research

Unlike the article, the Beyond User Research presentation isn’t a strict guideline. It doesn’t mention any particular research methods to follow. It shows that a UX team can schedule different research methods within a UX research plan. The presentation mentions at least two types of data sources: web metrics and user research.

Web metrics examples included: search query data, logs from a call center, data from analytics reports, voice of the customer reports, CRM applications, and so on. A web analyst might try to reduce the volume of calls to call centers. A user researcher might want to know what most people are calling about. Rather than use this information as a web analyst would, a UX team can use this data as UX research.

UX Audit Methodology

The UX Audit article, being a guide, does mention several methods, including:

  • Review of business and user objectives
  • Conversion metrics
  • Customer care data
  • Sales data
  • Traffic/engagement
  • Compliance with UX standards

It suggests using, for example, conversion metrics this way:

Conversion rates or sales figures: If the premise of your site or app is eCommerce, sales or download figures can be useful to a UX audit. For example, here at Justinmind, we measure how many blog readers download our prototyping tool and from which particular posts…

It breaks down an audit into individual steps and mentions 3 goals that should be clarified before getting started: audit goals, time limit, and resources.

There are a lot of resources in this article, including links to Usability.gov, and even a sample UX audit report.聽There’s definitely a cross-over between these two information sources.

Differences

The article warns that a UX audit can be time-consuming and expensive. For an external team, which they recommend, it states that a UX audit can cost “upwards of $1000 for a couple of days with a one-person team; the full monty of a UX team coming in for four weeks and providing in-depth, goal-orientated insights could cost up to $10,000”. It presents a UX audit as an official stage of a design cycle, and should be completed early on.

The presentation, meanwhile, makes the case that teams can incorporate a variety of user research methods as an ongoing part of their UX activities. Rather than conduct a full-fledged UX audit, for instance, a UX team could schedule one of these methods periodically. The research cost, in time, money and resources, depends on the method and the goals.

Discussion

Quoting a high price tag for a usability study could be a limitation for teams eager to get started on conducing user research. The article mentions that a UX audit is most beneficial at the beginning of a project. Even with everyone knowing that, the high costs might dissuade a team from getting behind the research. What sounds like a boring activity might push them to just start designing.

And聽it’s a rare聽opportunity to have聽the time and resources to publish an official report,聽like this. There’s a lot of other work to do.

Instead of treating UX audits as a costly, one-time activities, why not use UX audit methods throughout the year?

Conclusion

These two information sources can work together as complements. The article is very informative with specific guidelines. But the presentation shows how to ‘break the rules’ a little, by conducting research on a regular schedule. This allows a team to keep up with their product throughout the year. A custom approach, such as doing repetitive quick hits seems like the best option.

In any case, I recommend taking a look at the UX audit article. It links to many useful usability resources and websites providing analytics data.