Hello! my name is Godwin Joseph
I am a user interface and experience designer. You can find more about me here.
Allow me to take you through 4 of my recent case studies
My portfolio
Building a user-friendly portfolio
004
Facebook Fuel for India
I designed a platform for Facebook's biggest event in the country with an average viewership of 250K and speakers like Mark Zuckerberg
My role
UX/UI designer
Timeline
8 weeks
Oct-Nov 2020
001
The story
Facebook fuel for India was originally imagined as an on-ground event that was then adapted to a virtual space due to the Covid -19 pandemic. Facebook wanted to tell the stories of people in India who have benefitted from the Facebook ecosystem. The site played host to 4 different live keynotes across 2 days along with more than 60+ pieces of on-demand videos & articles.
We managed to rework the whole event for a digital experience while still keeping the original essence and concept intact. The outcome was a high-quality digital experience that saw over 250,000 unique visitors over a span of two days.
It all started with a video call with teams joining from 4 different countries
I looked at what the experts did
RESEARCH
Since I was the only experience designer on the project and the launch date was predetermined, I started with a project roadmap based on the time and resource constraints.
There was no time to reinvent the wheel
For this project, I relied on the industry's best practices to build a user-friendly website. As this event was all about narrating a story, I started by looking at digital conferences particularly Adobe max 2020. This gave me a good reference point for the overall information architecture. Since this site was also hosting on-demand content, I studied platforms that see heavy content consumption like Netflix and Disney+hotstar.
The project was a race against time from the beginning and so I decided to work parallelly on the website structure while another team finalized the content that had to be hosted on the site. Since the project required us to start designing even before the content was finalized, I decided to work on a general information architecture that could easily accommodate last-minute changes without affecting the overall site structure or design. For eg: I decided to use horizontal navigation that is similar to OTT platforms as it is a familiar navigation style for most users and its ability to scale without affecting the design.
Disney+hotstar (OTT platform)
Facebook Fuel for India
Challenges & decisions
Advocating for the user
CHALLENGE 1
Initially, the event was planned as invite-only and thus I recommended a sign-in step that could collect inputs from the user like name, color theme preference to further customize the user experience. This also meant we could keep track of how many people out of the invite list attended the event.
To sign-in or not to sign-in
Onboarding screen that asks for name, interest & theme preference (Hi-fi wireframe)
Personalized landing page with content based on interest (Hi-fi wireframe)
Later, the decision was made to keep the event open for the masses. I suggested that having a sign-in process, in this case, would increase the bounce rate and advocated for seamless access to content. However, the stakeholders wanted to retain the feature to capture data for future communication.
After explaining the pros and cons of forcing the user to signup for such an event, it was decided to have a registration process based on the cache (no password required) along with an “enter as guest” feature. This helped the user to enter the site without any hindrance.Post-event reports suggest that the site recorded a very low bounce rate of around 4%.
Registration screen 1 with “Explore as a guest”
Registration screen 2: collecting email
Pre-event home page
Opens in a new tab (lucid chart)
Designing for user needs
CHALLENGE 2
To pop-up or not to pop-up
The second challenge I faced while designing the site architecture was to gauge how users will consume on-demand content on the site. Although the OTT platforms that I was basing my research on opened content on new pages, I decided to serve content in a lightbox due to the following reasons-
-
The audience didn't have enough context before opening a story (video/article); therefore, the nature of navigation was more exploratory as opposed to consumption-based.
-
Lightbox serves quick information that doesn't require an entirely new page to load, especially when the user wants to quickly explore the content on offer.
-
On exiting an lightbox, the user returns to the exact spot they left instead of starting from the top.
Exploring content with lightboxes
Opens in a new tab
I also conceptualized the video transitions for the event
ART DIRECTION
Telling the many stories of Facebook
The main keynote during the event was aimed at sharing the many stories of how Facebook has touched the lives of Indians. This 30+ minute stream had speakers from across the world including the founder Mark Zuckerberg.
I conceptualized and directed the transitions between these stories. The idea was to convey that every person has a story inspired by Facebook. The transition was inspired by the random motion of a slot machine that could land anywhere. The transition gave a sense of the many stories facebook had and landing on any would tell you why.
Hello! my name is Godwin Joseph
I am a user interface and experience designer. You can find more about me here.