{ "version": "https://jsonfeed.org/version/1", "title": "goex.dev", "home_page_url": "https://ygoex.com", "feed_url": "https://ygoex.com/feed/feed.json", "description": "Yolanda Gorriz Exposito portfolio. UX/UI Designer & Front-End Web Developer.", "author": { "name": "Yolanda Gorriz Exposito", "url": "https://ygoex.com/about-me/" }, "items": [{ "id": "https://ygoex.com/work/other_projects_i_had_fun_with/appointments_app/", "url": "https://ygoex.com/work/other_projects_i_had_fun_with/appointments_app/", "title": "Appointments APP", "content_html": "
\n
\n Date\n
\n
\n 2016\n
\n
\n URL\n
\n
\n https://cdpn.io/ygoex/debug/GrgvdL/PNkvYXeLzOeA\n
\n
\n Status\n
\n
\n Live\n
\n
\n Repository\n
\n
\n https://github.com/ygoex/appointments-app\n
\n
\n Role\n
\n
\n UX/UI Designer & Front-End Web Developer\n
\n
\n Technologies\n
\n
\n \n
\n
\n Requirements\n
\n
\n \n
\n", "date_published": "2022-01-09T00:00:00Z" },{ "id": "https://ygoex.com/work/other_projects_i_had_fun_with/yetty/", "url": "https://ygoex.com/work/other_projects_i_had_fun_with/yetty/", "title": "Yetty", "content_html": "
\n
\n Date\n
\n
\n 2021\n
\n
\n URL\n
\n
\n https://yetty.netlify.app/\n
\n
\n Status\n
\n
\n Live\n
\n
\n Repository\n
\n
\n https://github.com/ygoex/yetty\n
\n
\n Role\n
\n
\n UX/UI Designer & Front-End Web Developer\n
\n
\n Technologies\n
\n
\n
    \n
  • Eleventy as SSG,
    • \n
  • Nunjucks as template engine,
    • \n
  • SASS as CSS preprocessor,
    • \n
  • PostCSS (Autoprefixer and PurgeCSS) to transform CSS with JS plugins,
    • \n
  • Npm scripts for workflow automation.
    • \n
\n
\n
\n Context\n
\n
\n

Yetty is an Eleventy starter kit built with accessibility and performance in mind.

\n

A few side projects required a starter kit with the requirements described below, and this is what I came up with. This is the starter kit I have used to build this portfolio.

\n
\n \n \n \n \n
Yetty blog post.
\n
\n
\n
\n Requirements\n
\n
\n
    \n
  • Critical CSS to remove render blocking stylesheets.
    • \n
  • Persistent dark mode
    • \n
  • HTML minified
    • \n
  • PWA
    • \n
  • JS compilation and minification
    • \n
  • Automate the generation of images in multiple sizes, in two different formats (jpg and webp), and markup with <figure>, <picture> and native lazy loading.
    • \n
\n
\n \n \n \n \n
Yetty blog page.
\n
\n
\n", "date_published": "2021-09-23T00:00:00Z" },{ "id": "https://ygoex.com/work/university_of_edinburgh/student_support_office_contact_app/", "url": "https://ygoex.com/work/university_of_edinburgh/student_support_office_contact_app/", "title": "Student Support Office Contact App", "content_html": "
\n
\n Date\n
\n
\n November 2019\n
\n
\n URL\n
\n
\n The app can only be accessed from the iPads placed in the waiting area by\nreception and meeting room, both in CMB.\n
\n
\n Status\n
\n
\n Live\n
\n
\n Role\n
\n
\n UI Designer & Solutions Developer\n
\n
\n Technologies\n
\n
\n \n
\n
\n Context\n
\n
\n This app was built with vulnerable students in mind. The aim of this app is to provide distressed students inmediate 1-to-1 support.\n
\n
\n Requirements\n
\n
\n
\n The app is going to be run from three Ipads located in the CMB Reception Waiting Area, 1st floor meeting room and one yet to be determined. The iPads must be always locked to this app.\n
\n
\n Students will be faced with an iPad that has nothing but the 8 faces of the student support team staff on it. The student will only have to tap on one of those faces (the person they are there to meet) and a message (either through skype foe business or Teams) will ping on the Staff member’s desk alerting them that the student is there awaiting them. This way the staff member can collect them from the front door and keep things discreet for the student. The teams alert on the staff member’s desktop also needs to be prominent so when they are alerted it needs to be able to appear on their screen above all other windows so they cannot ignore it or fail to notice it. The student cannot be kept waiting.\n
\n
\n The app will send the notification to a single person, and not to a group or channel, communicating that a student is waiting to see them and where they are waiting. This person should be able to communicate the student that they have received their notification, and how long it will take to collect them from their location. In terms of design, the UI should show 6 or 8 disks representing members of the SSO team, with their name and photo. It should also display the status of the support team staff using Teams status or Outlook. If officers are not available, their face should be greyed out.\n
\n \n
\n \n \n \n \n
Screen displayed when the Student Support Officer requested does not respond.
\n
\n
\n \n \n \n \n
Screen displayed when nobody responds.
\n
\n The communication between SSO Staff and the students will be done using Microsoft Teams. When a student requests to meet one of the officers, the officer receives the following card in their feed.\n
\n \n \n \n \n
Card received by staff via MS Teams when student contacts them.
\n
\n When officers receive one of this cards, they can answer the student in three different ways:\n
    \n
  1. Leaving the input field empty and pressing the button Reply to student. This option will send the following standard response to the student (2 minutes).
    2. \n
  2. Typing a number into the field provided and pressing the button Reply to student. If the time is going to take to meet the student is shorter or longer, they can type in the field provided an alternative number.
    3. \n
  3. Typing a short text message to the student and pressing the button Reply to student. This option sends a short text message to the student.
    4. \n
\n
\n \n \n \n \n
Screen received by student with text message.
\n
\n
\n
\n Responsibilities\n
\n
\n
    \n
  • \n Design UI following requirements from business sponsor.\n
    • \n
  • \n Build UI using Microsoft PowerApps.\n
    • \n
  • \n Create master SharePoint list to be manipulated by Student Support Officers.\n
    • \n
  • \n Create app logic and connect with different technologies using PowerAutomate.\n
    • \n
  • \n Create usage report to keep track of date, time, iPad location, SSO requested, response sent by SSO, etc.\n
    • \n
  • \n Create error log to keep track of number of errors thrown per number of total contact calls made by students.\n
    • \n
  • \n Write technical documentation, user guide and known errors documentation.\n
    • \n
\n
\n
\n", "date_published": "2020-11-27T00:00:00Z" },{ "id": "https://ygoex.com/work/university_of_edinburgh/school_of_social_and_political_science_website/", "url": "https://ygoex.com/work/university_of_edinburgh/school_of_social_and_political_science_website/", "title": "School of Social and Political Science Website", "content_html": "
\n
\n Date\n
\n
\n January 2020 - November 2020\n
\n
\n URL\n
\n
\n https://www.sps.ed.ac.uk/\n
\n
\n Status\n
\n
\n Live\n
\n
\n Role\n
\n
\n UI Designer & Solutions Developer\n
\n
\n Technologies\n
\n
\n \n
\n
\n Context\n
\n
\n The previous SPS website became over the years a dated website from a look and feel perspective. It was also obsolete from a technical point of view since it was built with a non-standard CMS that was about to lost support and security updates.\n
\n It ended up being not fit for purpose because its content was not easy to be accessed by the university’s ecosystem and vast audience (prospective students and families, current students, staff, etc). All of these users were clearly struggling trying to find relevant information that ended up unreachable because of a lack of information architecture.\n
\n \n \n \n \n
The old SPS website.
\n
\n
\n \n \n \n \n
The new SPS website.
\n
\n
\n
\n Requirements\n
\n
\n
    \n
  • \n The overall aim of the new website is to provide a platform to engage different target audiences around two main areas – student recruitment and research activities, allowing them to find what they need, where they expect to find it.\n
    • \n
  • \n A scalable platform that allows to centrally manage and control the brand while giving content independence to each department.\n
    • \n
  • \n A platform that allows a large volume of users who may need to edit content on the website at the same time. \n
    • \n
  • \n A platform for non-technical users, including a WYSIWYG for code-free content editing, media libraries, drag & drop, and roll back to previous version.\n
    • \n
  • \n A platform that offers publishing processes and governance workflows to ensure content accessibility, accuracy, and consistency.\n
    • \n
  • \n A platform that allows owners and content editors flexibility and creativity building pages whilst keeping consistency by using UI components inline with their brand and style guide instead of rigid templates.\n
    • \n
\n
\n \n \n \n \n
The SPS landing page on edit mode.
\n
\n
\n
\n Responsibilities\n
\n
\n
    \n
  • \n I implemented a continuous delivery process with Ansible pipelines that enables controlled, quick and efficient deployment of new features every week.\n
    • \n
  • \n I built the front-end architecture based on Twig template engine, Pattern Lab, SASS and npm scripts.\n
    • \n
  • \n I built content types and matching templates based on Communications & Engadgement Team requirements: news, events, subject area, staff profile. I also built individual components (carousel, featured list, Jumbotron, cards, tabs and accordion) used to build the main landing page by the Communications & Engagement Team, and to enhance the rest of the templates where appropiate.\n
    • \n
  • \n I adapted the look and feel of Edinburgh Law School website to our own needs.\n
    • \n
\n
\n
\n", "date_published": "2019-11-08T00:00:00Z" },{ "id": "https://ygoex.com/work/port80_connected_technology/secure_dock/", "url": "https://ygoex.com/work/port80_connected_technology/secure_dock/", "title": "Secure Dock", "content_html": "
\n
\n Date\n
\n
\n June 2016 - July 2016\n
\n
\n Status\n
\n
\n Decommissioned\n
\n
\n Role\n
\n
\n UX/UI Designer & Front-End Web Developer\n
\n
\n Technologies\n
\n
\n \n
\n
\n Context\n
\n
\n Port80 Secure Dock was a product focused to Port80 Connected Technology customers and their employees, and also to users of Hubtill. Unlike many systems that only encrypt files in transit across the internet, Secure Dock encrypted locally at upload time using a private encryption key and files were never stored in an unencrypted form.\n
\n
\n Requirements\n
\n
\n
    \n
  • Provide a web-app that allowed users (senders and receivers) to upload and download arbitrary files in a secure manner.
    • \n
  • It also had to provide users with the ability to monitor whether files had been downloaded, how many times, etc.
    • \n
  • For the initial version of this system there were three types of users to consider, each with different use cases:\n
      \n
    • The ‘sender’ – who should be allowed to upload a file to the website that had to be available to any of the registered ‘receivers’. The sender could be any member of the public that had been sent an ‘upload’ password by a ‘receiver’.
      • \n
    • The ‘receiver’ – who had to be pre-registered with the system to be able to receive notifications about files to download, and be able to download files.
      • \n
      \n \n \n \n \n
      Desktop URLs page.
      \n
      \n
      \n \n \n \n \n
      Desktop files page with delete confirmation dialog expanded.
      \n
      \n
    • An ‘administrator’ – who was the only user type with access to a basic admin reporting and admin function page.
      • \n
    \n
    • \n
\n
\n
\n Responsibilities\n
\n
\n
    \n
  • I was responsible for all aspects of UX/UI design, and frontend architecture and development.
    • \n
  • I designed and developed a UI quick and easy to familiarize with.
    • \n
  • I designed and developed a clean interface with minimal distractions, displaying only relevant information and organising it in a clear disposition.
    • \n
  • I designed and developed a pleasant onboarding experience through a quick guide presented on the empty state version of the app.
    • \n
\n
\n \n \n \n \n
Desktop URLs page: empty state.
\n
\n
\n \n \n \n \n
Desktop files page: empty state.
\n
\n
\n", "date_published": "2016-07-05T00:00:00Z" },{ "id": "https://ygoex.com/work/port80_connected_technology/palmer_and_harvey_e-commerce_platform/", "url": "https://ygoex.com/work/port80_connected_technology/palmer_and_harvey_e-commerce_platform/", "title": "Palmer & Harvey e-commerce platform", "content_html": "
\n
\n Date\n
\n
\n January 2016 - May 2016\n
\n
\n Status\n
\n
\n Decommissioned\n
\n
\n Role\n
\n
\n UX/UI Designer & Front-End Web Developer\n
\n
\n Technologies\n
\n
\n HTML, CSS (SCSS), Grunt & Javascript\n
\n
\n Context\n
\n
\n Palmer and Harvey was a UK-based wholesaler that serviced the retail chain and convenience stores. The company was originally founded in 1925 as a traditional confectionery and tobacco wholesaler, and, after being one of the UK’s largest wholesalers, it collapsed in November 2017 (find out more here).\n
\n
\n Requirements\n
\n
\n
    \n
  • Merge Palmer and Harvey's dated (6 years old) online ordering desktop-only website, an independent mobile-only ordering website, and another ordering IOS app into a single responsive web platform that should follow the style of the main company website (Palmer and Harvey Website).
    • \n
    \n \n \n \n \n
    Screenshot of P&H old platform.
    \n
    \n
  • Improve the main navigation and search.
    • \n
  • Display ads in an unintrusive way.
    • \n
    \n \n \n \n \n
    Palmer & Harvey main and secondary navigation on desktop view.
    \n
    \n
  • Design and develop a responsive marketing email template that would be later personalised with links to products and ads tailored for each individual customer.
    • \n
\n
\n
\n Challenges\n
\n
\n At the time (July 2015), no other big groceries except Asda and Aldi had taken the responsive path. All of them had separate ordering systems for desktops and for mobile devices. As I had not many benchmarcks I found myself starting almost in the unknown.\n
\n
\n Responsibilities\n
\n
\n
    \n
  • I re-designed, prototyped and built the new Palmer and Harvey ordering platform paying special attention to main different navigation alternatives, presenting a large search box right under the logo, presenting the products and their information in a more appealing way, and adding more blank space to leave behind the previous cluttered design.
    • \n
  • I designed and developed a new marketing email template.
    • \n
\n
\n \n \n \n \n
Screenshot of marketing email.
\n
\n
\n", "date_published": "2016-03-10T00:00:00Z" },{ "id": "https://ygoex.com/work/port80_connected_technology/hubtill/", "url": "https://ygoex.com/work/port80_connected_technology/hubtill/", "title": "Hubtill", "content_html": "
\n
\n Date\n
\n
\n 2015\n
\n
\n Status\n
\n
\n Decommissioned\n
\n
\n Role\n
\n
\n UX/UI Designer & Front-End Web Developer\n
\n
\n Technologies\n
\n
\n \n
\n
\n Context\n
\n
\n

Hubtill was a suit of microservices designed for the business-to-business wholesale market. It's aim was to increase efficiency in-store and throughout the supply chain, improve on-shelf availability and stock management.

\n

Hubtill Search

\n

Hubtill Search used Artificial Intelligence (AI) and machine-learning (ML) to develop an understanding of individual customers buying behaviour. By learning who was going to be buying which products and when, suppliers and retailers the algorithm was able to predict the demand much more accurately.

\n

The API was designed to be integrated as a third-party plugin in wholesalers and retailers e-commerce websites, and to serve detailed product information adquired from Brandbank, a company which specialises in managing and distributing FMCG (Fast-moving consumer goods) brand content.

\n \n

Hubtill IOS & Android Native Scanner Apps

\n

The functionality of both apps was exactly the same: by using the mobile camera, serve as substitute of the hand-held ordering scanners (www.opticon.com) that some wholesalers provided to some of their customers.

\n

The main task of Hubtill Scanner Apps was to scan product barcodes and create a list of products that can be ordered from the retailer's list of associated wholesalers. As quantities can be changed on-screen, each product only need to be scanned once.

\n

Hubtill Scanner Apps are also connected with Hubtill Stocklist Web-App. This way the IOS and Android apps can also work as a scanner to create lists of products that need to be re-stocked on the front shop.

\n \n

Hubtill Stocklist

\n

The main goal of this application was improving efficiency in stores and warehouses throught a better stock management. The app maximised the shelf replenishment process and confirmed the transfer of products from the stock room to the shelves by using smartphones and tablets.

\n

The tipical usage of the web-app was the following: one or more employees on the front shop generating a list of products needed to replenish the shelves. Once the builder confirmed the amount of products needed, different members of staff picked those products in the stock room.

\n

The app allowed to generate as many lists as needed and organise them (by type of products, by suppliers...) to suit the needs of the business.

\n

The lists were stored from one session to another, so they could be re-used every time the shelves needed to be replenished changing only the amount of each product.

\n \n
\n
\n Responsibilities\n
\n
\n
    \n
  • For Hubtill Search, I built a responsive user interface that consumed the Search REST API previously explained. The aim of this mini-app was to introduce the product to current Port80 customers and partners.
    • \n
  • For Hubtill Scanner, I was responsible for the whole design process, from wireframes, to user flows, and then to the final UX/UI design for both IOS & Android platforms.
    • \n
  • For Hubtill Stocklist, I was responsible for the UX/UI design as well as the transformation of the interactive prototype initially built with HTML, CSS and JS into AngularJS Directives and Controllers.
    • \n
\n
\n", "date_published": "2015-07-31T00:00:00Z" } ] }