michael eleder
product designer
london, uk

Mobile App

Fitnes & Social

National Bank

Mobile App

Fitnes & Social

National Bank

Mobile App

Fitnes & Social

Fitness & Social App

Mobile App

Fitnes & Social

Fitness & Social App

Client

Startup - Fitness & Community App

My role

UX/UI Lead - Sole Designer

idea validation

UX

UI

Scope

PM

wireframes

workshops

market research

personas

user interviews

prototype

design systems

qa

Challenge

Helping the client reduce the feature set and adjust the business model was equally important as the design itself.


A good amount of research was needed to select the right UX patterns for our target users, elderly individuals we aimed to encourage to be more active and social.

Outcome

Client very delighted with the result just as their investor who expressed interested in further collaboration

Client

Startup - Fitness & Community App

My role

UX/UI Lead - Sole Designer

idea validation

UX

UI

Scope

PM

wireframes

workshops

market research

personas

user interviews

prototype

design systems

qa

Challenge

Designing an app for the elderly has its obvious challenges. We also helped the client choose the correct feature set for the right business model.


Helping the client reduce the feature set and adjust the business model was equally important as the design itself.

Outcome

Client very delighted with the result just as their investor who expressed interested in further collaboration

Client

Startup - Fitness & Community App

My role

UX/UI Lead - Sole Designer

idea validation

UX

UI

Scope

PM

wireframes

workshops

market research

personas

user interviews

prototype

design systems

qa

Challenge

Helping the client reduce the feature set and adjust the business model was equally important as the design itself.


A good amount of research was needed to select the right UX patterns for our target users, elderly individuals we aimed to encourage to be more active and social.

Outcome

Client very delighted with the result just as their investor who expressed interested in further collaboration

Client

Startup - Fitness & Community App

My role

UX/UI Lead - Sole Designer

idea validation

UX

UI

Scope

PM

wireframes

workshops

market research

personas

user interviews

prototype

design systems

qa

Challenge

Helping the client reduce the feature set and adjust the business model was equally important as the design itself.


A good amount of research was needed to select the right UX patterns for our target users, elderly individuals we aimed to encourage to be more active and social.

Outcome

Client very delighted with the result just as their investor who expressed interested in further collaboration

Discovery

Discovery

Discovery

Discovery

Mobile Mockup with dummie content
Mobile Mockup with dummie content
Mobile Mockup with dummie content
Mobile Mockup with dummie content

Testing legibility in various environments

Testing legibility in various environments

Testing legibility in various environments

Testing legibility in various environments

Intro

Intro

Intro

Our client wanted to motivate elderly people to be more physically and socially active by creating challenges and collecting rewards in the form of coins called ‘FitQuids’ which can be used to buy products from their affiliate partners.

Our client wanted to motivate elderly people to be more physically and socially active by creating challenges and collecting rewards in the form of coins called ‘FitQuids’ which can be used to buy products from their affiliate partners.

Idea Validation

Idea Validation

After winning the initial pitch we helped (me and the company co-founder) the client to shape their idea into a project we can stand by.

We reduced the feature set and made some changes to the gamification aspect and their monetisation model.

After winning the initial pitch we helped (me and the company co-founder) the client to shape their idea into a project we can stand by.

We reduced the feature set and made some changes to the gamification aspect and their monetisation model.

Mobile Mockup with dummie content
Mobile Mockup with dummie content
Mobile Mockup with dummie content
Mobile Mockup with dummie content

Placing a realistic image of targeted user type helps to show if the interface matches the demographic well.

In my case, although the UI is pretty playful, I managed to use this ‘tactic’ to avoid making it more colourful.

Placing a realistic image of targeted user type helps to show if the interface matches the demographic well.

In my case, although the UI is pretty playful, I managed to use this ‘tactic’ to avoid making it more colourful.

Placing a realistic image of targeted user type helps to show if the interface matches the demographic well.

In my case, although the UI is pretty playful, I managed to use this ‘tactic’ to avoid making it more colourful.

Market research

Market research

Market research

I looked at other fitness and community apps with similar gamification elements. I compared their business models and categorised them by popularity to have a better picture of what seems to work or not.

Project setup

Project setup

Project setup

After finalising the MVP feature set I came up with a budget estimate and project timeline. When it all get signed off the project was ready to kick off!

User interviews

User interviews

User interviews

We conducted a couple of interviews with people in the target age range to learn about their health habits. We gained insights into how they used technology (which was more then I expected). We also discussed what would motivate them to participate in the types of challenges the app would feature.

Mobile Mockup with dummie content

This is NOT a moodborad for this project but an example of a very similar one

Mobile Mockup with dummie content

This is NOT a moodborad for this project but an example of a very similar one

Mobile Mockup with dummie content

This is NOT a moodborad for this project but an example of a very similar one

Mobile Mockup with dummie content

This is NOT a moodborad for this project but an example of a very similar one

Visual style

Visual style

Visual style

A Graphic Designer who previously designed the logo proposed a brand identity resembling high intensity sports brands. I suggested that this visual direction might not have been suitable for the brand. The app promotes time spent outdoors and with community, where the most intense activity is hike.

