Tea case study - cover image

Case Study: TEA entertain

Client: In-house at TEA
Role: Lead UI/UX Designer, front end build working alongside a fellow developer.
Brief: Create a responsive website to showcase the agency's work and maximises dynamic content from social feeds.

The Website

An important consideration for the website is maintainability, being easily and regularly updated with a focus on maximising dynamic content from the agency’s main social feeds – Instagram and Twitter, which the whole team is encouraged to contribute to frequently.

The site’s goals are to showcase a range of the agency’s best work, show the personality of the team and provide an insight into the company aimed at prospective clients.

TEA website - desktop view
TEA website - tablet view
TEA website - mobile view
Responsive layouts for 1440px desktop, tablet and mobile devices

The Journey

The project started with extensive research and collation of ideas and imagery into inspiration boards followed by evaluating the agency’s previous website, what was and wasn’t working. After carrying out user testing studies we determined that users found the site difficult to navigate the horizontal scrolling page with content divided into vertically scrolling columns. This layout also limited the reading line length and width of imagery. Stats proved that many users didn’t know there was more to explore for each case study and they would leave the page before clicking any further. The complicated layout may have also confused and frustrated them into leaving the site. The design of the site was also not very device friendly with conflicting swipe gestures.

We decided to approach the site with content imperative to the structure and layout, utilising social feeds and large curated imagery. It was also decided to incorporate the blog rather than have separate sites.

Wireframes and sketches were drawn up to outline the simplicity of the new design concept. We designed the website in the browser often building prototypes first to get a true representation before incorporating into the main site build. An example of something we decided not to include as it looked good but didn’t really enhance the user’s experience was a pre-loader splash screen, playing video through a svg image mask of the TEA branding. This technique proved tricky to get full browser compatibility requiring different approaches for consistency and thus bloating the css. Designing straight in the browser meant we could make decisions on the fly regarding animations and interactions.

Wordpress was the CMS of choice however we decided not to use it to build the pages as it's size can make the page lag. Instead a mixture of php and js was used to extract the relevant content and inject into the html.

The site features human-readable urls, dynamic content from Instagram and Twitter pulled in from white listed users using specified hashtags and is a full screen responsive site up to a max width of 2560px, where the page becomes centred.

The Navigation

The navigation style differs between the homepage and inset pages for desktop and tablet devices. At these viewports the homepage features a ‘hamburger’ icon, to minimise visual elements for a more uncluttered look focusing on the full screen image.

We decided to make the navigation links as concise as possible, only featuring explore (about), excite (work), engage (contact) and blog (we couldn’t think up a word beginning with ‘e’ that fitted!). Other sub pages include the Instagram page, tea team page and the videos page, links to these are found throughout the site.

To aid the user and give context to the main 4 navigational items, tooltips appear on hover.
Explore - find out what TEA is all about
Excite - take a look at our work
Engage - get in contact with us
Blog - our thoughts, inspirations, ramblings...

TEA website - navigation tooltips
TEA desktop website homepage - navigation collapsed
TEA desktop website homepage - navigation open
TEA desktop website inset page - navigation
Desktop screenshots: (from left to right) homepage navigation collapsed, open and inset page navigation
TEA tablet website - homepage navigation collapsed, navigation open and inset page navigation
TEA mobile website- homepage navigation collapsed, navigation open and inset page navigation
Left: Tablet screenshots: homepage navigation collapsed, open and inset page navigation
Right: Mobile screenshots: homepage navigation collapsed, open and inset page navigation

Homepage

A touch friendly full screen carousel slider displays 10 slides always starting with the latest piece of work, plus a randomised mix of 5 other pieces of work, a video we are watching and 3 pieces of content pulled from social feeds and the latest blog post. These slides all link to relevant pages to help pull the viewer into the site.

