Design & Development Portfolio Find what you need.. 1. UX/UI Design SpotON Services Web App Rhino Events Test Drive Web App Rhino Events Admin App Alitu Podcasting App 2. E-commerce Design Veliza Baths - Pitch Work Treasure House of Makeup Smartcard Store 3. Wordpress Design & Development Eat Local Professional Cleaning Company 4. Branding SpotON Services FirstFound The Townhouse SpotON Services Click for prototype A web application enabling customers to book services to their property. e.g cleaning or maintenance. Dashboard: Each dashboard displays the users bookings and property details. I designed a space for advertising deals and services to encourage the users to make new bookings. Your homes: The user can edit their current address, check their order history or add a new property. SpotON Services Click for prototype A web application enabling customers to book services to their property. e.g cleaning or maintenance. AI Search: I implemented an AI search bar to help users get to their desired service quicker. Smart Recommendations: I designed modular ‘Service’ blocks to recommend additional or related services, encouraging the user to add an additional service to their booking. Rhino Events - Front End Click for prototype Rhino required a web application to connect prospective customers with test drive events. Each candidate received a unique ID to login and book a test drive on new or used vehicles at a specified event. Selection: Users are presented with Touch Feedback: A full background state the available vehicle models change to feedback the selection upon touch. Progressive navigation: Each stage of the process is highlighted in the side navigation, presenting as five easy steps to encourage completion. Rhino Events - Admin Click for prototype I designed a dashboard for the admin users to create test drive events for their prospective customers. Each admin could set up events, create new users and add vehicles to test drive. Dashboard: The dashboard used the same layout as the front end, creating consistency across the platform and making it easier for admin’s working across the two. Welcome Back: MINI DASHBOARD Toggle menu Welcome Back: MINI VIP Event MINI Event 19 - 21 July 2019 VIP Event MINI Event 19 - 21 July 2019 Dashboard Users Search Guests Search Guests Vehicles Events Book a Download Download Events Types New guest Unbooked booked Book a Download Download New guest LanguagesUnbooked booked Companies ORGANIZE Brands ORGANIZE Countries Regions Calendar Edit Event Calendar Groups Edit Event Dealerships Update Sales Analytics Update Sales Analytics Users Users Mobile: The admin section is fully optimised for mobile users. Click for prototype Creating a test drive event Creating a new test drive was simplified using a simple pop-up form and a database search field for ‘brands’. Search UX The brand search field allows admin’s to add and remove brands freely. Search: The User types Search brand AUTOFILL: The app suggests the relevant brands F/ Ford FIAT CREATE A NEW EVENT TABS: The brands appear as removable tabs Event Name Country Search brand Dealership Default Language Ford Fiat Start Date End Date Appointment Duration Event Type SUBMIT Click for prototype Adding a new user Adding a user: The admin can create new users with different permissions based on their level. User Levels Each user level has a different permission. Selecting a user’s ‘level’ will present subsequent drop down options based on their initial choice. I mapped this out visually to help decision makers understand the heirarchy of permissions. Initial Select Level Company Brand Region Group Dealership If Company Then Select company If Brand Then Select Brand & Select Company If Country Then Select Country & Select Brand(s) If Region Then Select Region & Select country Select Brands Select Dealerships If Group Then Group If Dealership Then Dealership Name Group Country Region Group Brand(s) Alitu Podcasting - UX audit Click for Live site I audited Alitu, a podcast making app for podcast creators. New UI elements were designed based on UX research, improving the overall user experience of the application. Web Accessible Colours Alitu was suffering from a pale colour palette that made the UI harder to see and failed all colour accessibility tests. I created a new colour palette optimised for all users including the visually impaired and colour blind. Original New! Original editor The original Editor was pale and the user’s had trouble understanding the elements. Miles test Recordings Intro Outro Song name goes here Song name goes here Song name goes here Song name goes here Add Fade Add Add Teaser Add Add CHANGE EDIT TRACK EDIT TRACK CHANGE Remove Remove Remove Remove Improved I added contextual wording to the transition buttons, making them easier to understand and more accessible. The icons were removed and each column made use of its individual colour, making the UI more minimal. The increased colour contrast makes the UI elements easier to see. Click for Live site Free Asset Library Adding a track: All free tracks now feature a play button to preview and a label e.g Voiceover, so the user can decide whether the asset is what they want, without opening it in a new page. me ! P r e view Backplate Music Barkbot Voice over Break the mould Transition Button UI - adding a track The asset adding process was revised, using animated hover states and popups to feedback the user’s actions and their consequences. Use as into Use as outro Add all to Library Use as into Use as outro ADDED! Button state change: animate to ‘added’ with icon and black background. Added as intro! Button state change: Background changes colour User Feedback: ‘Added as intro!’ Animates up from button and then fades off the screen Use as intro Use as outro Remove track Added as outro! Button state change: Background changes colour User Feedback: ‘Added as intro!’ Animates up from button and then fades off the screen Use as intro Use as outro Remove track Button UI - Generic Animation can make all the difference. I created animated hover states for each button to provide feedback on the consequences of each interaction. Free music library Add new audio file Normal state Free music library Add new audio file Hover Position right 10px scale 0.8 Veliza Baths Click for prototype An e-commerce website design with two goals: 1) Create a timeless, elegant design that reflected the luxury of their products, 2) Make it easy to connect prospective buyers with their local supplier. Mobile View: User selects Basket Mobile View: Basket with editing options Desktop Checkout The desktop checkout V E LI ZA B ATH S features a rollover, YOUR CART (3) ITEMS displaying the product’s AMALFI - BATH featured image in the left High Quality Ganite Bath hand column. SORIANO 18 Bidet mixer & adjustable outlet AMALFI 55 Rimless countertop bathroom AMALFI GO TO CHECKOUT Homepage Click for prototype I used an editorial-style design, featuring large Images, crisp edges and lots of white space. Collections/Category Click for prototype Each collection was designed using a modular grid, allowing the owners to choose how many sections appear for each collection. Products Click for prototype ‘Visit showroom’ was the main CTA on each product, linking buyers with local suppliers. A product Click for prototype An inspirational page collecting the company’s posts, images, videos and articles. The aim was to make their content more accessible and increase their website’s engagement. Treasure House of Makeup Treasure House of Makeup required a fresh new look to encourage user engagement. Their previous design lacked any colour, making the UI elements confusing to users. The new design boasts a minimal layout, making each item clear and easy to understand - including the UI elements. Mobile View: User selects Basket Mobile View: Basket with editing options Desktop Checkout A simple, editable desktop V E LI ZA B ATH S checkout cart out from the CART 3 Items icon. No need to move the user to another page. 4 Colour shimmer palette £24.99 Bared skin cleanser £24.99 Aura bronzing gel £24.99 Aura bronzing & Glitter gel £24.99 CHECK OUT NOW Homepage THM’s homepage lacked social proof. By adding a live TrustPilot Widget and Instagram Feed I was able to back up the company’s product and position in the market. Category Page Each product was designed on a tactile ‘material’ card to encourage the users to click through. Product Page Each product features customer reviews and related products. Smartcard Store - Magento Design Click for Live site SmartCard required a complete overhaul of their original, outdated and busy design. I stripped away the bloated UI and created a new, minimal style that put the focus back on their products. www.smartcardstore.co.uk www.smartcardstore.co.uk Mobile View: Home Mobile View: Product Mega Menu Design ID Card Printers Our extensive range or ID card and ribbon printers IDP Smart 66 Printer stye Brands Maintenance More Magicard Enduro 3E Single Sided ID Card Printer One sided Datacard Cleaning Kits Bestsellers [P-00-0000000] 9 IN STOCK Double sided Evolis Cleaning Products Offers Retransfer Fargo View all View all Metal IDP-SMART £675.00 ex. VAT PRINTER OPTIONS View all MagiCard £810.00 inc. VAT Double sided View all S HIP Single SidedPI NG NOW Quantity - 1 + Selector 3 The mega menu needed to assist navigation and sell. I created a minimal navigation column and a secondary column that featured the latest product in that category. Homepage Click for Live site Repeat customers made up 70% of SmartCard’s online sales. I created a grid featuring their most frequently purchased products, making it easy for customers to get to their next purchase. Product Page Click for Live site Using a generous amount of white space I was able to declutter the layout to emphasis the product and highlight the delivery offer with a countdown ticker. Landing Page Click for Live site Specialised and customisable products received their own landing pages that focused on the benefits of the product and of using SmartCard. Professional Cleaning Company - Wordpress Live site A full Wordpress design and build to showcase The Professional Cleaning Company’s services. Landing Page Live site Each service featured a dedicated page which captured paid ad visitors. About Us Page Live site A corporate ‘about’ page to reflect the professional service offered by The Professional Cleaning Company’s founders. Eat Local - Wordpress/Plugin dev Click for Live site A custom built theme for restaurant finding services. The theme included a custom built plugin that allowed paid users to create adverts for their restaurants. CUSTOM SEARCH FUNCTIONALITY Click for Live site Local Search: The theme uses a search feature that finds the users nearest restaurants based on their user’s specification. Results: The results return the nearest restaurants in ‘nearest first’ order. Custom Plugin Add a listing: I built a plugin that allowed subscribed restaurant owners to login and create an ad for their restaurant Advertising: The ads feature a tile on the ‘Listings’ page and click through to the owners website. SpotON Services - Branding SpotON services needed a fresh logo to launch their business with. I created a modern, unique logo that nodded to the quality of their work using the universally recognised tick of approval! SpotON SpotON Brand guidelines I created a set of brand guidelines to make sure everyone within the organisation used the branding consistently. FirstFound - Branding Click for Live site FirstFound required a full, company wide rebrand that included visual identities for their services. I combined a friendly blue with the signature brilliant orange and modernised their logo with a timeless, material design. SEO Web Design Social PPC Content Branding Icons: I created a set of icons to represent each main company service. Consistent Design Style Each icon was created using geometric shapes and contained within the same Square template, giving them a consistent height and width. Colour Palette #05DCFF #FF5529 #343736 A fresh new colour palette using tones that compliment each other. A mixture of warm and cool gave me the ability to highlight key information with the dominant orange, whilst building a mellow UI with the light blue. Season Logos FirstFound Web Team Run The new design language lended itself to one off, season pieces like the web team charity run logo. The Town House - Branding An Art Deco inspired logo for The Townhouse’s 2020 Launch. THE EST 2020
Enter the password to open this PDF file:
-
-
-
-
-
-
-
-
-
-
-
-