MTA - Quick Redesign
Updated: Jul 4, 2019
A quick redesign of MTA video section.
Brief : The assignment is to re-design the videos page.
It has to be in line with the overall look and feel of the website - same colors, fonts, elements etc.
User should be able to browse videos and able to play them with ease. They should be able to see the Title and Description of the Video, link of the article of which the video is made of, easy sharing of video on social networks.
It has to be simple and systematic.
Â
A couple things I noticed that needed a switch :
1. Most of the videos have a white cover image that blendes with the white background and visually creates a lot of white space.
2. Most of their new uploads will be white board style video, not very visually appealing cover images, hence a new layout is in call for to create hierarchy and eye movement over the page.
3. Headlines too black.
4. No playlist option.
5. No breathing room.
6. Dark outlines
Â
Â
Quick Re-layouting Solution for the website - It Features : 1. An almost white page background : Makes the videos with white cover images stand out, without use of outsides. (However, I would prefer white once the video covers starts including more color)
2. A two column website with 4 different video player sizes. The first section, along with the recent upload showcases a playlist or videos from the same category on the right side.
3. Horizontally displaying 3 featured videos in the smallest size just before the gallery. These could be the top viewed or promoted/featured videos from all times.
4. The videos on the left are recent videos and on the right are older videos/recommended videos. 5. In the brief, it was mentioned about social share, that can be incorporated while coding on the video player to show on hover.
6. The redesign, follows the existing aesthetics, color, the website's original look and feel. It a very easy, applicable and long term solutions, which makes both the website exciting and user friendly while making the content stand out with a clean interface and proper structure.
Â
Process : 1. Reading and understanding the brief. 2. Figuring out why the current website is not as appealing. Writing down the pain points.
3. Research > looking for inspiration. Focusing on media sites and online newspaper sites.
4. Coming up with a minimalistic solution that is on-brand and easily understandable without giving a presentation.
5. The best redesign is when nothing is added rather subtracted and yet improves the design and the experience.
6. quick wire framing on paper. 7. Designing the page.
Â
Written and designed by Dollcee Khattar. If you would like to work with me or join the conversation reach out at hello@dollceekhattar.com | dollcee.khattar@gmail.com or leave a comment bellow and I'll be touch!
Â
#Dollceekhattar #dollcee #website #redesign #websiteredeign #relayouting #MTA