UX/UI design
Project Brief
This project required us to use our already existing mobile screen wireframes created in the previous project and redesign the mobile screens, creating a whole new visual language as well as components for the mobile website based on what we learned about our users in the previous project. We must show an understanding of the best practice rules that are present within the industry and apply them to our new and improved mobile website redesign. Here we are focusing on the look and feel of the overall interface and its elements.
Project deliverables
x1 Figma design file with redesigned mobile screens and mini style guide
x1 Mini style guide
Design strategy
For this project, my main strategy was keeping it simple, and less cluttered, as the previous design was rather dark, busy, and difficult to navigate on the user journey. I hope to achieve this simplified and less busy look by implementing filter options for various sections as well as grouping information in cards to make it easier for users to identify what's going on. I will also make the buttons very clear and clickable. I however did not stick to the wireframes that were previously designed as I felt I could provide better designs after receiving feedback from that project.
Style Guide
Colour palette
For the color palette, the color was taken from the Ezemvelo KZN Wildlife Logo so that people who have used the website previously still recognize the color. However, this color was also chosen because it is quite a calming and relaxed color which will help users feel a little calmer when adventuring on the website. The Ezemvelo green is paired with white to keep the overall relaxed feeling of the website.
Typography
Montserrat was chosen for the website as it's quite an easy typeface to read. Its geometric and sanserif appearance make it seem slightly informal and friendly, making it the perfect typeface for the website as people would want to feel welcomed and not intimidated by the website.
Icons
The main icons created are the Search icon, the back arrow, and the home icon. All the other icons you see are just pictures to accompany buttons and make the screen more visually appealing.
Buttons
The text is always white and centralized within the button. Button height is 40 px and the width is variable and depends on where it is placed.
Examples of the screens
To access the Figma file, please click HERE
