Project background and requirements

Founded over 10 years ago by Thayer Prime, Team Prime works with technology companies, helping them with their growth strategies. The website serves as an online portfolio to show the clients, their testimonials, and talk about the projects they worked on together.

Thayer approached me because she needed a website redesign. She wanted it to have a more modern and professional look that appeals to the individuals who work as C-Level executives. She also needed to be able to make regular content updates, which was difficult with her previous website. Likewise, the new site had to be responsive and have a clear information architecture.

My role

I worked as a team of one on creating the user experience and designing the user interface. I then built a custom WordPress theme and copied content from the existing website. We finished with a brief walk-through of the project, where I explained how I set up the editable areas in WordPress.

Challenges

Team Prime brand colours were red, black and white, and we decided to keep them. We also agreed to use the original logo. Red is a rather dominant tone that draws immediate attention. I chose to use it only to highlight key elements on the page and extend the palette with different colour options I could use for links or icons.

Furthermore, Thayer preferred not to use stock photography but unique images that are corporately acceptable. Respecting that, I decided to look for graphics that could reflect the company’s approach and compliment the new look and feel.

The development hurdle I faced was around the Projects and Clients pages. They are separate pieces of content but closely related to each other. The challenge was how to structure WordPress to make the updating process as smooth as possible for Team Prime.

We also worked remotely, relying on the project management tool, emails and video calls.

“I enjoyed working with Magda very much. She’s to the point, great at communicating and does what she says she will. She has a good eye for design and needs minimal input to get a great job done. Really impressive. I would highly recommend her.”

Thayer Prime, Founder & CEO

The process

Planning

I set up a Trello board with different columns: Backlog, User Stories, Questions, Web design & development, In progress, Review, Accepted, Done/Live. I decided to group user stories together and use them as a point of reference while working on different stages of the project. ‘Questions’ is a useful column to have and add any related queries there. They can later turn into user stories or new website features.

Research

I wanted to understand the clients Team Prime worked with. I read their case studies and visited their companies’ websites. I wanted to try and understand the user’s motivations. I also browsed online through businesses who deal with C-level recruitment.

I conducted a heuristic review of the existing website and its content. I outlined the site map and drew relations between pages.

I schedule some time to do a comparative assessment, looking at different products online and finding solutions might work for our project. This method helps me think outside of the box. Often competitors’ research makes you stick to the same path whereas looking at other products may open some other possibilities and change your approach.

Team Prime wireframes on a mobile device

UX Design

No matter how I love sketching, my handwriting is very messy, and my drafts created on paper are nowhere near the perfect photos of sketches you can get online. Hence most of the times my wireframes are done using Balsamiq or Sketch.

I use a greyscale colour palette for the wireframes. I try to incorporate more details than it is in general low fidelity visuals. I frequently observed on other projects that sketchy wireframes didn’t give enough information about the path we were taking, or about the option we were offering. In the case of Team Prime, I believe this was the right approach. I designed the wireframes to give the flavour of the website’s layout and style.

Testimonials from clients Thayer worked for are fundamental to grow her business. I wanted to keep the mission statement and recommendations and logos at the top of the page.

After we agreed on the preferred initial visual, I created a homepage layout for a smartphone screen, together with the mobile menu pattern, and layouts for the other page templates. I needed the wireframes to reflect the decision not to use photography, so I introduced geometrical forms, rectangles in particular because they derived from the square logo shape.

Branding

I searched for two complimentary typefaces that I could use for headings and body copy. I started my research on Font Squirrel and Google Fonts. I also use font pairing web apps during this phase, FontPair and Canva Font Combinations. A combination of serif or slab-serif typeface for titles and a sans-serif one for the rest of the content was something I aimed for. A serif typeface would add a classic and formal impression to the site, and at the same time, a sans-serif font would give a fresh and modern look. Sans-serif fonts are also more accessible, so it’s understandable to use them for larger blocks of text.

I suggested Bitter and Source Sans Pro. During the development stage, the initial choice of sans-serif family evolved to Lato because Internet Explorer browser had a rendering issue displaying our first option.

The web app I use for generating colour palettes, Coolors, led me to a metallic blue that could work for links, and dark purple as an additional colour option, if required. All of the HEX values I pick go through the colour contrast checker to be sure all content is readable.

UI Design

Designing the user interface, I developed further the idea of rectangles applied as dividers and frames for different content sections. While working on the visual designs, I realised that using a CSS grid for the page layout would be the best approach.

By using a light page background, I could add supporting graphics and adjust them by applying brand accent colours to some of the elements.

I found a set of illustrations on the Iconfinder (by Howcolor) that would accompany the content on some of the pages and make them less text heavy, like Services, Projects or About.

While working on the visual designs, I was creating a web style guide where I could explore various hover effects and think about for focus and error states.

WordPress

There were a few reasons why I chose to develop Team Prime in WordPress.

First of all, this is a technology I feel very comfortable with as a developer. I’ve been building custom WordPress themes and providing support on WordPress sites for about six years, since 2013. I can quickly assess what can be achieved with the default WordPress functionality and what extras we might need.

From the client’s perspective, I believe it’s a fantastic content management system providing they are not left with a large number of options they forget about. Following this principle, I outline the site structure before I start developing the theme. I like to call it development experience, maintaining a clear structure of the project as we go and add features.

Team Prime runs on WordPress 4.9. When I started coding, Gutenberg (WordPress 5.0) hasn’t been released yet. Although the flexibility of updating content was the new website requirement, it wasn’t a priority at that time to have custom page builder and create different designs and experiences. I proposed the use of custom post types supported by the pro version of the Advanced Custom Fields Pro plugin.

I downloaded a base WordPress theme from the Underscores and checked a “_sassify” option to use the SCSS stylesheet language. Why “_s”? It’s a starter theme, how they called it, with functionality reduced to a minimum, but powerful enough to hold additional functions. I am convinced that WordPress sites can perform exceptionally well if the usage of external plugins or fully customizable themes is decreased. Before I start coding, I go through the list of requirements and focus first on the absolutely necessary features, making space for extending the product if needed.

My development environment runs on Local by Flywheel.

I also had a staging environment for Thayer to review my progress hosted on 34SP.

Development

Working through the user stories I wrote at the beginning, I was adding new pieces of functionality that Team Prime could test and give feedback on. I enhanced the post types and pages with custom fields that would enable Team Prime to connect content from different templates. It would mean the same information wouldn’t have to be re-added to another page template.

Consultation booking is a feature that Team Prime frequently uses. Apart from scheduling a call, the customers needed to be able to pay for the selected options. We tried a few plugins before we finally agreed on a paid TeamBooking extension. In fact, it was extremely challenging to test them on the staging site. Initially, I concentrated on free plugins. However, after discovering they don’t come with Stripe integration, I extend my research to paid extensions. TeamBooking contained all the features Team Prime needed. It also came with comprehensive documentation, and that’s what we developers love.

Testing and handover

I use BrowserStack to test my code is different browsers, working with various device emulators. It’s a time-consuming activity, but it’s worth taking the opportunity to verify the site and its functionality.

When the website was completed, I walked Thayer through the site using a screen share. I explained how I set up the editable areas.

Changes to the design

Since the project was completed, we did a few changes to the Client and Project single pages, as well as decreased the sizes of the logos on the Clients landing page.

One of the elements of the digital design and web development I appreciate most are the modifications you can make later, transforming users’ feedback and their observations into something tangible that could improve the user experience.

Stay in touch

Do you need a user experience and interaction designer specialist?

Connect on LinkedIn

Magda Faizov

Team Prime

Website redesign and rebuild, with a focus on good UX