I put together a few moodboards with different fonts, colour palettes and UI styles so the client had more control over the direction than simply pitching them my favourite style.

Design Phase

Design Phase

Design Phase

Design Phase

Mobile Mockup with dummie content
Mobile Mockup with dummie content
Mobile Mockup with dummie content
Mobile Mockup with dummie content

Wireframes

Wireframes

Wireframes

I enjoyed the freedom from my employer to choose a process in which I thought worked best for each specific project. Wireframes are a typical example of what shouldn’t be automatically used but only when makes sense.

In this project, we had to determine some of the basic rules right at the begging which we needed to visualise using low-fidelity wireframes before starting the design phase.

I enjoyed the freedom from my employer to choose a process in which I thought worked best for each specific project. Wireframes are a typical example of what shouldn’t be automatically used but only when makes sense.

In this project, we had to determine some of the basic rules right at the begging which we needed to visualise using low-fidelity wireframes before starting the design phase.

It happened to me before that clients spent way too much time on wireframes getting every single detail right.

For this reason I always make it very clear that wireframes are just to get the basics right and some of the details can be easily changed later in the UI phase.

It happened to me before that clients spent way too much time on wireframes getting every single detail right.

For this reason I always make it very clear that wireframes are just to get the basics right and some of the details can be easily changed later in the UI phase.

It happened to me before that clients spent way too much time on wireframes getting every single detail right.

For this reason I always make it very clear that wireframes are just to get the basics right and some of the details can be easily changed later in the UI phase.

User Interface

User Interface

User Interface

The first thing that comes to mind when designing for older people is to make the interface and mainly the fonts larger. I also made sure the visuals and density of information would stay at a minimum. When it came to the navigation I used many card overlays which work great for giving users the context of where they are in the app.

Although the interface is playful I managed to tone it down a little by using a more subtle colour palette and a font combination consisting of Serif Font giving it a more mature feel.

The first thing that comes to mind when designing for older people is to make the interface and mainly the fonts larger. I also made sure the visuals and density of information would stay at a minimum. When it came to the navigation I used many card overlays which work great for giving users the context of where they are in the app.

Although the interface is playful I managed to tone it down a little by using a more subtle colour palette and a font combination consisting of Serif Font giving it a more mature feel.

Mobile Mockup with dummie content
Mobile Mockup with dummie content
Mobile Mockup with dummie content
Mobile Mockup with dummie content

Onboarding

Onboarding

Want to see what’s in your area? Give access to your location and we will show you.

Onboarding

Mobile Mockup with dummie content
Mobile Mockup with dummie content
Mobile Mockup with dummie content
Mobile Mockup with dummie content

Homescreen

Homescreen

Want to see stats of your activity? Well, then it’s understandable an account is needed.

Homescreen

Mobile Mockup with dummie content
Mobile Mockup with dummie content
Mobile Mockup with dummie content
Mobile Mockup with dummie content

Challenge screen

Challenge screen

Want to do more than just participate? You can join FitQuid Plus to do that.

Challenge screen

Account-free onboarding

Account-free onboarding

Account-free onboarding

Account-free onboarding

While I was researching other apps, I noticed how painfully long and difficult the onboarding was. Having to create an account and confirm various permissions would sometimes discourage me from giving the app even a try.

User Interviews also showed us that the older generation is very careful with whom they share their personal details with.

After trying to make registration as easy as possible we decided to allow users to access the app without having a profile. The only onboarding screen is to set the main activity goal.

  1. Of course, we wanted users to create an account, but we thought to ask them to register more carefully after they familiarised themselves with the app. For example, a user may be asked if they want to use detailed stats of their activity, then prompted to create an account to access the feature.

  2. Many apps overwhelm us with multiple permission pop-ups right at the beginning when we have no context, so we’re unsure why the app needs to access so many things. Asking for permissions only when it’s needed gives users an easy explanation as to why it’s needed.



  3. There is also a paid tier but we didn’t want to scare people off by showing it right at the beginning. There is no paywall in accessing all the app has to offer. However, if you are a long-term user you might want to have some premium features you are happy to pay a little something for.

Mobile Mockup with dummie content
Mobile Mockup with dummie content
Mobile Mockup with dummie content
Mobile Mockup with dummie content

Want to see what’s in your area? Give access to your location and we will show you.

Want to see what’s in your area? Give access to your location and we will show you.

Want to see what’s in your area? Give access to your location and we will show you.

Mobile Mockup with dummie content
Mobile Mockup with dummie content
Mobile Mockup with dummie content
Mobile Mockup with dummie content

Want to see stats of your activity? Well, then it’s understandable an account is needed.

Want to see stats of your activity? Well, then it’s understandable an account is needed.

Want to see stats of your activity? Well, then it’s understandable an account is needed.

Mobile Mockup with dummie content
Mobile Mockup with dummie content
Mobile Mockup with dummie content
Mobile Mockup with dummie content

Want to do more than just participate? You can join FitQuid Plus to do that.

Want to do more than just participate? You can join FitQuid Plus to do that.

Want to do more than just participate? You can join FitQuid Plus to do that.

Gamification

