Design & Development Portfolio Find what you need.. 1. UX/UI Design 2. E-commerce Design 3. Wordpress Design & Development 4. Branding SpotON Services Web App Rhino Events Test Drive Web App Alitu Podcasting App Rhino Events Admin App SpotON Services Veliza Baths - Pitch Work Eat Local Professional Cleaning Company The Townhouse Smartcard Store FirstFound Treasure House of Makeup SpotON Services 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. Click for prototype 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. SpotON Services A web application enabling customers to book services to their property. e.g cleaning or maintenance. Click for prototype Selection: Users are presented with the available vehicle models Touch Feedback: A full background state change to feedback the selection upon touch. Rhino Events - Front End 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. Click for prototype Progressive navigation: Each stage of the process is highlighted in the side navigation, presenting as five easy steps to encourage completion. Welcome Back : MINI Search Guests 19 - 21 July 2019 MINI Event VIP Event Book a New guest Download Unbooked Download booked ORGANIZE Calendar Edit Event Update Sales Analytics Users DASHBOARD Users Dashboard Vehicles Events Events Types Languages Companies Brands Countries Regions Groups Dealerships 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. Mobile: The admin section is fully optimised for mobile users. Toggle menu Rhino Events - Admin Click for prototype Welcome Back : MINI Search Guests 19 - 21 July 2019 MINI Event VIP Event Book a New guest Download Unbooked Download booked ORGANIZE Calendar Edit Event Update Sales Analytics Users 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. Search: The User types AUTOFILL: The app suggests the relevant brands TABS: The brands appear as removable tabs Creating a new test drive was simplified using a simple pop-up form and a database search field for ‘ brands ’ The brand search field allows admin ’ s to add and remove brands freely. Search UX Click for prototype CREATE A NEW EVENT Event Name Default Language Country Dealership Appointment Duration SUBMIT Search brand Event Type Start Date End Date Ford Fiat Search brand F / Ford FIAT Creating a test drive event 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. Adding a user: The admin can create new users with different permissions based on their level. Click for prototype Level Company Brand Country Region Group Dealership Select company Select Brand Select Company Select Country Select Region Select Brands Select Dealerships Group Brand ( s ) Country Region Select Brand ( s ) Select country Group Dealership Name Group Company Brand Region Group Dealership If If If If If If Then Then Then Then Then Then & & & Initial Select User Levels Adding a new user Alitu Podcasting - UX audit 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. Fa de I ntro M iles test A dd T e a ser O utro R ecordings A dd S ong n a me goes here EDIT TRACK R emove S ong n a me goes here S ong n a me goes here CHANGE CHANGE R emove R emove S ong n a me goes here EDIT TRACK R emove A dd A dd A dd Original editor Web Accessible Colours Original New! 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. 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. The original Editor was pale and the user ’ s had trouble understanding the elements. Click for Live site 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. The asset adding process was revised, using animated hover states and popups to feedback the user ’ s actions and their consequences. M usic V oice over T r a nsition Ba ckpl a te Ba rkbot B re a k the mould U se a s into U se a s intro A dded a s intro ! U se a s outro U se a s outro A dd a ll to L ibr a ry R emove tr a ck U se a s intro A dded a s outro ! U se a s outro R emove tr a ck U se a s into U se a s outro ADDED ! Button UI - adding a track Button UI - Generic Normal state Hover Position right 10px scale 0.8 Button state change : animate to ‘ added ’ with icon and black background Button state change : Background changes colour User Feedback : ‘ Added as intro ! ’ Animates up from button and then fades o ff the screen Button state change : Background changes colour User Feedback : ‘ Added as intro ! ’ Animates up from button and then fades o ff the screen F ree music libr a ry F ree music libr a ry A dd new a udio fi le A dd new a udio fi le Animation can make all the difference. I created animated hover states for each button to provide feedback on the consequences of each interaction. Free Asset Library Preview me! Click for Live site Veliza Baths Desktop Checkout 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. Click for prototype Mobile View: User selects Basket Mobile View: Basket with editing options AMALFI V E LI ZA B ATH S YOUR CART (3) ITEMS SORIANO 18 Bidet mixer & adjustable outlet AMALFI - BATH High Quality Ganite Bath AMALFI 55 Rimless countertop bathroom G O T O C H E C K O U T The desktop checkout features a rollover, displaying the product ’ s featured image in the left hand column. I used an editorial-style design, featuring large Images, crisp edges and lots of white space. Homepage Click for prototype Each collection was designed using a modular grid, allowing the owners to choose how many sections appear for each collection. Collections/Category Click for prototype Products ‘ Visit showroom ’ was the main CTA on each product, linking buyers with local suppliers. Click for prototype A product 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. Click for prototype Treasure House of Makeup Desktop Checkout 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 V E LI ZA B ATH S A simple, editable desktop checkout cart out from the icon. No need to move the user to another page. CART 3 Items 4 Colour shimmer palette Bared skin cleanser Aura bronzing gel Aura bronzing & Glitter gel £24.99 £24.99 £24.99 £24.99 CHECK OUT NOW 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. Homepage Each product was designed on a tactile ‘ material ’ card to encourage the users to click through. Category Page Product Page Each product features customer reviews and related products. www.smartcardstore.co.uk www.smartcardstore.co.uk Smartcard Store - Magento Design Mega Menu Design Mobile View: Home Mobile View: Product 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. 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. Magicard Enduro 3E Single Sided ID Card Printer [P-00-0000000] £675.00 ex. VAT £810.00 inc. VAT 9 IN STOCK Double sided Single Sided Selector 3 Quantity 1 - + PRINTER OPTIONS ID Card Printers Printer stye One sided Double sided Retransfer Metal View all Datacard Evolis Fargo IDP-SMART MagiCard View all Cleaning Kits Cleaning Products View all Bestsellers Offers View all Brands Maintenance More Our extensive range or ID card and ribbon printers IDP Smart 66 S HIP PI NG NOW Click for Live site