An interactive prototype to creatively display my photographs of India— inspired heavily by Spotify’s design (and some features from Netflix too).
Over the past few years, I’ve had the opportunity to travel around and unearth some of India’s treasures — from the golden sand dunes in Jaisalmer to the otherworldly stacked boulders in Hampi…from the tiger’s royal stride in Ranthambore’s forest to the ancient stone-carved temples outside of Udaipur.
As an avid documenter, I took my camera wherever I went, but most of the photos remained in folders stowed away on my hard drive. I wanted to find a way to display them creatively and to show the large variety of landscapes in India. I often dreamt of an interactive map through which you could discover the unique offerings of different states.
When I began my journey into the design world earlier this year, I realised that it would give me the technical chops to make my interactive map dream a reality. So that’s where this journey began.
Initial Concept
My first idea was to create an interactive map, where you could click on different locations (“pins”) and see photo highlights from that place. I thought this would be a fun, visual way to discover new places and see how they fit into the map of India as a whole.
To start off, I couldn’t find a vector map of India in the Figma community (and neither online) so I decided to create one myself for the initial prototype.
However, I quickly realised that this concept wouldn’t work too well as it would be hard to scale down responsively on a mobile device… It would be impossible to display both the map as well as the images on a small screen without compromising on accessibility and the overall user experience. If you had to keep switching between the map view and the photo view, that would entail too many clicks — which would be far from the seamless UX I had envisioned.
Design Exploration
So, I decided to pivot. Around the same time, I stumbled upon this super insightful podcast on design thinking at Netflix. In the podcast, one of the designers mentioned how she was brainstorming, “what if Netflix was Instagram,” “what if Netflix was Pinterest,” and so on…and this ultimately led to the development of a feature on Netflix that was inspired by Instagram stories. Following that line of thinking, I wondered — “what if Spotify, but for pictures.”
Why Spotify? For its design that enables seamless and intuitive discovery of music (which could be coopted to discover photos instead). Besides, recreating Spotify’s UI pixel for pixel was an exercise I’d been wanting to do for a while — inspired by the book Steal Like An Artist.
In the beginning, we learn by pretending to be our heroes. We learn by copying. — Austin Kleon, Steal Like An Artist
I started by taking screenshots of the interfaces I wanted to recreate — the home, song and playlist screens. After many nights of perfecting pixels (and digging up pixels from my hard drive), I landed up with recreations of Spotify’s interface, adapted for my photos.
Side by side screenshots and recreations of Spotify’s UI
PROTOTYPING
I linked up all the screens into a functioning prototype, attempting to mimic Spotify’s microinteractions through animations.
User Testing
I showed my prototype to a number of people and observed how they interacted with it both in person and online. This was extremely useful in understanding what worked well and what didn’t, and helped shape the next iteration of the design.
Here is some of the feedback received, and correspondingly some of the things I changed:
(1) People attempted pinching the screen to zoom in and indicated that they wanted to see larger images → I made the images full screen for a more immersive experience
(2) Having dead buttons and functions that didn’t work was frustrating and added distraction → I pared the prototype down so that every button had some functionality and was clickable
(3) People did not understand that the “next” and “previous” music buttons were for going to the next/ previous location → I added a “discover next place” at the end of each photo stream to make it more intuitive to go to the next location.
(4) The prototype loaded slowly, which was again a frustrating experience and caused people to lose interest → I attempted to use several image compression plugins on Figma, but it was finally Photoshop’s bulk resize feature that saved the day and helped make the prototype lightweight.
Here are the before and after versions of the Prototype:
Prototype before feedback
Prototype after feedback
Additional Changes
I also decided to add in a few features from Netflix, like this Top 10 UI for its dramatic, visual appeal. (Although mine is still rough around the edges)
…I also coopted Netflix’s “Play Something” feature I’d read about and loved. The feature enables you to get served content when you simply can’t make up your mind about what to watch…One for the indecisive mind that often plagues travellers.
Final Outcome & Reflection
Here I present to you an interactive prototype with my best photos of a few of places I’ve visited in India — heavily inspired by two of my favourite apps, Spotify and Netflix. I hope you enjoy clicking around discovering glimpses of this multifaceted country.
P.S: this is not an idea for an app, it’s simply a way for me to display my photos creatively (and practise my design skills along the way).
Here’s a sneak peak of what you can do and find — if you want to try it out yourself click here.
Overall, I was quite happy with the look and feel of the prototype and received positive feedback from fellow designers:
“This is pretty neat! UI looks very polished, good job. The “Surprise Me” option is a nice touch btw.”
“I used it on my phone & I love the UI. It’s smooth and simple.”
“Aha the integration of gallery functions with the Spotify UI is interesting”
Compared to my initial map-based concept, I was happy that this was mobile-first, that the discovery of places was seamless and that it was a more immersive experience.
If I had more time to dedicate to this project, I would have pushed the photo-album concept further and included the ability to zoom into each image so that the photographs could be viewed in more detail. I would have also included a caption and date for each image to add more context and to make it more like a repository of memories than just images.