A rebrand can impact the design of the brand (logo, color palette, typography, photography, icons, etc.) to more competitively position itself in the marketplace.
When I decided to update the ”Filed” logo, one thing I wanted to especially highlight was the 3D imagery in their brand. I wanted to do this because I knew it would make the brand more unique. I was looking for something to symbolise the first letter ”F” so I played with different shapes, colors and shadows. Under this symbol appears the name of the company so the users can associate better other of them.
When I decided to update the ”Filed” logo, one thing I wanted to especially highlight was the 3D imagery in their brand. I wanted to do this because I knew it would make the brand more unique. I was looking for something to symbolise the first letter ”F” so I played with different shapes, colors and shadows. Under this symbol appears the name of the company so the users can associate better other of them.
Research, Design, Production and Delivery
Process
3. Persona
Research
1. Understanding the problem
2. Brief
3. Persona
4. Create mood board(s)
2. Brief
3. Persona
4. Create mood board(s)
2. Brief
Design
I keep in mind this scheme each time I’m starting a new project. From researching and sketching first wireframes to prototypes, I gradually created the entire version of the website/app.
At the discovery phase of my project, I found out that ”Filed” need their website homepage to be re-designed with new branding (for both web and mobile).
Based on the task that I received, I started to complete the brief in order to familiarise with the project in an efficient manner.
Once I decided all the aspects above, I started to sketch the homepage wireframe according to my client requirements. I was thinking how to safely redesign the ”Filed” website without entirely destroy the old version. I was about to approach a less risky changes of the interface, but, at the same time, to make improvements of style and colors.
1. Understanding the problem
Filed
Using the quantitative and qualitative data from the task, I defined the target persona profile (Anna) to better empathise with my main user groups and prioritise goals according to their needs.
A very important step for any of my design projects is setting the mood, because it helps me to get on the same page for the visual aspects of the project. So I try to do my best in collecting the images, fonts, interactions, features, icons, and UI elements to communicate the artistic direction of a project. Every mood board is focused on meeting user needs and problem-solving.
4. Create mood board
BEFORE
AFTER
When I searched for the icons, I was thinking that clipart style will match perfectly with the idea of marketing. They’re more expressive and can easily catch user’s eye. This way, the office man became a key character for the entire company design.
I decided the final colors for rebranding the website according to the logo and to the mood board. Purple combines the calm stability of blue and the fierce energy of red. The color purple is often associated with power and ambition. I chose purple as the main color for this project, because it has a variety of effects on the mind and body, including uplifting spirits, calming the mind and nerves, enhancing the sacred, creating feelings of spirituality, increasing nurturing tendencies and sensitivity, and encouraging imagination and creativity.
Because the purple color is created by combining a strong warm with a strong cool color, the color retains both warm and cool properties. On one hand, the color purple can boost imagination and creativity, on the other, too much purple can cause moodiness. This is the reason why I combine it with a nuance of mint green for a beautiful mix.
Because the purple color is created by combining a strong warm with a strong cool color, the color retains both warm and cool properties. On one hand, the color purple can boost imagination and creativity, on the other, too much purple can cause moodiness. This is the reason why I combine it with a nuance of mint green for a beautiful mix.
Body Copy - Roboto
Body Copy - Roboto
Body Copy - Roboto
Body Copy - Roboto
Body Copy - Roboto
Body Copy - Roboto
Body Copy - Roboto
Body Copy - Roboto
Body Copy - Roboto
Heading 1 - Playfair Display
Heading 2 - Playfair Display
The final element of my rebranding redesign that ties the whole look together is typography.
I chose ”Playfair Display” and ”Roboto”. Together, these simple fonts give the text a warm, inviting appearance. They are easy to read, pleasing to look at, and most importantly, non-trendy.
I chose ”Playfair Display” and ”Roboto”. Together, these simple fonts give the text a warm, inviting appearance. They are easy to read, pleasing to look at, and most importantly, non-trendy.
Wireframing
Process
Process
Sketches
Hopepage
After the sketches were done, I began the wireframing and mock-up process in Adobe XD according to the design I had in mind.
The original version vs. my version
The differences between the original version and my version can be easily noticed. First of all, the colors are changed as well as the style. The header has its accent on the office man (the character key of the project).
My design keeps the same animation between “Google” and “Facebook” as the original one, but in a different and creative style.
My design keeps the same animation between “Google” and “Facebook” as the original one, but in a different and creative style.
BEFORE
AFTER
The differences between sections
The “Let Filed revolutionise your business”, “5 simple steps for growth” and “The complete solution for unparalleled results” sections are represented by the same cards as the original, but I used different shapes and hovers to highlight them. Also, I added my own icons and and characters.
BEFORE
AFTER
BEFORE
AFTER
BEFORE
AFTER
Mobile App
Responsive
Responsive
Based on “Filed” website concept that I designed before, I created the homepage wireframe for a mobile app.
Homepage
Homepage - with scroll
Reflections
My goal was to use all I’ve learnt about UI/UX Design in order to create a good interface and a great user experience for both website and mobile app.
I was looking for a masculine design, but also with a cartoon streak. This is why I opted for a key character (which, in my opinion, suits great for a marketing experience) and clipart as icons.
After the wireframing and prototyping was completed, I recorded a video for both website and mobile app to demonstrate the prototype and hovers.
I was looking for a masculine design, but also with a cartoon streak. This is why I opted for a key character (which, in my opinion, suits great for a marketing experience) and clipart as icons.
After the wireframing and prototyping was completed, I recorded a video for both website and mobile app to demonstrate the prototype and hovers.
Resources
www.filed.com
Bechance
Dribbble
Adobe Color
Google Fonts
Glassdoor
Bechance
Dribbble
Adobe Color
Google Fonts
Glassdoor
2020 Designed by Ella
Website Demo
App Demo