Looking For Fashion?

Designflows — UX/UI Case Study for a Design Contest

At the beginning of this year, full of excitement and ready to experience something new, I decided to take part in my first design contest.
I found out about Designflows through a Facebook ad, read its description on the website and decided to give it a try.

Designflows is the first Italian mobile UI design contest. It is organized by Bending Spoons, a fast-growing tech company that produces mobile apps, every year since 2019.
The first thing I did after discovering about the contest was a search to see if I could find other people’s advice on how they faced this challenge in the previous edition. Unfortunately I could not find any article, so I thought I could use my experience here, to help others in the future.

I applied for the contest and on January 24, 2020 at 7pm I received a mail with the link to the creative brief I was about to work on for the following 48 hours.
I was really happy to read that I was about to spend the weekend designing the UX and UI for a mobile app made for pet lovers, as I also am one (yay!).

The brief

The brief described the overall app concept, with some details about the target customers, the app’s sections and the materials to design.
Here is an excerpt from it:

  • The app is for those passionate about pets, and who want to learn more about domestic animals.
  • The target customers are (i) the curious newbie who has, so far, lacked a convenient opportunity to educate themselves on the topic, and (ii) the long-standing aficionado who’s looking for a high-quality, comprehensive app to teach them how to take care of their beloved pets, plus related content to enjoy on the go.
  • The app monetizes through subscriptions. Some content and features are free for all users, while others are reserved for subscribers.
  • There are four sections: Discover (where users are recommended content), Maps (where they can find pet’s shops, veterinary clinics, and so on), Learn (where they can follow an educational track and test their knowledge on pets), and Profile (which includes their history of content consumption, their favourites, their achievements, and some settings).
  • The main navigation between sections may happen through a tab bar UI, or another system of your choosing.

The requirement was to design a poster containing the app’s icon and one version of the Discover, Maps and Paywall screens for iOS or Android in portrait orientation.
The judges would have evaluated the submissions based on their usability, creativity, attention to detail and consistency.

Designing the UX/UI for a contest in 6 steps

A picture of the notes I took in the design phase

This challenge was mainly focused on the UI, but I tried to concentrate as much as possible on the UX process first, as a way to improve the app’s usability and think of the final user first.
I also made this choice to test my capability of handling a situation in which a client requires to design the UX and UI of a product in a short amount of time.

I decided to follow a “simplified” UX design process to better understand the problem, how to solve it, the app’s end users and the right look-and-feel to give to the product.

Step 1: Brief Analysis

The first step was of course analysing the brief to get an overall understanding of the problem and how to solve it.

Problem: Newbie and aficionados to the pet world want to get to know more about domestic animals and how to take care of them. They can’t find a platform that can provide them reliable content and help them reach their goals.

Solution: An app that provides interesting news, podcasts, small courses and tests, curated by experts in the pets field, for pet lovers.

Step 2: Generic Benchmark

Next, it was time for a short competitor analysis.
In situations like this, with limited available time, it is important to find some competitors and study their choices in terms of information architecture, functionalities and UX/UI, to find out what works best and what can be improved.
I could not find any app or website that had the same purpose as the app I was designing, but I found some good competitors for the “Discover” section of the app:

  • “Pets” category on Medium
  • News websites with a section about Pets (e.g. BBC News, The Guardian, HuffPost)
  • Podcasts about pets on Spotify.

Medium and the news websites offered interesting articles with captivating titles and pictures, but they mostly concerned fun facts about pets. Furthermore, the authors of the articles were, most of the time, not animal experts.
These aspects represented an opportunity for the app to be a step ahead of its competitors, offering only content (related to both scientific and curious topics) curated by professionals in the field.

Spotify podcasts were, instead, most of the time held by experts (biologists, veterinaries…) but there were not many, and most were focusing on one specific pet.
With this app, I could provide a place where users could find specific and reliable content about any domestic animal.

A competitor for the Maps section was of course Google Maps. I could offer a similar search functionality as Google’s, but specific to the field of pets, providing tags to easily filter the map, helping the user find what he needed. As Google Maps, the map could show some details about a selected location in the map (opening hours, pictures, reviews and more).

Step 3: Building User Personas

As there was no time to conduct surveys or interviews, I decided to build two User Personas based on the information given by Bending Spoons on the target users for the app and my personal knowledge on the topic.

Bending Spoons identified two categories of users, the aficionado and the newbie: these were my two main personas, Martha and Carlos.

My two user personas, Martha and Carlos
My two User Personas

Step 4: User Stories

To obtain details about the functionalities to design in the app, I defined some user stories based on Martha and Carlos’ wishes.

