Curating photo galleries through UX design · a case study

A quick overview

Summary

Pixie is an app designed to help users more easily manage their photos, while providing a fun way to enjoy their favourite pictures!

What's the problem?

People spend too much time taking pictures they never bother to look at.

Here's where I come in.

I see a future where people cherish every picture in their galleries. So to make that a reality, I created Pixie.

My role

I was the sole UX researcher and UX/UI designer on this project, so you could say it's kind of like my baby.

Timeline

10 weeks, from May to July of 2021

Tools

Figma, pen & paper, lots of coffee

Investigating the problem space

Introduction

People take too many pictures. 1.4 trillion pictures will be taken in this year alone (with that number increasing in following years), and every day 300 million pictures are uploaded to Facebook.

Smartphone photography is so accessible these days, it's really no wonder people take more pictures than they need, or even have time to look at.

So why does it matter?

While we're taking all this time photographing our experiences, we're missing out on being present in the very moment we are trying to capture.

And I pondered:

How might we enable people to capture more meaningful moments through photos, so they can spend less time taking pictures and more time enjoying their experiences?

Then I set out to answer the question.

Digging deeper with UX research

Who's most affected?

After doing some more research, I found that millennials store the most photos on their phones out of all the age groups, just shy of 1100 photos on average! This became my target market: millennials who take photos on their smartphones. I went on to find people who fit that description that I could interview.

I wanted to find out:

What do people in my target audience think about this issue? How often do they look at their pictures? How do they decide to keep or delete a picture?

I sought out to know what behaviours, motivations, and pain points my potential users have, so I could design a solution tailored to them.

Interviews were insightful!

Experience souvenirs

I found out people really didn't mind spending time taking pictures, or 'missing out' on an experience (like I had assumed), because they're taking pictures as experience souvenirs, so they can remember a great time they're having.

Just browsing

What they did mention was how much they loved browsing their pictures to help them relax, cheer up, solve boredom, and relive fun memories.

Out of room

All of my interviewees complained about running out of storage on their phones, because they had too many pictures.

If there were just one thing to take away from the interviews, it'd be this:

People love browsing through their photos, but they don't do it as often as they'd like, and this is because they have too many pictures that they just don't care about, and it's overwhelming for them to try to declutter their galleries.

"I know I have too many pictures, but it's too much effort to sort through them all."

Introducing... the persona!

What's the point?

I developed this persona from the specific pain points, behaviours, and motivations I discovered when synthesizing my research. She's going to help me create solutions with people like her in mind (AKA, my target audience), and make decisions based on what would benefit them the most.

Meet Robyn

She loves exploring nature and hanging out with her friends, and she's always taking lots of pictures so she can capture the memories she makes.

She frequently takes pictures and then just... doesn't do anything. She forgets to look at her photos or share them with her friends, which is part of why she takes them in the first place.

She's always running out of room for pictures on her phone, but sorting through them feels like a chore.

This part was pretty epic.

The road from ideas to features

With my persona in mind, I could now create some user stories that would alleviate her pain points and help her achieve her goals. User stories are how I can bridge the gap between the human-centered needs of my persona, and the technical features of my solution. These user stories were then sorted into themes, called epics, which included:

These user stories were then sorted into themes, called epics, which included:

Taking pictures

Browsing

Editing pictures

Sharing pictures

Archiving pictures

And for my primary epic, I chose archiving pictures. This epic focuses on helping users sort through their pictures and keep, delete or share them, which will fix their major pain point of having cluttered photo galleries.

Going with the flow

User stories become tasks

With my primary epic chosen, I could now translate its user stories into tasks, so I could determine the main flow for my app: reviewing pictures to keep or delete. I then created a task flow diagram to show each step a user would need to take in order to complete the task. This helps me understand my users' needs at every point in the process, and in turn, build a better user experience.

And here's the task flow diagram:

