A five days UX Case Study: bringing collaboration into Albelli’s mobile app.

Albelli Share! My graduation project for Codaisseur UX Design Academy

First things first.

With a designer background, in October I decided to start a UX Bootcamp at Codaisseur Academy in Amsterdam. In 10 weeks of intensive classes and training, I wanted to make a switch in my career and become a Junior UX Designer. The redesign that I am going to present is my graduation project and I had 5 five days for this assignment.

For this project, I choose to work in a new feature for Albelli’s photo mobile app. Albelli is a Dutch company that has an e-commerce of personalized products. They are specialized in photo books, wall decorations, maps, photo prints, and mugs.

Disclaimer: As I mentioned, this is a study project and I am not affiliated with Albelli.

Photo Printing?

Yes, photo printing! Now with the huge improvement of cameras on mobile devices, we are taking a lot more photos. According to the Business Insider, in 2017 the number of photos taken was approximately 1.2 trillion. And this number will get higher thanks to the smartphones.

Another point is that people are sharing photos more on messaging apps and on social media each day. The days of taking a flash drive to copy your friend's photos are gone. According to Mary Meeker’s Annual Internet Trends Report, people are uploading an average of 1.8 billion digital images per day.

So if you have all your photos already with you, an app to send it directly to printing to be delivered at your house, printing photos should be awesome, right? Yes, but … (there’s always a but). With really helpful tools to do this being available, there’s still a lot of people that don’t print their photos. But I’ll get to this later.

To start my study I did a guerilla testing of the app to understand more the expectations of an app like this. I also checked the reviews on the online stores where the app is available.

Current App for Albelli

Most of the comments of the users were regarding the navigation: they couldn’t go back to some screens, others wanted to change the product and they couldn’t do it. Also, they couldn’t see lost projects that they closed by mistake. It took them a while to get back and find it.

“Where do I click to go back to choose another product? “ - user
“Where my book went?” - user

One of the biggest complaint was, and also in the app store, the fact that you don’t do all the purchase process on the app. The information gets lost sometimes, it happened once during my testing.

To not let my study become just a redesign of the app that already looks good, I also wanted to bring a new feature to it. In a quick analysis of trends and some competitors, I came up with a problem statement and from that starting point, I would start all my research.

My problem statement for my research.

User Research

I've started the process mapping the user journey for the current app. I understood some of the pain points of the app but I wanted to know more and see through all the steps what opportunities could be there and wasn’t so clear.

User Journey

After understanding more about their business and checking all the points of touch of the brand, like social media, customer services, I’ve started my process defining my users and building my personas: the traveler photographer amateur and the practical Photo Lover.

Personas

Understanding and keeping the user on my focus, I created three job stories, already with some opportunities in mind. So in the next steps, I would be able to research more on it and validate if my assumptions were correct.

Job Stories for the new feature.

Competition

One of the first things that I realized when I was looking for Albelli’s app was the great number of services that are already available. So, mapping and testing the options to rank and see how the competition does their process was crucial. First I mapped the competitors that had similar features and I expanded to products that solve the same need in different ways.

Competitors Analysis

Since there are a lot of similarities in this market, I also did a competitive analysis matrix, picking the most similar competitor and using as comparison criteria, the features available on the apps. For these products, one small thing can distinguish your product from all the others. So with this matrix, I could see clearly these nuances and also check the possibilities of standing out with a new feature.

Competitive Analysis Matrix

Gathering this information helped me a lot to see through the processes of personalized products. I could also see the different approaches in how each company design for their target groups. For example, LaLaLab has a really fresh and more “millennial“ approach on the communication with their customer, that is reflected in the language and product photos on the app. I also checked all the social media channels for these competitors, that gave me more information on brand positioning and I could see that some have a more traditional way, showing products and real everyday photos (that’s where Albelli is) while others have a more “influencer”-based content with photos that are produced with inspiration in mind (some of them look like a board on Pinterest).

Qualitative and Quantitative Research

Time to talk to people! First I set up 10 questions and posted on a Typeform and sent it out to everyone that I knew. In the meanwhile, I went for some qualitative research. I interviewed 4 people in a local café of my neighborhood and got a good range of opinions and could take some takeaways, especially on the routine of taking photos.

The interviewers didn’t have a good knowledge of mobile apps for printing photos and personalized products. They knew about the websites, but it was this.
They mostly try to order online and pick in person.
Use a lot of the kiosks on stores.
Most of them when I presented the app downloaded to check it later.

Most of the people would use a website to print their photos but not the mobile apps. When I questioned them about this, most of them said that they didn’t realize that there were apps for that. And my quantitative research also proved that most people don’t use the available mobile apps because …they don’t know them. One of the questions was “If you don’t print your photos, what would make you start printing photos?” and it was required a short answer. Here are some interesting quotes:

“Not having to edit my photos; having an accessible place to print and not having to organise a photo album”
“Easiness of finding a good printing place”
“Cost x facility. If I could print my photos by an online platform and receive those at home with a affordable price, I would that.”
“To be reminded of it.”
“Effortless service, if I could order a printed photo already with frame, cheap and arriving at my home like a pizza :)”

