ui/ux/web/mobile
Freetrade
![](https://cdn.prod.website-files.com/615edb5c549d52cd108ed268/6171ed7a216b6c3852342aef_Polygon%205.png)
back to projects
Freetrade
LANDING PAGE REDESIGN
I was given the task of re-designing Freetrade's current website, here I'll take you through my thought process, how I got there, the UX, UI, the design and then final product.
The task was specifically for web but there is also a responsive mobile designed & developed.
The task was specifically for web but there is also a responsive mobile designed & developed.
Aa
Larssiet
Bold
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
!@#$%^&*()
abcdefghijklmnopqrstuvwxyz
0123456789
!@#$%^&*()
Regular
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
!@#$%^&*()
abcdefghijklmnopqrstuvwxyz
0123456789
!@#$%^&*()
Pale Violet Red
primary colour
#F7618B
R 247
G 97
B 137
R 247
G 97
B 137
Mid Turquoise
secondary colour
#21CEC9
R 33
G 206
B 201
R 33
G 206
B 201
Medium Violet Red
secondary colour
#C21C6C
R 194
G 28
B 108
R 194
G 28
B 108
Black
secondary colour
#000000
R 0
G 0
B 0
R 0
G 0
B 0
White
primary colour
#ffffff
R 255
G 255
B 255
R 255
G 255
B 255
PROCESS
Inspiration, Wireframes & Sketches
I started by going through the current design, working out what I could change, what was important to use and any ideas I had to improve on the sections.
I then created a mood board of designs I liked in an attempt to influence my design process from other fintech websites and design inspirations from Dribble.
I then created a mood board of designs I liked in an attempt to influence my design process from other fintech websites and design inspirations from Dribble.
SKETCHES & WIREFRAMES
The next step was to work out the sections to design and sketch them out into a a rough layout on paper.
Once I was happy with the layout, I transferred the designs across to Figma to create a lo-fi wireframe.
Once I was happy with the layout, I transferred the designs across to Figma to create a lo-fi wireframe.
![](https://cdn.prod.website-files.com/615edb5c549d52cd108ed268/6171fbd6e1867504094f6cb8_Handwritten_2021-10-20_164030.png)
![](https://cdn.prod.website-files.com/615edb5c549d52cd108ed268/6171fd72049e002a1c7515f0_Wireframe%20(3).png)
![](https://cdn.prod.website-files.com/615edb5c549d52cd108ed268/6171fbd6ee33ee84546eefbb_Group%2022.png)
FIRST DESIGN
I then developed the sketches and wireframe into a hi-fidelity design on Figma with the Freetrade colours and fonts (as close as I could get).
I left some notes for interactions and animations in areas I could not show as easily in Figma as you can in Webflow, such as horizontal scrolling or transitions.
I left some notes for interactions and animations in areas I could not show as easily in Figma as you can in Webflow, such as horizontal scrolling or transitions.
![](https://cdn.prod.website-files.com/615edb5c549d52cd108ed268/6171f385d27c7180da56aeb3_Wireframe%20(1).png)
![](https://cdn.prod.website-files.com/615edb5c549d52cd108ed268/6171f2cac5bb5271537c35f2_mockuper%20(5).png)
![](https://cdn.prod.website-files.com/615edb5c549d52cd108ed268/6171f2c98dcbc70a0e9bbf5e_mockuper%20(7).png)
![](https://cdn.prod.website-files.com/615edb5c549d52cd108ed268/6171f2cab416789d188ed69d_mockuper%20(8).png)
![](https://cdn.prod.website-files.com/615edb5c549d52cd108ed268/6171f2cafe3ffc60ffc83099_mockuper%20(9).png)
![](https://cdn.prod.website-files.com/615edb5c549d52cd108ed268/6171f2c9fe3ffc5ca3c83098_mockuper%20(10).png)
PROTOTYPE, DEVELOPMENT & MOCKUPS
The next step was to create the design on Webflow to create a finished product whilst including interactions, transitions, scrolling and menu animations (something I realised needed to happen to fit in all the content).
I then made the site responsive for mobile, tablet and horizontal mobile and created some mockups to display the designs in the best way possible.
I then made the site responsive for mobile, tablet and horizontal mobile and created some mockups to display the designs in the best way possible.
![](https://cdn.prod.website-files.com/615edb5c549d52cd108ed268/6171fa4100f5b656cfb29751_freetrade%20mock.png)
![](https://cdn.prod.website-files.com/615edb5c549d52cd108ed268/6172a001f01f355ca5849bd6_FREETRADE%20mockup.png)
![](https://cdn.prod.website-files.com/615edb5c549d52cd108ed268/6172022358c9f41430f5f77e_smartmockups_kv1kx7au.jpg)
![](https://cdn.prod.website-files.com/615edb5c549d52cd108ed268/6172026b13b09868cd2a6fd8_smartmockups_kv1mfeg7.jpg)