Equidio - For horse owners and their caretakers
Equidio - For horse owners and their caretakers
Where
Poland
What
Mobile app
Why
Commercial project
Role
UI Designer
When
Start Nov. 2023
Nov. 2023
Category
Horse, stats, health tracking
Project overview
Commissioned work for a client that wanted me to help him design an app themed around horses. Equidio app lets you organize your horse working plan effectively, plan trainings and keep track of the information about your horses.
After I was provided with some wireframes and initial mockups along with information structure I began my work on UI design of this app.
Commissioned work for a client that wanted me to help him design an app themed around horses. Equidio app lets you organize your horse working plan effectively, plan trainings and keep track of the information about your horses.
After I was provided with some wireframes and initial mockups along with information structure I began my work on UI design of this app.
The goal
Combining features from multiple apps into a single application to give users everything they need in one place, thereby increasing the chances of the app being used.
Combining features from multiple apps into a single application to give users everything they need in one place, thereby increasing the chances of the app being used.
Quick process overview
1
Research
Writing down/organizing features and sections that will be in the app
Researching app store to check out the competition
Looking for inspiration and creating moodboard
2
Early Design
Based on provided mockups I went to establish typography and spacing
Figuring out inital layout for elements in the app
Adding new screens/views
3
Mockups
Further working on design adding color and other graphic elements
Trying to focus on being consistent: spacing, icons, colors, typography
4
Final Design
Gathering feedback to further improve my design
Double checking if everything is alright, checking contrasts, spacing etc.
What inspired me
Here are screens from apps I’ve checked out. The goal was to:
Inspire myself with structure and layout of these apps.
What do they present?
How do they look?
What elements do they include?
All about color
First thing I had to do was to adjust primary color so it wasn’t as saturated (vibrant) to attract users attention. While also improving contrast for white text.
Old Primary Color
Old Primary
#9261AD
New Primary Color
New Primary
#762378
Next I created a whole tint and shadow scale that would be used in this project, along with neutral colors.
50
#F9EBF9
100
#EDC4EE
200
#E19CE2
300
#D475D7
400
#C84DCB
500
#AF34B2
600 - Primary color
#F9EBF9
700
#F9EBF9
800 - Dark text color
#F9EBF9
900
#F9EBF9
Typography choice
Headline
H1
20px
Bigger text
Text
18px
Bigger text
Text/H2
16px
Normal text
Text
16px
Small text
Text
14px
Label
Label
14px
Label
Label
12px
Aa
Nunito Sans
Regular
Aa
Nunito Sans
SemiBold
Aa
Nunito Sans
Bold
How it progressed
I wanna showcase a comparison between some of the inital mockup and final version,
First mockup had some problems that I fixed:
Spacing between elements
Size/color of headings and text
Removed bento menu as its use was wrong
Spacing between elements
Size/color of headings and text
Removed bento menu as its use was wrong
Changed “calendar event” component to more visually pleasing
Changed color of “add” button to match primary color for consistency
Small adjustment to bottom nav bar
Before
Now
Before
Now
Inside the project: Component examples
Bottom nav bar
Calendar
Input field
BG photo slider
Event
Grid & Contrast
I used an 8pt grid system where ocasionally I used 4pt or 12pt when it was necessary. Margin was set to 16pt.
Contrast ratio:
8.22
Contrast ratio: 16.12
Contrast ratio: 7.04
Contrast
Grid
Keeping it clean and tidy
It's important to keep your file organized and layers properly named.
Michał Wroński
Frontend Developer
"As a developer, I particularly appreciate how well-prepared Artur's files are. What I value the most is that Artur pays attention to every detail—layer names are consistent, all elements are organized, and everything is set up for implementation. This makes working with his projects smooth and significantly speeds up the process".
Final design presentation
Thoughts at the end
Equidio project helped me further grow as a designer as I worked on it. It was a good opportunity to collaborate on it alongside a UX designer and a developer. What I learned:
Keeping up with the consistency of the design
Working in a small team
Working with lots of data and multiple screens
Proper file organization
Feedback is very crucial to designer’s work
Thank you for checking out my case study. I encourage you to contact me. Hope you’ll have a good day! ☀ ️
Message me at @
Connect with me at
Copyright
© 2023 Artur Niedzielski. All rights reserved. Built with Framer.
Copyright
© 2023 Artur Niedzielski. All rights reserved.
Built with Framer.
Why
Commercial project
What
Mobile app
Where
Poland
Category
Horse, stats, health tracking
Role
UI Designer
When
Nov. 2023
Project overview
Commissioned work for a client that wanted me to help him design an app themed around horses. Equidio app lets you organize your horse working plan effectively, plan trainings and keep track of the information about your horses.
After I was provided with some wireframes and initial mockups along with information structure I began my work on UI design of this app.
The goal
Combining features from multiple apps into a single application to give users everything they need in one place, thereby increasing the chances of the app being used.
Quick process overview
1
Research
Writing down/organizing features and sections that will be in the app
Researching app store to check out the competition
Looking for inspiration and creating moodboard
2
Early Design
Based on provided mockups I went to establish typography and spacing
Figuring out inital layout for elements in the app
Adding new screens/views
3
Mockups
Further working on design adding color and other graphic elements
Trying to focus on being consistent: spacing, icons, colors, typography
4
Final Design
Gathering feedback to further improve my design
Double checking if everything is alright, checking contrasts, spacing etc.
All about color
First thing I had to do was to adjust primary color that wasn’t as saturated (vibrant) to attract users attention. While also improving contrast for white text.
Old Primary Color
Old Primary
#9261AD
New Primary Color
New Primary
#762378
Next I created a whole tint and shadow scale that would be used in this project along with neutral colors.
50
#F9EBF9
100
#EDC4EE
200
#E19CE2
300
#D475D7
400
#C84DCB
500
#AF34B2
600 - Primary
#F9EBF9
700
#F9EBF9
800 - Dark text
#F9EBF9
900
#F9EBF9
What inspired me
Here are screens from apps I’ve checked out. The goal was to:
Inspire myself with structure and layout of these apps.
What do they present?
How do they look?
What elements do they include?
Inside the project: Component examples
Bottom nav bar
Calendar
Input field
BG photo slider
Event
Typography choice
Headline
H1
20px
Bigger text
Text
18px
Bigger text
Text/H2
16px
Normal text
Text
16px
Small text
Text
14px
Label
Label
14px
Label
Label
12px
Aa
Nunito Sans
Regular
Aa
Nunito Sans
SemiBold
Aa
Nunito Sans
Bold
How it progressed
I wanna showcase a comparison between some of the inital mockup and final version,
First mockup had some problems that I fixed:
Spacing between elements
Size/color of headings and text
Removed bento menu as its use was wrong
Changed “calendar event” component to more visually pleasing
Changed color of “add” button to match primary color for consistency
Small adjustment to bottom nav bar
Before
Now
Before
Now
Keeping it clean and tidy
Its important to keep your file organized and layers properly named.
Michał - Frontend dev
"As a developer, I particularly appreciate how well-prepared Artur's files are. What I value the most is that Artur pays attention to every detail—layer names are consistent, all elements are organized, and everything is set up for implementation. This makes working with his projects smooth and significantly speeds up the process".
Grid & Contrast
I used 8pt grid system where ocasionally I used 4pt or 12pt when it was necessary. Margin was set to 16.
Contrast ratio:
8.22
Contrast ratio: 16.12
Contrast ratio: 7.04
Final design presentation
Thoughts at the end
Equidio project helped me further grow as a designer as I worked on it. It was a good opportunity to collaborate on it alongside a
UX designer and a developer.
What I learned:
Keeping up with the consistency of the design
Working in a small team
Working with lots of data and multiple screens
Proper file organization
Feedback is very crucial to designer’s work
Thank you for checking out my case study. I encourage you to contact me. Hope you’ll have a good day! ☀ ️
Message me at @
Connect with me at