Below you can see some numbers of it. It was good to see that people would be willing to create new products with friends as they think that personalized gifts would be a nice choice.

Some numbers from the quantitative research. Source: quantitative research done in Dec. 18

SWOT Analysis

With all the information I've collected previously and an in-depth analysis of social media trends, I was able to do an accurate SWOT analysis:

SWOT Analysis

Seeing all products developing collaborative features in the results of my research, I decided that the objective of my project would be:

The objective for my design case.

User Flow and Wireframing

Wireframing in a typical Dutch weather.

Problem defined, opportunities clear, I decided to start my user flow to understand if a sharing and collaborative tool would fit on the current app. And after mapping the current flow I decided to come with a new app, and implement the new feature in the screen that was common to all the products: when the user is editing the product. And also I had to implement a “board” section where everyone could send their pictures and see the pictures before starting to design their product. Knowing the complaints about losing their designs in the process of creation, I decided to also include a signup process in the beginning so it would be easier to control all the boards and products. I decided to name it Albelli Share! to differentiate from the current app.

User flow for the new proposed app.

Now in this app, you can not only create and design your products, but you can also create boards with your friends and use the same photos as them. Also, you can order the same product as your friends and collaborate with them in the creation process.

Wireframe for the new app.

Visual and UI

As I stated that I would not work in app total redesign, I decided to keep the colors and styles of the current app. I did some small tweaks that I thought would be worth trying and to have a different approach with the users, becoming more competitive for a younger audience.

Due to the time constraints I had, I kept the same photos that they use, but I would love to try new product visualizations as well. To help me organize my ideas I created a quick UI style guide for this app, to check also in one single place what were all the changes that I did.

Quick style guide for the proposed app: Albelli Share!

First Design Testing

With my first design ready, I went for some user testing. I'm glad I had time to do it, so I could learn a lot from it and had many insights on how I could iterate on a new version of my design.

The user had this tasks to complete in the mockup:

  • Create a board;
  • Look for the board;
  • Select a board;
  • Select photos;
  • Start a project by choosing a product;
  • In the editing process share the project with friends;
  • Message friends;
  • Order the product;
  • Look for a project;

The main takeaways from this testing were:

  • In my mental model, the main feature for this app would be creating the boards and sharing it with friends, but the app main purpose is to create the product and order it. The big plus in the middle of the screen reflected that, so I needed to come up with a solution that would make the board not the main feature.
  • The icon for messaging friends confused most of the people. They thought it was for sharing.
  • The project on the Profile page wasn’t clear to them. They got really lost on how to find it.
  • There was no indication of where you would be picking the photos. So they got confused about where to pick them. But, when I told them that they would see the folders of their phones, they understood it better.
  • When creating a product, not having a call to action explaining to the user that they needed to choose the product on that stage was also confusing because it looked like the main screen for them.
  • Users couldn’t understand the concept for boards, but when they saw it on screen they understood immediately.
  • In the Summary screen where the user finalized the order, I kept the same design as the current one. All users tried to scroll the screen and look for an order button on the bottom of it, just at the third try that they saw the button to order was on the top right.

Second Design Testing

For the second testing, I implemented most of the feedback that I got from users:

  • Changed the menu to a simpler version, not focusing on boards.
  • Added a necessary call to action on some screens.
  • Added labels on the menu.
  • Changed the icons of messaging.
  • Changed the flow to create the board inside the board screen.
User Testing: Creating a Board
User testing: Creating a project from a board.

With those changes, the test went smoother. The confusion about boards was way lower than the first time because on the menu it was written where to go and when they saw it, it made more sense for them. The same happened with the concept of a project (that is used on the current app). Three out of four users could complete the tasks without any help during the test.

Final Design

From the second version to this one, there were not too many big changes, just some text improvements. You can check the prototype on Figma here.

Final Mockup
Final Screens

Some lessons that I’ve learned in these 5 days.

Be quick to make decisions.

I had 5 days to come out with a lot of deliverables. Making some of the decisions faster would have helped me to move faster. I truly believe that I improved my skills on that but it’s always training and training.

Validation of assumptions.

When I started I just had an assumption for a feature that I imagined that would be good and would make the product stand out in the market. But the conversations I had during the qualitative research and the numbers from the quantitative research were what made really clear which path to go.

Test, Test, Test.

The first testing was crucial for my project and I'm glad that I made it as soon as I finished the first prototype. I could test a different concept and I saw that it was not the right step for this moment. Every user testing in this process was really important and the feedback helped me learn and improve my design.

Be organized.

I started my week creating a Trello board, even though I was working by myself, with all the process and deliverables that I needed to complete on this 5 days. During my morning alone-stand up I could plan my day quicker and thanks to that I didn’t lose so much of my sleep during these days. Also, organizing my layers, frames, screens and planning what could be the components of my design was really helpful in all the changes that I had all the way. When you have such a short time, this is gold! It gave me more time to think about important details because it was way easier to change everything.

Cheers!

Source of the photos: pexels.com


Thank you for reading! If you have any questions or feedback, please feel free to leave a comment or contact me at loize@me.com .

Also, I am not affiliated with Albelli, just a UX Design student that wants to learn more :)