Alwaysadinosaur

Designing an app for dinosaurs from scratch

Role

Product Designer

Competitive analysis, storyboards, A/B testing, information architecture, user flows, empathy mapping, content prioritization, sketches, wireframes, lo-fi, mid-fi, hi-fi, styleguide, creation of UI library.

Goal

Create an MVP of a mobile iOS application

Timeline

April-May 2021 6 weeks

Client personal review

“Eleftheria is extremely proactive and shows a dedication to projects that is hard to find in the industry these days. Considering she is a junior designer, her abilities, method, and approach rival that of many senior designers I have worked with previously.”

Roberto Dario Sesia CEO Alwaysadinosaur

Deliverables

• Prototype

• Styleguide

• UI library

• Qualitative & quantitative data from competitors research

• Users analysis through : persona, user flows, storyboard, empathy map, experience map
  

Overview

The CEO approached me to design an app based on his original initial idea, for an app where users can create profiles and donate to the charity of their choice. The app will represent a wide spectrum of charities, that have been verified by the organization and deemed trustworthy financially. The unique selling point is:

• There is no app that hosts multiple charities together

• Users will gain rewards by donating through the app

  
  

 Understanding the audience

 I started the process of discovering the spectrum of users that will have in the app. For this reason, I created a survey that we shared on the social media of the app. My primary concerns were:

• Pain points of the users in mobile apps

• Pain points of the users when donating to charities

• The reasons that trigger them to donate

• What apps download 

• What apps they trust and why

100 users replied and I did affinity mapping on their results to understand the main categories of their problems. 

Key takeaways:

• Users download an app if it has interesting features, is popular, easy to use, adds value to their lives, and use it everyday, good looking and good reviews

• Users donate to charities that are reliable, interested about the cause and have some personal connections, for example, a family member of a user has cancer and the user wants to donate only for Cancer

• Users will recommend a new app if it is useful, fun and exciting

• Users avoid signing up to apps unless it is obligatory

• Users main pain points in apps were usage of mobile data and battery, navigation, frustrations if an app doesn’t update but also if an app requires to update it to use it, ads, sign-up process, UX/UI

Design process

Based on the pitch deck and the presentation that the CEO showed me on the first day, we finalized the pages needed for the app I started with sketches and came down to 3 iterations.

Information Architecture

To make sure that the CTA on each page was clear and to prioritize the right content, I created a sheet with each page with the information that has to be stated and the relevant CTAs.

Lo-fi

I started with the low-fidelity wireframes, and I tested it with 5 users. I wanted to understand what users expect from each page and each box on each page.

Testing Key takeaways:

• The app needs to feel like charity comes first - not just trying to make me spend money.

• Include a share button, users expected to have the option of sharing every accomplishment through the app in their social media

• Onboarding pages must prove the value of the app

• Users feel safe if they write the donation amount, than to have a slider

• On the profile page, users wanted to be able to follow other users, see their dinosaur level, see recommended charities based on their previous choices

Mid-fi

Based on the testing from the low fidelity I moved into the mid-fidelity. I tested the mid-fi with a different group of users to get more ideas for features and improve usability.

Testing Key takeaways:

• Give the opportunity of one-time payment option or monthly subscription, make sure it’s clear

• Rewording on “Join herd” button users believed this takes them to the payment page

• Add the number of followers, people that donated to each charity so the users will know how popular a charity is

• On the profile page, the buttons for follow and unfollow were not clear

• Name the icons on the footer

Difficulties & reflection

During this project, I worked closely with the CEO and developer of the app. I learned how to design with a focus on what a developer would expect to see when submitting the wireframes. I realized that in every stage of the process your designs have to be clear and ready to be submitted with every component linked to the original UI library. 

Final hi-fi wireframes Version 1.0

Arriving at the high fidelity stage: even though the investor loved the idea of having so many features in the app such as organizing group activities, group challenges, message other users, post and like other posts, the charities wanted to move forward with a simpler version of it. They asked for an app that will only have each charity’s profile, the user will be able to create a profile, donate and check his/her world impact based on the donations made. For this reason, I extracted the wireframes needed and I created a new version of the app, which is I named Version 1.0 and I kept the rest of the wireframes for future updates.

Testing Key Takeaways

• Users wanted more clear payment page

• They wanted to be able to set up goals based on their impact, for example, plant 100 trees by the end of the year

• They wanted to be able to see their dinosaur level but also the previous and following level on the profile page

• They wanted to make the rewards more visible on the dinoscore level which is the page that states all the different dinosaur levels and rewards in each one
  

Iterations

Here you can see the progress of a single page, the presentation of a charity.

• Minimize CTA buttons and make sure the wording is clear (e.g. subscribing is not clear as it might mean monthly payment and not a one-off)

• I added the sponsors and the rewards you gain from donating to this charity

• The tags are more visible and clear

• The user can choose the world impact, how the charity will use the money donated to them

• On the hi-fi version 1.0, there is no footer as mentioned above as most of the features are gone and this is the simpler version
  
  

  Next steps

• The designs submitted to the developers to create the app

• Keep track of the data based on the real users, that are using the app

• Test the features we have created first

• Add the features for the app update