The TL;DL (too long, didn't look) is this: Robyn opens the app and sees she has new pictures to review. She goes to see her new pictures, clicks on a specific picture and decides she wants to keep it. She chooses to add the picture to her gallery, and from there she can continue browsing her pictures on the app.

Getting inspired!

Here's where things started getting really fun...

Now that I had determined the main flow of my app, I began looking for design inspiration. I researched different UI elements and design patterns to determine what I could use in my app, that my users would really love.

I wanted my solution to feel like this:

I was so inspired by this picture of a cafe wall. I wanted to make an app that felt like this: cozy and personal. I was thinking about my college dorm room wall that I had plastered pictures all over, so I wouldn't get lonely away from home.

Keeping it easy breezy

I wanted this app to feel different, more exciting than the typical photo gallery on your phone. I looked for things that felt out of the ordinary and fun, because I don't want my users to feel like they're putting in effort to curate their galleries. I want that to be a byproduct of using the app and enjoying browsing through your pictures.

And now... finally putting pen to paper!

General inspiration sketches slowly became more refined

I started sketching different ideas I got from my inspiration, seeing what would work in different combinations. Then I slowly started getting a feel for what I wanted the solution to look like. These are the final paper sketches of what would one day become Pixie:

Wireframing posed unique challenges

It's one thing to sketch out something on paper, but creating digital wireframes forces you to think about (and question) every step in much more detail: how are you going to align all your content? Are all your fonts big enough to be legible? Not to mention, is this solution even going to help people? All of these things were running through my mind as I created my greyscale wireframes:

It's safe to say I had some self-doubt

It's easy to start making decisions based on what you (as the designer) think you'd want, and forget about the persona (remember Robyn?) who you're doing all of this work for. I wanted to make sure I was making the right choices that would benefit my target audience.

Testing... 1... 2... 3...

Recruiting outside help

I continued consulting my research, and built a mid-fidelity prototype that I could test with potential users who fit my target demographic. I asked my users to complete a series of tasks on my prototype, like sharing a picture with a friend, or adding a picture to the gallery, and it was really helpful to see the app from someone else's point of view.

Conducting these tests helped me understand which changes I needed to make, to give my users an experience that felt intuitive, and responded to their needs.​

Users tested the app (and it went great!)

Well, sort of. There was a lot of feedback. From little things like users not understanding what an icon on a button meant, to much bigger issues like users not knowing they could scroll horizontally, and missing out on a huge part of the Pixie experience!

I still say testing went great because this is exactly what I wanted - feedback from people who hadn't been staring at this design for weeks. It really helped put everything into perspective. Things I thought were intuitive (because I built them) were sometimes a little confusing.

Going into the matrix

With all the feedback I received, I needed a way to organize my thoughts and come up with a game plan. I was on a tight deadline and I needed to prioritize. Enter: the priority matrix.

I laid out all the changes I wanted to make to my prototype on a priority matrix, where the items were ranked based on how big their impact would be for my users, and how much effort the changes would take to implement.

Going back into the matrix

After implementing my changes, I tested my app with more potential users (who had not tested the app before), and I found the feedback to be much more focused on small tweaks (to spacing or alignment, for example) and new feature suggestions, because they loved the concept and were excited by the app.

This was a great sign!

It was a pretty good indicator that the changes I made from the first round of testing were successful.

So how did the Pixie brand come to be?

I researched everything!

I looked into branding for millennials, and I found some cool tidbits: they like subtle gradients and soft pastels (think millennial pink and mint, which are so popular these days). They also like deep, bold colours, reminiscent of the 80s and 90s (like those old wacky bus seat patterns).

I wanted Pixie to feel playful and quirky, so my users can have fun while they use my app declutter their galleries.

If Pixie was a mood, it would feel like this:

I selected bright colours and bubbly fonts to showcase the fun, casual vibe of the app.
I then incorporated these into my greyscale prototype, to transform it into my final high fidelity prototype. I also used rounded corners, solid colour drop shadows, and cute visual elements like picture frames and polaroids, that will stand out and catch my users' attention.

Without further ado... the Pixie prototype!

Click the button to view the Pixie prototype in all its glory on Figma, where you can interact as you please!

And here's the screens all laid out, so you can see every part of my beautiful work!

Venturing further

An exploration into marketing

I created a landing page to showcase the app and its awesome features to potential users. I designed the site to be responsive for mobile and web viewports, so page visitors get the best experience, no matter what device they're using.

It was a really fun challenge to come up with the best way to lay out each of the blocks of the website so they were optimized for multiple viewports. To help me, I created a content flow diagram, to visualize the layout changes between the desktop and mobile versions of the site.

Feedback saved the day again!

I felt like the site could look better, but I wasn't really sure what I could change. With feedback from my peers, I was able to make some small tweaks (to increase the white space in the header, and make the gradients a little more subdued) that had a big impact! The changes to the design may be subtle, but they help make the site feel much more cohesive and visually pleasing.

Initial Landing Page

Revised Landing Page

Every interaction is an opportunity for impact

Pixie has the potential to change the way the world interacts with their most cherished pictures. It can make their photo galleries feel like a cozy home that they have built and perfected themselves.

The power of Pixie

This app will help people store less photos, and solve my users' major pain point of running out of storage space. But it can be beneficial to anyone who takes pictures. It allows people to enjoy their favourite pictures, while helping them easily reduce the amount of pictures they keep and curate their photo galleries, without being strenuous or overwhelming.

Over time, Pixie users could see themselves creating some positive habits - they may start thinking about their Pixie galleries while taking pictures, and wondering if they need to be taking this many pictures at a time, or if they should just experience the moment. But even if that doesn't happen yet, I'm going to keep working to improve the Pixie experience, and in turn, how people keep and browse through their favourite photos.

What a journey! What's next, you ask?

More platforms!

I've begun exploring different features I would be able to include on different devices like desktop computers or televisions.

For example, I've started looking into creating an Apple TV version of Pixie, where I could provide a feature for autoscrolling through the gallery and different collections. That way my users can have their favourite pictures scroll in the background while they hang out with their friends!

More features!

A lot of my testers and interviewees suggested ideas that I was really excited by, but just didn't have the time for given the intense time constraints. Eventually, I want to implement all of the features that could help make Pixie even better than it is now!

In the near future I'll be focusing my attention on adding new, ways for users to browse their pictures:

The possibilities are endless, you'll just have to stay tuned!

Getting introspective

Some things I've learned, summed up into three little tidbits of wisdom:

Step away from solutions

A challenge I faced early on was getting really excited by potential solutions without having any research to back them up.

It can be hard not to steer the research to fit your solution and assumptions, but...

Make purposeful decisions

Instead, make every decision with purpose: listen to your research, interviews, and feedback.

Getting perspective from people you are designing the app for is crucial to making an accessible, human-centered experience, that responds to a real need in the target market.

Iterate, Iterate, Iterate

Lastly, iterate and be agile: This process was a learning experience and there were a few times when I wasn’t very careful with my decision making process, and realized later that I should've done something else.

Rather than building on top of a bad foundation, go back to your research and don’t be afraid to re-do work with new insights. It might feel like a lot of work to go back, but its important to acknowledge when your assumptions were wrong and fix them as soon as possible, as these are the challenges that lead to better design.

Thank you so much for reading!