The dead…I mean Utah State Poetry Society
A few short months ago, my team and I had the opportunity to redesign the website for the Utah State Poetry Society or UTSPS, (so as not to be confused with the United States Postal Service, or USPS), spoiler alert, people confuse them for the postal service all the time. Unfortunately for us, a rebranding of the club’s name was out of the question. However, after taking a quick glance at their website, it was clear that there were bigger problems beyond their abbreviations.
To the left is a screen grab from their old website, as you can see there was a lot of text, and the overall feel gives off a very early 90’s, clip art feel.
The site was not mobile friendly and carried around a lot of what seemed to be unnecessary information, playing into the 80/20 rule, something I’ll go into more detail on later.
Our Objectives
After meeting with our Client, we identified four major pain points that needed to be addressed:
- Mobile! Making the site responsive across all platforms was the one and only requirement our client asked of us, if nothing else got done with this project at least it would be responsive.
- Attract the Youth, one major problem with organization was that many of it’s current members were… “ahem” signing off, and there weren't any new members available to fill in their space. So it was crucial that they bring in some young blood and make sure that the website would attract the next generation of poets
- Content Management System, at the moment there was only one person with access for editing and updating the entire site, but with eight different chapters through out the state in need of frequent updates, the need for a content managment system is high priority. They needed a way to allow chapter heads/presidents access to update information or events specific to their chapter, but with restrictions to reduce the abiltiy to make any unwarranted changes that might effect the rest of the website.
- Automate payments, be able to pay online and have an automative payment plan so that members would no longer have to pay with check through the mail
And anything else we could do to improve the experience of the site would just be icing on the cake.
Research & Planning
As tempting as it was to just gut the current layout and start from scratch, I know better than to assume what the people want, and while we did want to attract a younger generation of visitors, we also wanted to make sure we payed special attention to the main demographic of visitors to the site, which we found was age 55+.
We gathered information from UTSPS club members to see how they interacted with teh current site and to see where they though there was room for improvement.
Site map
We began by looking at the structure of the site, and as I mentioned earlier about the 80/20 rule, the idea behind it is that 80% of the site’s traffic involves just 20% of it’s features. With this principle in mind, we decided the remaining 80% should be reevaluated to verify it’s worth in the design, and center our focus on the critical 20 percent instead. From our research we found that most visitors simply wanted to stay informed of current events and contests and to read poetry. We found several pages and information to be unnecessary such as a page just for links, and a page for the youth which hadn’t been updated in several years. We began with ten pages and five sub-pages, we cut that down to six and later five, which allowed for easier navigation while still maintaining all the information our audience wanted to have.
Building Phase
If the idea wasn’t engraven into my mind already, our client certainly drove it home for me, to design for mobile first, as of 2018, nearly 80% of all web traffic is conducted on mobile devices, even from our own own research with UTSPS (a primarily older demographic) we still found the percentage of traffic to be roughly the same between desktop and mobile devices.
Wireframes
We severly cut down on text, and threw in more iconography and imagery, we also tried to establish a good sense of wayfinding within the navigation.
Style Guide
Because most of the site’s visitors would be ones who had frequented the previous site, we wanted to keep the new logo consistent with the older version but we also wanted to add a sleek, modern twist to it as well.
Decisions behind the Design
-We wanted a simpler interface, with the previous design there was a lot of text, something very few people would ever read.
-We decided to help break up the text with icons. The result was something much simpler and more intuitive. (picture superiority effect) people learn better and retain more when text and images are used together.
-Previously there was no call to action, and so for the home page we wanted a very clear cut CTA and used a color that would stand out.
-We placed an additional banner on each page as an extra tool for way finding.
-We also aimed for consistency across all pages.
Webflow our biggest hiccup
For this project we decided to go with Webflow for it’s ability for content management. However, no one on th team was familiar with Webflow yet and so there was a pretty steep learning curve.
Tasks that should have been easy became difficult. But with perseverance and a killer development team we made it work!
A rather comical phenomena resulted from our Webflow woes when one of our teamates sent out a disgruntled tweet saying:
“ Webflow kinda sucks”
The next morning he woke up to a response to his tweet from no other than the Co-Founder of Webflow, Vlad Magdalin, who simply responded with
“bro”
This opened up a dialogue between the two in which they discussed the benefits and challenges of Webflow, especially from a designer’s standpoint who might not be as familiar with coding. This ended up creating a great connection for us and the Univeristy. Of course after that we thought it proper to take the tweet down.
Testing
After surface compositions were finished we did some basic user testing with members of the UTSPS, most of which were very positive. We were also able to meet with our client several times through out the whole process and received feedback and further direction. It was overall a very positive experience, he was very understanding and trusted most of our decisions.
Conclusion
If there was one clear take-away from this project for me, it would be to not get married to your work. Your work does not define you as a person, sure you may have put hard fought sweat and tears into a project, but in the end, your work is not you, it’s simply that, work.
There were numerous occasions through out the process that I found myself going back to the drawing board, because not everything in my designs were entirely possible or even ideal for our audience, and so changes were made. And that’s perfectly okay, because in the end what we had was a fully functional product that we could all be proud of. And who knows, maybe one of the next great poets of our time could be reading this?
