Project X - THE Rebuild and redesign of E! News Into a Responsive, modern Website
When I interviewed at E! News, one of my questions for them was “why is the website not responsive?” My future colleagues blushed and said “we are hoping to get that done soon.” Fast forward to Project X which started as a responsive web project to a full scale redesign. What we delivered was an award winning responsive website with an updated gallery and video experience that delivers content faster through automation.
We changed the logo to just the E! Logo to let them know that this website represents all facets of the brand including the tv network.
My Role
I was lead ux designer my responsibilities included:
All usability research and competitive analysis
Wireframing entire website, passing off to visual designers
Defining functionality within our responsive grid
Writing functional specs for all new features
Be voice of design team and users
We Can’t Start if We Don’t Have Breakpoints
Step one of the process was finding the correct grid and understanding best practice for our breakpoints. Our web dev manager suggested I check out an open source grid called Bulma. I was tasked with comparing their documentation of practices to competitor websites.
I moved forward with suggesting a 12 column grid with 20 px gutters with breakpoints for mobile, tablet and desktop that our team could work with. I created visuals for the entire team to wrap their mind around the new rules.
The next step was building out a proof of concept with our Sr Web Dev to explain to our stakeholders and teammates how the grid will behave. We started simple with colored boxes to build a POC, showing how thing would break down from device to device.
How designers and developers should expect things to break down from device to device. Although these shapes were not exact to all of our content, it still provided a guidelines for everyone to follow.
Defining Our Design Direction
To understand what stakeholders wanted from our new design, I wanted to define our design within the publishing landscape. I presented a deep dive competitive analysis to stakeholders, the visual that resonated with this chart defining our site’s layout on an X/Y axis. On the Y axis it was a clean vs compact layouts. On the X it was websites that emphasize imagery vs headlines to draw users in and tell a story.
For news publishers the main tools used to draw in users are images and headlines. How they present those and what they emphasize varies from publisher to publisher. E! Is a very image driven website so we still wanted to emphasize this but push more content in the viewport at one time.
What the stakeholders wanted was for a more compact design, the design team pushed to keep images at the forefront as that is what users associated with our website.
Defining Our Users
At E! The stakeholders have a lot of say in the design process. To make sure that our users were not forgotten I paired with the analytics team to create personas. Majority of the information on the personas came from in person focus groups, informal conversations with users, feedback data insights and survey questions.
Issa, The Currency Seeker is plugged in at all times and wants to be the first to learn news and break it to their friend group.
Molly, The Topic Seeker, has her celebrities and subjects she follows and cares about, but is more likely to skip over things she does not. She values the connection of feeling like she knows these celebrities on a personal level.
Kelly, The Thrill Seeker, wants the most salacious news possible and does not care who it is about. She is looking for escapism at the end of the day through this type of news.
Wires on Wires
Now that we had our design direction and key users were identified it was time for me to wireframe and define how everything is laid out in the grid. This was a full website redesign, so I made 100s of wires. Below are some original video player wires.
Our UI designers created a component library to be reused across the site. The wires varied from fully fleshed out pages as seen above to color coded boxes that I created. The colored boxes dictated where components and ads would go.
Additionally I was responsible for writing all functional spec documents that defined our websites usability. These documents were used by the development, product, editorial and stakeholder team.
Serving Users - Deliverables/Success Stories
Through the design process we always kept users in mind. As said earlier this was a full rebuild, so there are many new features that we pushed to improve user experience. Below are some key user focused features I want to highlight.
I emphasized mobile experience first, as it is 90% of our traffic. For example pushing for a vertical scroll experience for photo galleries vs swipe. User feedback on swipe galleries were that they were clickbaity and scroll is in life with a social media experience. Gallery image views are up over 100% as of October in year over year comparison.
A key pain point for personas was finding news they want. This is why we added hot topics in our navigation bar. All 3 personas are usually coming from a 3rd party source (Google, FB etc.)
By adding a bar that changes every day to reflect the most searched content to our nav we are providing a route for our users to access that content anywhere on the site. Hot Topics bar has tested extremely well in all usability and NPS score tests, we are looking to expand on this feature.
We pushed emphasized automation across every part of the website to give editors less work and to meet all 3 personas desire for fresh news. The long term goal is for personalization that meet these personas needs. We have seen overall page views and traffic increase since launching back in June 2020.
However, the thing I am still most proud of is finally delivering a responsive website, to bring E! To basic usability standards. It’s rare to get to work on the foundation of something so critical on a large scale and it really helped me build a strong relationship with my web development teammates.