As an aficionado, I want to…

  • Discover new things about my pets and pets I don’t know about
  • Learn specific information on how to take care of my pets
  • Read fun facts about pets
  • Learn about pets first aid
  • Quickly find pet shops, vets and shelters near me
  • Test my knowledge on pets
  • View my achievements and activities.

As a newbie, I want to…

  • Discover things about my favourite pet
  • Learn how to adopt and take care of a pet
  • Follow courses and test my knowledge on pets
  • Find pet shelters to go visit and help
  • View my achievements and activities.

User stories given, the key features for the app were outlined:

  1. News and podcasts about pets, curated by professionals
  2. Map of pet places, to find the nearest pet shops, veterinary, shelters etc.
  3. Courses and tests to let the users learn about specific topics and test their knowledge
  4. List of activities and achievements, to be able to view a recap of the news, podcasts and lessons followed and the level of achievements obtained.

Step 5: User Flows

User flows were very useful to define the actions the users could perform within the app. I focused on the following use cases:

  • Reading an article and paying for the service
  • Finding a pet shop nearby.
Two User Flows: Reading an article (Discover + Paywall Screens), Finding a pet shop nearby (Maps screen)

Flows were a helpful support tool to design a consistent interface for the application’s screens that the contest required: Discovery, Maps and Paywall.

Step 6: Designing the User Interface

The next morning, after organizing all the information I collected, I started sketching ideas for the three screens and the application’s icon. I opted for iOS as the operating system for the designs.

A user story was my inspiration to design the Discover and Maps screens:

“Martha loves reading articles about pets and learning more about them every day. She opens the app and reads an article on how to help volunteers in pet shelters, recommended to her in the “Discover” section. She decides to follow the advice in the article and buy some pet food to bring to a shelter. Using the app, she goes to the “Maps” section and searches for the nearest pet shop and pet shelter.”
Sketches of the UI

The tools I used were Figma, to design the UI components and the three screens and Adobe Illustrator for the app icon.

Choosing the colours and shapes

I collected many pet photos to choose the colours that would best fit an app about domestic animals.

Collage of pet images for my colour palette
Stock photos from Pexels and Unsplash

“Earthly” colours seemed to be the right choice for this subject, so I extrapolated a colour palette from the pictures to use it in the UI.

The app’s colour palette
The colour palette for the app

About the shapes, I chose to use rounded corners shapes for the app’s components (buttons, article sections…) for both an aesthetic factor and the fact that rounded shapes make information easier to process, by guiding the eyes inside the shape and making the user focus on its content.

The typography

I decided to use two fonts for the application, one serif and one sans serif.
As a serif font to use for titles and big texts I chose Lora, as it conveys the mood of a newspaper article’s title, with a modern touch.

Proxima Nova, my serif choice, is one of the world’s most popular typefaces and a perfect fit for a content-centric app, like the one I was designing.

The fonts I used, Lora and Proxima Nova

The app icon

I designed a very simple yet representative icon for the app, using one of the most universal symbols associated with pets, with a small twist: a paw with a heart-shaped metacarpal pad.

The icon was designed following the shape of icons of the current iOS version, as required by the contest.

Sketches and final iOS icon for the app

The results & my takeaway

I was running out of time when I had to create the final poster for the app to submit to Designflows.
I wish I had more time to dedicate to it, as it was a very important step for the presentation of the work. I really advise everyone to keep a slot of time to dedicate to this important step.
I was filled with adrenaline when I finally hit the submit button, just 5 minutes before the deadline… I did it!

The final poster with Discover, Maps and Paywall screen and the app logo
The final poster with Discover, Maps and Paywall screen and the app logo

This was my first time participating in a design contest, I was really excited to get involved in this new adventure, as well as curious and determined to get to the end.
I worked non-stop during the whole weekend, from morning to night.
The first part of the process, dedicated to following a quick UX Design method, was fundamental to understand how to structure the information, organize the screens and design the functionalities, as well as the type of language and some graphical elements to use in the app.

A good amount of time was reserved to choosing the right UI elements to use, as well as the colours and fonts and trying to give the app its own personality. It was my first time designing the UI of a product from zero, so this part was pretty challenging for me.

My work was not selected by Bending Spoons’ jury, but I am happy I tried this experience and succeeded in delivering everything in time (it was tough!). This experience taught me how to make the right choices in the UX/UI Design process when the time is very limited and which are the most important steps to follow to get to the final result as fast as possible, without losing the eye on the final user.

I recommend participating in one of these contests, as a way to grow and learn a lot in a small amount of time.
And if you are about to try, I wish you good luck. 

The book “Manuale di sopravvivenza per UX designer” by Matteo di Pascale was a useful guide to refer to during this challenge.
Thanks for reading, if you have any doubt about this project, do not hesitate to contact me on LinkedIn.

You can find my Dribbble shot here.

Designflows — UX/UI Case Study for a Design Contest was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.