MIT Technology Review’s UI Product Designer Challenge

amanda-chiu-mittr-design-challenge.png

To test my skills during the MIT Technology Review’s interview process, I was asked to design a new podcast series page and promotional widget for the MIT Media Lab website.

To see the presentation, and screens please click this link: MIT Technology Review Design Challenge

Design Requirements

  • Task One: Design a product that could be built within a short timeframe

  • Task Two: Freestyle a product that didn’t have a timeframe restriction

Approach

I wanted to adhere to the strong use of images, and geometric styling of the overall website; and to ensure that as much white space continued to be used as possible.

Due to the time restriction, my approach came from my own experience and that of my partner’s in what we’d like to have access to when listening to a podcast, which was supporting content, and an easy way to get around the website without having to go back and forth between apps to turn off/on the media player.

I referenced Youtube’s minimize video frame design for the podcast widget.

 

Part 1 of 2: Time-bound Designs & Results

DESKTOP UX/UI DESIGNS

Podcast Landing Page Desktop Mockup

Podcast Landing Page Desktop Mockup

 

RESPONSIVE MOBILE UX/UI DESIGNS

Podcast widget mobile wireframe

Podcast widget mobile wireframe

Podcast widget mobile mockup

 

Task 2 of 2: Freestyle Designs & Results Without Timed Restrictions

DESKTOP UX/UI DESIGNS

Custom podcast desktop widget wireframe

Custom podcast desktop widget expanded wireframe

Custom podcast desktop widget mockup

Custom podcast desktop widget expanded mockup

Custom podcast desktop widget minimized & expanded

Custom podcast desktop widget minimized & expanded

RESPONSIVE MOBILE UX/UI DESIGNS

Custom podcast mobile widget expanded wireframe

Custom podcast mobile widget expanded mockup

Custom podcast in-line mobile widget expanded mockup

 

Bonus Feature: Accessing the Podcast through the menu

In order to get to the podcast page, I started with how someone might be able to find it in the nav, versus thinking about the user journey starting directly on the page. Thinking about the user flow when designing products has helped me determine what components should be repeated in the next page, instead of landing on a new page and it looks different than the layout that a user is accustomed to seeing throughout the rest of the site.

 

Final Presentation & Feedback

POSSIBLE FUTURE ITERATIONS
Could have a more complex content recommendation engine that would give the user more resources pertaining to all podcasts on the series page, versus just one.

The podcast widget could having a loading media design or be moved to a different part of the page.

MENTOR FEEDBACK & REFLECTIONS

My mentor who at the time worked at IBM Studios, thought that I did a lot more than what she would have done given the time allotted and the large scope of the design challenge.

I really enjoyed pushing myself to see what was accomplishable within 24 hours and thought that this was great opportunity to hone my UX/UI Design and presentation skills, given that in my current role at Ellevate, I rarely get to opportunity to do something so creative and under such stakes.

I was really happy to hear that the way in which I organized my files, annotations, and frames was very professional, and my designs very sleek -feedback which I received from both my mentor on the Design Lead at MITTR.

 

To see the presentation, and screens please click this link: MIT Technology Review Design Challenge

Next
Next

MIT Hacking Medicine Grand Hack 2020: Winning 3rd Place