As all images are set to background-size cover and social content may have low resolutions, which would not scale up well, a textured grid overlay is applied to screens over 640px wide to help disguise image quality. This textured overlay also helps differentiate between the social and work slides.

The work slides use media queries to pick the most appropriate background image. This required art directing the image for different ratios of: 16:9, 9:16, 5:4 and 4:5. With small, medium, large, extra large and extra, extra large breakpoints for each to avoid downloading a heavier file weight image than needed.

As all the slides need images, we created a range of default image backgrounds of random things in and around the office for tweets that don’t have an image attached.

TEA homepage Dawn of the Planet of the Apes slide
TEA homepage FIFA slide
TEA homepage Vikings slide
TEA homepage Instagram slide
TEA homepage video slide
TEA homepage Twitter slide
Desktop screenshots: showing a selection of full screen slides from the carousel, including work, Instagram, video and Twitter
TEA homepage - landscape view, image orientation
TEA homepage - portrait view, image orientation
Art directing images for screen size and orientation
Twitter background replacement image 1
Twitter background replacement image 2
Twitter background replacement image 3
Twitter background replacement image 4
Twitter background replacement image 5
Twitter background replacement image 6
A selection of background images for tweets with no image attachments

Homepage Additions

The first live version of the website only featured the carousel slider on the homepage, however after seeing the results from user testing studies, we decide to make the page scrollable as this was an action many expected and tried to do. These additions to the homepage included: a wider custom scroll bar, a brief introduction about TEA – who they are and what they do, call to action buttons - to read more about the company and view the team page, newsletter sign up powered by MailChimp (the 'sign up' submit button is only visible once all 3 fields have been filled). Ending with the 4 most recent dynamic Instagram images using #teaentertain, with a call to action to go to the custom Instagram page.

TEA homepage - desktop
TEA homepage - tablet
TEA homepage - mobile
Full homepage layouts for 1440px wide desktop, portrait tablet and mobile

Explore

Compared to all the other pages on the site, this page felt very static, there are no animations, there are no panels to expand or collapse and the content will rarely change. Therefore we added in a space for a randomised #tea_tees Instagram image. This can be a photo of anything that looks like the letter ‘t’ or the word ‘tea’. This also helps to give life to the first paragraph, introducing the company.

The client and supporter logos are svg, scaling nicely from desktop to smaller devices.

TEA Explore Page - desktop
TEA Explore Page - tablet
TEA Explore Page - mobile
Full 'explore' about page layouts for 1440px wide desktop, portrait tablet and mobile

Excite

The excite page displays work case studies, blog posts, videos we’ve been watching, tweets and Instagram pics. Initially 12 items are displayed with a call to action of ‘more’ which loads another 6 items each time. These are arranged into 2 categories work and social, ordered by 2 pieces from each category, alternating. The work pieces are always displayed in chronological order starting with the most recent piece of work first, however the social pieces are completely randomised.

#teaentertain is needed to pull the Instagram images in from the white listed users, on this page, the homepage and the custom Instagram page.

As well as the option to load in more posts the user can also filter out the social content using the ‘just show me work’ call to action. This is shown in the tablet screen grab below.

Devices display the post info below the image, however for a cleaner look desktops show this with an animation on hover. Instagram and Twitter posts are marked out with a white low opacity overlay banner half the height of the image with the corresponding social logo on desktop screens.

Social feed images are cropped to the same height and vertically centred in line with the rest of the content blocks. However as the layout for mobile is only one column the social images don’t have a restrictive height set.

TEA Excite Page - desktop
TEA Excite Page - tablet
TEA Excite Page - mobile
Full 'excite' work page layouts for 1440px wide desktop, portrait tablet and mobile

Excite - work case study

The work case study pages feature up to 4 images or 3 images and a video with 2 – 3 brief paragraphs ending with a tagline and large client svg logo.