Gamification

Gamification

Gamification is a great idea to motivate users and to make the app more fun. That said, it was initially planned to be much more essential to the app and I thought it would be better to make some game elements optional only for those who are interested.

Gamification is a great idea to motivate users and to make the app more fun. That said, it was initially planned to be much more essential to the app and I thought it would be better to make some game elements optional only for those who are interested.

Mobile Mockup with dummie content
Mobile Mockup with dummie content
Mobile Mockup with dummie content
Mobile Mockup with dummie content

achievements page

achievements page

Want to see what’s in your area? Give access to your location and we will show you.

achievements page

Mobile Mockup with dummie content
Mobile Mockup with dummie content
Mobile Mockup with dummie content
Mobile Mockup with dummie content

success pop up

success pop up

Want to see stats of your activity? Well, then it’s understandable an account is needed.

success pop up

Mobile Mockup with dummie content
Mobile Mockup with dummie content
Mobile Mockup with dummie content
Mobile Mockup with dummie content

completion pop up

completion pop up

Want to do more than just participate? You can join FitQuid Plus to do that.

completion pop up

Challenge creation

Challenge creation

Challenge creation

We allowed users to create different challenges that would be measured in many different ways. For example a photo at a certain specific location, the number of steps taken, a timer and much more.

We allowed users to create different challenges that would be measured in many different ways. For example a photo at a certain specific location, the number of steps taken, a timer and much more.

Mobile Mockup with dummie content
Mobile Mockup with dummie content
Mobile Mockup with dummie content
Mobile Mockup with dummie content

list of challenges

list of challenges

Want to see what’s in your area? Give access to your location and we will show you.

list of challenges

Mobile Mockup with dummie content
Mobile Mockup with dummie content
Mobile Mockup with dummie content
Mobile Mockup with dummie content

new challenge creation

new challenge creation

Want to see stats of your activity? Well, then it’s understandable an account is needed.

new challenge creation

Mobile Mockup with dummie content
Mobile Mockup with dummie content
Mobile Mockup with dummie content
Mobile Mockup with dummie content

new challenge creation

new challenge creation

Want to do more than just participate? You can join FitQuid Plus to do that.

new challenge creation

Neumorphism UI

Neumorphism UI

Neumorphism UI

This is the name of a very popular UI trend that you can find all over Dribbble. However, as most Designers agree, most of these trendy UIs are totally unusable in the real word.

I decided to use this style only for interactive elements which allowed me to use Neumorphism with specific intent. This improved the user experience by highlighting the UI elements you should interact with.

This is the name of a very popular UI trend that you can find all over Dribbble. However, as most Designers agree, most of these trendy UIs are totally unusable in the real word.

I decided to use this style only for interactive elements which allowed me to use Neumorphism with specific intent. This improved the user experience by highlighting the UI elements you should interact with.

Mobile Mockup with dummie content
Mobile Mockup with dummie content
Mobile Mockup with dummie content
Mobile Mockup with dummie content

duration selection

duration selection

Want to see what’s in your area? Give access to your location and we will show you.

duration selection

Mobile Mockup with dummie content
Mobile Mockup with dummie content
Mobile Mockup with dummie content
Mobile Mockup with dummie content

deposit amount

deposit amount

Want to see stats of your activity? Well, then it’s understandable an account is needed.

deposit amount

Mobile Mockup with dummie content
Mobile Mockup with dummie content
Mobile Mockup with dummie content
Mobile Mockup with dummie content

timer

timer

Want to do more than just participate? You can join FitQuid Plus to do that.

timer

Shop

Shop

Shop

After comparing various different layouts, and category tabs, a winner became clear, not only for the simplicity but also because it’s a pattern people are used to.

Using popular UX patterns isn't laziness but it's literally the essence of a user-friendly design. Design is to be used and what do we use the easiest? Something we've used before!

Unique design patterns may look like a cool piece of art but its bad user experience makes it a horrible design.

Using popular UX patterns isn't laziness but it's literally the essence of a user-friendly design. Design is to be used and what do we use the easiest? Something we've used before!

Unique design patterns may look like a cool piece of art but its bad user experience makes it a horrible design.

Using popular UX patterns isn't laziness but it's literally the essence of a user-friendly design. Design is to be used and what do we use the easiest? Something we've used before!

Unique design patterns may look like a cool piece of art but its bad user experience makes it a horrible design.

Mobile Mockup with dummie content
Mobile Mockup with dummie content
Mobile Mockup with dummie content
Mobile Mockup with dummie content

duration selection

duration selection

Want to see what’s in your area? Give access to your location and we will show you.

duration selection

Mobile Mockup with dummie content
Mobile Mockup with dummie content
Mobile Mockup with dummie content
Mobile Mockup with dummie content

deposit amount

deposit amount

Want to see stats of your activity? Well, then it’s understandable an account is needed.

deposit amount

Design Systems

Design Systems

Design Systems

Design Systems

Font & Colour Styles

Font & Colour Styles

Font & Colour Styles

Font & Colour Styles

Custom-made icons

Custom-made icons

Custom-made icons

Custom-made icons

Components

Components

Components

Components