I led a major website redesign for Rugmaster.uk, driving impressive business growth. I used research, checked out competitors, and gathered design inspiration to create a modern, user-friendly website. This transformation not only attracted more visitors but also boosted engagement and conversion rates, significantly boosting Rugmaster's success.
Mockup
In order to create an effective design for my project, I took a strategic approach by first developing a mockup before diving into the actual design process in Figma. My primary goal was to allocate most of my attention to the main page and the shopping page, ensuring that these crucial sections were thoughtfully designed.
Design Tokens
My design tokens are the base of the entire design system. I included objects such as colour, typography, and buttons. Since these tokens will be used throughout the application, I made sure to thoroughly lay out our design expectations.
Shop
I incorporated a key feature that significantly enhanced the overall shopping experience: a comprehensive filter section located conveniently on the left side of the page. This filter section allowed users to refine their rug choices based on specific criteria, including size, material, price, and rug type.
I created the Dog Walker app, streamlining the search for dog walkers. With a distinctive color scheme, it offers a user-friendly way to find dog walkers quickly and efficiently.
Design 1
I designed the initial app interfaces, following the 60-30-10 design rule for balanced visuals. The splash screen, sign-up page, and "More Info About Your Pet" page were all crafted with a thoughtful distribution of color, with 60% as the dominant color, 30% as the secondary color, and 10% as an accent.
Design 2
In designing a dog walking app, my primary objective was to ensure a seamless and user-friendly experience for pet owners and dog walkers alike. To achieve this, I implemented a quick and efficient feature that allows users to provide essential information about their pets, including breed, bad habits, gender, and age.
Design 3
In the final stages of designing the dog walking app, I implemented three key features. Firstly, a location search feature streamlined the process of finding nearby dog walkers. Secondly, a calendar availability tool simplified scheduling, and lastly, a direct message page facilitated efficient communication between pet owners and walkers, making the app a user-friendly and efficient platform for pet care services.
The luggage locator app offers peace of mind for travelers. It tracks luggage in real time, sends notifications, and even includes an augmented reality feature for stress-free travel.
Sign Up Page
My goal was to make sure that users could easily start tracking their luggage once they log in and save their details securely. To achieve this, I designed the initial mockup page with prominent call-to-action buttons, guiding users quickly to access important flight information. This design simplifies the user experience and adds efficiency to the process.
Luggage Information
on this page, I've added a button to let users specify the type of luggage they're looking for, whether it's a suitcase, stroller, or wheelchair. This inclusive feature is crucial, especially considering the Department of Transportation's loss or damage to over 15,000 wheelchairs. In the next step, you'll find an optional scanning feature. It allows you to document your luggage details right from your phone. These scanned details will also be accessible on the tracking page. However, if you're in a hurry, you can easily skip this step for added convenience.
Augmented reality
In the final stage of the app, users can access their flight information, which also serves as the gateway to the augmented reality feature. Within this feature, a guiding arrow indicates the precise path for users to follow, ensuring a convenient and swift experience when retrieving their luggage.
I coded a Data Journalism project using HTML, CSS and Javascript, to visually showcase deforestation rates.
Mockup 1
I began my project by examining existing websites that explain deforestation rates. I noticed that many of them focused solely on providing information, lacking an engaging aspect. I decided to incorporate a sound element to immerse the users into the website. I intentionally designed it to be non-pausable, mirroring the relentless nature of real-life forest fires. This approach aims to make users feel as though they are truly experiencing the impact of deforestation.
Mockup 2
Additionally, I aimed to add a dynamic quality into the website by introducing a number scroller and animated buttons. I opted for the color green for both the number scroller and buttons, to represent the trees in the forest.
Mockup 3
Before coding this webpage, I started with a preliminary sketch, envisioning the layout. My design included a prominent key positioned at the top of the map, clearly explaining the meaning behind the various tree icon colors. I implemented this by using Mappa.js and JavaScript, to overlay the icons and text on the map.
I coded this portfolio using HTML, CSS, and JavaScript, drawing inspiration from Netflix's user-friendly design.
Netflix
My design for this portfolio was influenced by Netflix, a platform known for its usability and overall enjoyable user interface. I incorporated features and design elements that I found particularly effective and engaging into my website, aiming to create a similarly enjoyable and accessible interface for my audience.
Mockup
I began by creating a mockup of my portfolio using Figma, providing me with a visual representation to better conceptualise the final design.
Design
I used HTML, CSS, and JavaScript to code my portfolio and added a lively GIF as the main banner to make the website more engaging and visually appealing.
I set out to create an interactive and visually captivating game that would challenge the user's attention and memory through continuous notifications and sounds.
Animation
I first created an animation for the intro of the game, using photoshop, After Effects and Premiere Pro. The animation provides a backstory to the game and helps create an emotional attachment to the character for the user. Additionally, I carefully considered the colour scheme when animating the scenes, choosing a blue and dark colour palette to convey the gloom that comes with being overly attached to one's phone.
Game
During the first stage of the design, I used a solid grey box to represent the notifications and the card icons consisted of an image of a bullseye. The notifcation didn't look realistic so I then changed the notifications so that it looks like an iPhone notification by reducing the opacity and positioning the logo and text. In addition to this, I used relatable notification messages such as BeReal notifications, UK inflation news notification,and even social media notifications. The combination of all these relatable messages intends to confuse the user so that they are unable to match the cards in time.
Website
I initially used a template for my information website but significantly altered the layout to better align with my goals. One major improvement was the integration of an interactive graph using Chart.js. This addition allowed users to engage with the data dynamically, enhancing both the visual appeal and usability of the website.
Surreal Beautifier is a project that explores beauty standards in a fun and interactive way by using voice recognition and face tracking. This project was coded using HTML and Javascript.
Artist inspiration
My concept drew inspiration from two influential feminist artists, Hannah Höch and Linder Sterling, who both critically examine modern beauty standards through the deconstruction and reconstruction of fragmented images of female features. Their work often results in visually busy and disjointed arrangements, intentionally disorienting the viewer.
Assets
I embraced these ideas from the two artists by creating a filter featuring renowned celebrities like Kim Kardashian, Bella Hadid, Priyanka Chopra, Nikita Dragun, Rihanna, Beyoncé, and Madison Beer. Through this filter, we aimed to challenge prevailing beauty ideals, sparking a conversation about the curated images of fame and their impact on society's perceptions of beauty and identity.
Snapchat Filters
Inspired by Snapchat's beauty filters, my final design includes a feature where users can save their transformed images to their gallery, preserving a piece of art. This project primarily utilises JavaScript, specifically the FaceApi Video Landmarks feature in p5.js, allowing us to accurately track facial landmarks and apply real-time digital enhancements.
I took part in a 60-hour Skills Bootcamp, contributing to the design of a quest for SAMSARA®, an innovative action-adventure RPG that blends Buddhism with souls-like gameplay. My role involved creating a quest that prompts players to reflect on life and philosophy through discourse, conflict, and exploration.
Quest Map
I used Photoshop to design the quest map, plotting enemy and NPC encounters, and creating a compelling start and finish for the game.
User Journey
I designed a user journey that presents a moral dilemma. It starts with a banished monk seeking four sacred items for survival outside, but the user encounters enemies protecting these items, prompting ethical choices and thought-provoking gameplay.
Mockup 3
Following the 60-hour course, I successfully crafted a 5-minute quest using Unreal Engine, skillfully combining elements that not only challenge the user but also deliver a captivating and immersive gameplay experience.
This animation tells the story of a young girl during the Syrian war, shedding light on the consequences of conflict and the repercussions of war.
Mooodboard
I kickstarted my animation project with a moodboard of inspiring animations. Simplicity was my goal, aiming to convey a compelling narrative with a minimalist design.
Colour scheme
I opted for a sandy color theme to symbolise the Middle East and, more specifically, Syria, within my project. The warm and earthy tones of sandy hues not only resonate with the region's geography but also symbolise hope, renewal, and resilience. This color scheme became an integral part of my visual storytelling
After-Effects
I created the animation by initially designing the scenes in Photoshop and then rigging the layers together in After Effects. To maintain a focus on the central narrative element, which involved a frame falling down, I intentionally designed a simple living room environment. This minimalist approach ensured that users could immerse themselves in the narrative without distractions.
I took part in a 60-hour Skills Bootcamp, contributing to the design of a quest for SAMSARA®, an innovative action-adventure RPG that blends Buddhism with souls-like gameplay. My role involved creating a quest that prompts players to reflect on life and philosophy through discourse, conflict, and exploration.
Quest Map
I used Photoshop to design the quest map, plotting enemy and NPC encounters, and creating a compelling start and finish for the game.
User Journey
I designed a user journey that presents a moral dilemma. It starts with a banished monk seeking four sacred items for survival outside, but the user encounters enemies protecting these items, prompting ethical choices and thought-provoking gameplay.
Mockup 3
Following the 60-hour course, I successfully crafted a 5-minute quest using Unreal Engine, skillfully combining elements that not only challenge the user but also deliver a captivating and immersive gameplay experience.
This animation delves into neglect and stereotypes within a family of four, blending cartoon drama with satire and horror elements. The story centers on the adopted daughter's mistreatment by her alcoholic mother and temperamental father, prompting her to take matters into her own hands.
Storyboard
I created a storyboard for each animation scene before starting the animation process. This approach greatly helped me understand the project's scope and visualise how it would look, making the entire process more efficient and effective.
First Scene
Before animating each scene, I started with a hand-drawn sketch on paper, carefully outlining the visuals. Following this initial step, I transitioned to Photoshop, where I crafted each scene.
After-Effects
I animated all the scenes using Photoshop and then rigged the layers in After Effects. For the animation's design inspiration, I drew inspiration from "The Simpsons," as they also cleverly explore the concept of a 'perfect family' in an entertaining and playful manner.
This animation tells the story of a young girl during the Syrian war, shedding light on the consequences of conflict and the repercussions of war.
Mooodboard
I kickstarted my animation project with a moodboard of inspiring animations. Simplicity was my goal, aiming to convey a compelling narrative with a minimalist design.
Colour scheme
I opted for a sandy color theme to symbolise the Middle East and, more specifically, Syria, within my project. The warm and earthy tones of sandy hues not only resonate with the region's geography but also symbolise hope, renewal, and resilience. This color scheme became an integral part of my visual storytelling
After-Effects
I created the animation by initially designing the scenes in Photoshop and then rigging the layers together in After Effects. To maintain a focus on the central narrative element, which involved a frame falling down, I intentionally designed a simple living room environment. This minimalist approach ensured that users could immerse themselves in the narrative without distractions.