Wordpress custom fields were used to create specific fields for each type of content with a drop down list of clients to select the correct logo, this was implemented to speed up the admin time of adding new case studies. Notes were also applied throughout, giving detailed instructions including image sizes needed. This future proofs the site for changes in admin users if required.

The admin only needs to upload the largest image size needed, 4 other image sizes are created automatically in the Wordpress back-end to cater for the various breakpoints using srcset to swap between images for the best resolution.

TEA Excite Work Case Study Page - desktop
TEA Excite Work Case Study Page - tablet
TEA Excite Work Case Study Page - mobile
Full 'excite' work case study page layouts for 1440px wide desktop, portrait tablet and mobile

The video above demonstrates the sliding animation opening the case study post. The sliding flat colour is selected from the main image and added to a custom field within the Wordpress post. When existing the page the user is returned to their scrolled position on the excite page.

Engage

This page features a customised Google map using the brand colours, ‘email me the map’ call to action and an animated collapsible banner containing the company address, directions and social network links. This negates the need for a footer on this page.

To make the page feel more dynamic we added orange pins to the map using Instagram’s geotags. Pins appear on the map from the white listed users using #tea_town. The concept of this tag is to document places and things the team have done in and around London. These orange pins open the corresponding image and comment box.

Unfortunately there is a 3rd party limitation from Instagram, expiring pins after an unknown time limit meaning pins disappear from the map in time.

On mobile devices the 'engage' link takes the user straight to Google Maps, the thought behind this decision is that the user would more likely be on the move, possibly travelling to the studio.

TEA Engage Page - full page
TEA Engage Page - full page showing Instagram pins
Instagram page layouts for 1440px wide desktop - left: showing contact bar down, right: contact bar collapsed and Instagram map pin active

Blog

The blog landing page follows the same layout as the excite page with 12 posts initially displayed and the option to add 6 ‘more’ posts at a time with the call to action button. Again similarly to the excite page the posts are in chronological order with most recent first.

Blog Page - desktop
Blog Page - tablet
Blog Page - mobile
Full blog page layouts for 1440px wide desktop, portrait tablet and mobile

Blog Post Page

The blog posts article page's layout is dictated by the max reading line length of the copy. Additional images can be added amongst the copy if need be however all posts need one main cover image.

Blog Post Page - desktop
Blog Post Page - tablet
Blog Post Page - mobile
Full blog post page layouts for 1440px wide desktop, portrait tablet and mobile

Instagram Page

This page collates all the tagged posts both images and videos from a defined list of both tags and users. A maximum of 60 posts are displayed at a time with new posts sliding on top, one at a time in a randomised order. This page is completely dynamic and is updated in real time. Posts can be filtered by hashtag in the right pull out overlaid panel on desktops which is positioned fixed on scroll, the panel is placed below the posts on devices.

Comments are displayed on hover for desktops and below the post for devices, consistent with other areas of the site.

Instagram Page - filter posts panel
Instagram Page - collapsed filter posts panel
Screen grab showing the Instagram page layout for 1440px wide desktop, filter panel open and collapsed
Instagram Page - tablet horizontal
Instagram Page - tablet vertical
Instagram Page - mobile
Condensed Instagram page layout for tablets at both orientations and mobile, displaying the filter at the bottom of the page

Team Page

This page consists of up to 3 personal image posts per team member, these appear in a randomised order on page load. One by one each member’s image is replaced with a push left animation consistent with animating effects throughout the site.

Team Page - desktop
Team Page - tablet
Team Page - mobile
Team page layouts for 1440px wide desktop, portrait tablet and mobile

Videos Page

This page features 6 videos we're watching, the hierarchy within the layout for desktop and tablet platforms shows the most recent as more prominent.

Videos Page - desktop
Videos Page - tablet
Videos Page - mobile
Full videos page layouts for 1440px wide desktop, portrait tablet and mobile

Thanks for reaching the end! It was a long one I know :) Please take a look at the next project ... there's not as much scrolling I promise!

TEA insitu website