James Jing-Yi Mitchell

21 Ratcliffe St · YORK, YO30 4EN · 07807 695504 · james@jingyi.co.uk

I am a passionate Graduate UX Designer working with Sopra Banking Software. My proficiency in technology facilitates the development of accessible, intuitive and easy-to-navigate front end design, culminating in excellent user experience. Experience of working in retail enhanced my understanding of holistic business operations, and instilled in me the importance of interpersonal skills in customer relationship building.

I am approachable with the ability to cultivate positive connections and work collaboratively with clients, colleagues and stakeholders. As a leader, I inspire team spirit and motivate efficient workflow through maximising of the strengths of individuals. I am a quick learner with a creative and open mind, and a commitment to technological improvements and high quality user experience journey.

Experience

GRADUATE UX DESIGNER

Sopra Banking Software, Sheffield

Produced screen designs for online framework application, specialising in mortgage origination and savings applications within an agile approach. Aligned software with business requirements set out by product owners, and user requirements established from stakeholder interviews, questionnaires and card sorting activities; leading to the creation of personas. Used AB testing and questionnaires to assess interaction options. Analysed screens in accordance with accessibility and heuristics criteria, culminating in a final review where screens were independently tested. This resulted in an improved screen design which provided a more intuitive and logical experience for the user in comparison to previous versions of the software.

Pioneered the creation of a new design for the application’s framework based on screen design experience, user feedback and UX exercises focused on the user. Worked closely with the framework team, design colleagues and business analysts to create a system that is ‘low cost’ to implement whilst meeting the business needs of clients. This new system combined with the enhanced screen designs generated software sales to major clients including 3 major banks, and the potential to distribute to Sopra’s current clients, 50% of financial institutions in the UK.

The success of this new application’s framework design led to the development of a design system to document components and design aspects, establishing repeatable patterns to reduce inconsistencies. The final document described the styling, behaviour and appropriate use for each component. The new design system which was delivered within 2 months, increased usability, standardisation and modernisation of design elements across the system, resulting in reduced wireframe workload and improved efficiency. Currently responsible for training business analysts to use the new system.

June 2017 - Present

STORE TEAM MEMBER

Stormfront, York

Work cohesively within the team to deliver tailored, professional customer service to achieve store and individual sales targets. Store maintenance, stock merchandising, payment processing provided a holistic view of retail business. Liaise with customers to diagnose, understand and recommend the right product to meet their needs, and resolve customer issues to maintain customer satisfaction and loyalty, requiring strong interpersonal and communication skills, and diplomatic problem solving ability.

Diagnose and fix software and hardware problems demanding in depth product knowledge, technical competency, analytical and problem solving skills and meticulous attention to detail. Use expert Apple product knowledge to translate complex concepts into easy to understand instructions to train new colleagues, and customers on personal trainer membership to help maximise the use of their newly purchased devices. Voted by the Regional Manager and featured as the "Face of Stormfront" on the website in recognition of good work ethic and positive customer feedback.

June 2017 - Present

VOLUNTEER INSTRUCTOR

CODE FIRST: GIRLS

Taught HTML, CSS and JavaScript technical skills to a class of 30 students, to increase the number of women in the tech sector. Improved syllabus with pragmatic concepts including live coding demonstrations to facilitate easy understanding of the rules and workings of coding and programming. Managed after class follow-up homework and extra syllabus via email.

October 2017 - December 2017

Freelance Web Developer

Our Place Schools

Created a new, responsive and modern school website, using a flatter and simpler design language, Bootstrap and Freelancer theme based on the Principles of Architecture. Conducted comparison research on competitors’ websites and analysis of branding, customer needs and experience. See more in the portfolio section of this website.

June 2017- Present

Senior Mentor

National Citizen's Service

Mentored young people who have recently finished their GCSEs to maximise their abilities and strengths, and work collaboratively as a team through provision of training and team bonding exercises. Managed group dynamics including interaction issues between individuals requiring diplomacy, sensitivity, communication and interpersonal skills. Leadership ability enthused young people’s enjoyment and group cohesion, facilitating successful delivery of their charity project.

July 2017 - August 2017

Education

University of York

Interactive Media Bachelor of Science

On track for 1st or high 2:1

September 2015 - Current

Princethorpe College

A Level

AACC - Maths, General Studies, Physics, Ethics & Philosophy

AS Level

B - Further Maths

June 2015

Princethorpe College

GCSE

4 A*, 7 A & 2 B

August 2013

Skills

Programming Languages
Application Expertise
  • Photoshop
  • Adobe Illustrator
  • Adobe Indesign
  • Adobe Dreamweaver
  • Adobe XD
  • Sublime Text
  • Unity3D
  • MonoDevelop
  • Maya
  • Sketchup
  • Sketch
  • Principle
  • Final Cut Pro
  • FileZilla
  • Microsoft Office
  • iWork Suite
  • Jira
Workflow
  • Working directly with clients to establish needs, suggestion of ideas
  • Competitor and user research - data gathering (through interviews, surveys, observation etc) to find major areas to address or features that need to be added
  • Interpretation of Data / Creation of user jorney maps and workflows
  • Mobile-First / Responsive Design / Design with principles of Information Architecture / Design with refrence to coding knowledge to know what is possible
  • Creation of wireframes, quick mockups to communicate ideas to clients and users for feedback using Adobe XD or Sketch
  • Response to feedback from all parties to streamline design
  • Communication of new designs through interactive UX prototypes, videos and full mockups
  • Liasing with developers using UX export features and finding solutions to problems without comprimising design principles
  • Re-iteration based on real world usage and implementation of new features

Portfolio

Redesign of XMS Framework and Creation of Design System

Sopra Banking Software Design Project

Redesigned the design of the XMS framework to update it to a more modern and easy to understand interface. Researched different design systems including Google’s Material Design studies and similar websites to find out common design patterns and align with consistency and standards whilst deducing the most intuitive solutions. Styled the system in a way that was intuitive and brought attention to the most important features such as making the ‘next page’ navigation button change to show that the user could progress and collapsing completed sections of forms. Designed the system so that it would look good when resized in a responsive manner, showing inheritance between desktop and mobile interfaces whilst making most use of the space afforded by the device in use. Designed system to make sure that no matter the input method, the page could be interacted with in the same way, for example not using cursor hover for interaction - something not possible using touch.

Based on feedback from usability studies of previous software, adjusted interface to make it more intuitive. This included moving the navigation bar to the top to make it more prominent and using the full screen by collapsing left menu bar by default. The design also used rounded corners and cards to communicate a more friendly interface whilst keeping the design modern and simple. Changed field from an underline style to an outline to show where the fields started and ended so that the user knew where to click. Reduced heavily the amount of dialog boxes shown to the user, instead using inline error messages to guide the user within the screen. Used icons wherever possible to lighten up the interface whilst giving a more visual meaning to the parts of the interface being interacted with. Used animations wherever possible and unobtrusive to show the user in a logical way where their content was such as sliding a page to the left when clicking next to follow the navigation stepper’s direction and aligning with the arrow icons on the navigation buttons.

Due to the success of this new application’s framework design, developed a design system in conjunction with the framework team to style and document the different components required for designing screens. Through experience gained through designing screens and testing them, created component styles that fit with business and usability requirements that could be used in a repeatable manner, allowing modular screen design rather than bespoke. Involved analysing all screens and finding repeatable patterns whilst liaising with the framework team to find out what components made up these patterns. This has led to increased usability, standardisation and modernisation of design elements across the system, resulting in reduced wireframe workload and improved efficiency whilst aligning and educating multiple teams within the business so that the scope and design can be agreed. Throughout with any discrepancies or design decisions, used AB testing to find best solution user wise.

For designers, created an XD file that can be used to quickly put together screens whilst aligning with the system. This has led to being able to distribute high fidelity scenario based screen designs to business analysts after providing wireframes. Throughout the wider company, the system has highlighted what is required and what can be built so that business analysts can determine whether they will require new components to be built. Already has proved very useful in highlighting a component that cannot be currently deployed due to the fact that it would break multiple BDD testing scripts, meaning hundreds of extra man hours of work. Without the design system, developers and screen configurators would have put in a lot of extra effort to try and push this out before the first release, whereas now it can be put into the backlog and implemented at a later stage.

Currently the owner of the design system so all changes have to be presented and agreed by me. Have adopted a ‘Beetlejuice’ approach where if a pattern is repeated more than 3 times, we add it to the system. This is only applicable if agnostic to the application (e.g. a broker search would not be added, whereas an address search would due to the broker search being highly specialised). If a pattern is discovered, it is then run through a whole UX cycle including testing of the current implementation, ideation of other solutions and AB testing of these to make sure that it fits user and business requirements with the output being fed into the design system.

Unfortunately due to the product being owned by Sopra Banking Software and secrecy of the project, I cannot provide any documentation online (however I would be able to go through this collateral on a more closed basis if required)



Redesign of the Streaming Service

University of York Final Year Project

Identified that there were usability problems with current iterations of music streaming services both in part through own experience but also comments about current design online and the multitude of complaints about usability and how interfaces felt clunky and unintuitive. Therefore set out to create a better and more thought out design.

First set out looking at how streaming services had evolved by exploring the evolution of internet based distribution of music ranging from Napster to current iterations such as Spotify and Apple Music. From this, set out finding current points of pain through looking at current redesigns on Behance, Medium and Dribbble. Critiqued these to find the main improvements they had recommended and how they proposed to increase usability.

To gain own research on these areas, engaged in user research. Decided to conduct two main user research methods. This included an online survey critiquing current systems and any initially proposed features, and in person competitor user testing and interviews comprising of users completing tasks in current systems and analysing how these systems functioned based on their current usage. These allowed a greater insight first hand of how these systems functioned and their current points of pain, along with gaining an insight into how people actually used their systems. Documentation was succinct for both areas and ethical approval and consent were gained for both aspects of user research.

From the data and comments collected from the surveys, and the transcripts from the interviews, created visualisations of data. This included an affinity map created by taking all important comments and then arranging them into sections based on what they were referring to. These were colour coded and included what system and feature they were referring to. From this, created user journeys for the two most used systems, taking comments and finding where they fit to inform the final design I was creating.

Used these assets to create a design specification and initial wireframes demonstrating main ideas and improvements proposed. To get feedback on these, did a second round of user testing through a focus group. For this also created style tiles for current systems to gain feedback on fonts, colours, album designs and behaviours. Asked participants to critique each part and suggest improvements.

Based on feedback gained from focus group, created final ‘drawn’ wireframe. From this, created a visual prototype in Sketch, including all main parts for the application and features. To make the prototype intractable, copied assets to Principle to add animation. Decided to create video of final prototype so created individual animations for each part of the interaction, recorded these and used Premiere to edit them together. The video outlined the main areas of improvement that the prototype included and was showcased at the Interactive Media Showcase, gaining a shortlist for Best Project Award.

Link to Literature Review and Plan

Link to report (including wireframes)

Other materials available on request



Interactive Media Showcase

University of York Student Led Department Showcase

During my final year, I got together with a few other members of the course and expressed that we did not feel that the work that we were producing was being marketed in the best way. We therefore decided to pioneer a showcase that partners with Luma, a current film festival. Since then we have had to apply for funding and are currently pitching to businesses to sponsor and attend the event. I was chosen as lead designer for this and therefore have created the current logo and other merchandising material such as posters, slide design, HTML email and been heavily involved with the design of the website. We have been setting up meetings, evenly distributing workloads, planning extensively areas, marketing the showcase to students and employers and liaising with external partners whilst still juggling our course.

Link to Sponsorship PDFs

Link to website

Link to HTML Email invitation



Our Place Website

Freelance Project

Tasked with creating a new, responsive and modern school website that allowed easier access of information compared to the 20+ pages of the previous site. Asked to create a new design language that would be iterated through all documents used at the school. Additionally, a site that was coded quite simply was preferable so that it could be handed over if needed with minor crossover friction.

Started by organising current information into main headings and designing around requirements of law, making it easy to find policy documents within the site. After research into the best way to create the site, decided that instead of using an online template editor, due to the fact that the client wanted more granular control, it would be based on a Bootstrap theme 'Freelancer' and customised heavily to fit the clients needs. After competitor research, decided that main aims were to communicate a more modern design that was still reminiscent of a school. Decided to use colourful yet simple graphics to communicate this. This would match and then surpass other schools, making sure that the design would be relevant for the maximum time.

Liaised the new structure of the website and created initial homepage with placeholder images to show client what the site would look like. Negotiated on colours, fonts and images, involving discussion into the most timeless and stable solutions so that updates would not have to be as often. Also decided to use open fonts so that they could be sourced from the Google Fonts library and used within documentation for the school without having to buy licences. During development, hosted site on a test area on the server.

Created and edited images for the client using Photoshop and either created or bought graphics that fit the description that they preferred. Created the site using the theme whilst adding decided fonts and images. Incorporated new site hierarchy, incorporating all previous documents required.

Communicated a modern but friendly responsive design that is easy and intuitive to use. Constantly updating information and articles on site whilst iterating design features when required.

For a small project, I feel that my development and iteration style was good. I managed to fully re-structure the hierarchy without confusing staff who can still find documents when they need to. I feel that my new design communicates a welcoming and homely atmosphere whilst being responsive and up to date. The response from the client was very positive and they have communicated the idea of a second site should they wish to expand, further evidencing their satisfaction.

Link to website



Critical Design Brochure and Presentation

University of York Final Year Module

Tasked with creating a design that would critique current affairs in the world, creating an interactive media design fiction relating to near future technology. Initially went through current news sites to find topics of discussion and friction and visited local areas to gain inspiration including St Nick’s Centre for Nature and Green Living. From this, two developed ideas and presented these to the class to gain feedback on the strengths and weaknesses. Discussed the ideas, the inspirations and From this discussed how to best present these (media to be used).

Link to initial design ideas presentation (including wireframes)

Through this feedback, streamlined approach on the ‘big data’ house. Researched current offerings and their critiques, then developed the idea into one big company, creating a mind map of ideas relating to the smart home. From this, created a wireframe mockup of what the house could include and how it would look. Developed each part of the idea, allowing crossover products to connect one to the other and explored reducing the amount of items to further streamline the process.

Decided that the best way to convert my ideas would be through a physical brochure (similar to estate agent or car showroom booklets), press articles with different standpoints, and a presentation akin to that of a large technology company’s keynote address to introduce new products.

Edited product photos in Photoshop to remove logos and to make each item have the traits needed to fit the context. Then created detailed marketing literature to accompany products both within the brochure but also within the presentation and press articles. From this, created the brochure using InDesign, following a premium, modern, minimalist design aesthetic. Then created my company logo, drawing inspiration from other large companies.

Created articles by first downloading the page source of technology review websites and editing the HTML, then screenshotting and adding final touches within Photoshop, adding in features such as advertisements and changing logos to prevent breach of copyright.

Finally created presentation which aimed to be minimalistic and carried the aesthetic of a high profile introduction event, including animations and presenter notes. Presented this to head of course along with an independent adjudicator in the style of the company CEO.

Feedback was very positive, saying that the conveyance had been very effective and that I had really captured the correct design aesthetic. My choice of media was praised for combining the traditional ‘large purchase brochure’ with a modern and ‘website-esque’ design.

Link to SmarterHome Brochure

Link to Design Report

Download SmarterStart Presentation Keynote File or PDF



Web Application Design and Development

University of York 2nd Year Module

Created a website that both demonstrated my proficiency in HTML5, CSS and Javascript but also showed that I understood the principles of information architecture.

Initial research included looking at the current website and finding most important items to incorporate and noted the design aesthetic. Also researched similar e-commerce websites and found the strengths and weaknesses of all of these. Created a design statement addressing each principle of information architecture to guide the design and creation of the site.

Decided on the amount of pages I would create, the images and descriptions I would use, and the audience and therefore aesthetic I would be incorporating to target this group.

Used the Twitter Bootstrap framework as the basis for the site to ensure it was responsive and would match many web standards. Pre-made items were also important such as the navigation bar that would dynamically resize and change its style when viewed on a tablet. Through this, the site was easily populated and made responsive, with different column sizes for different sizes of device.

Decided that the cart should be made using Javascript. Wanted to make sure it was as unobtrusive as possible so incorporated it into the navigation bar at the top with simple commands.

Critiqued the design of the site and decided what features would be the next to target if re-iterated on.

Link to website (if cart is not working, please click "Clear Cart")

Link to Design Report



IBM User Experience Design

University of York 2nd Year Module

Partnered with IBM to analyse and suggest improvements to the user interface of their cloud analytics software which aimed to simplify and streamline the software for users that had not used it before; targeting mainly small businesses.

User Research
At first interviewed the development team behind the current system, focusing on the reason for the redesign and how and why certain features had been implemented. Key parts such as intuitive and easy to pick up were key to attract users within the free trial period. Also learnt more about the target market.

Secondly interviewed a person currently using the software themselves (from IBM). This real world insight also included a comparison with the previous version of the software. Noted that they may be biased to the software.

Then interviewed other candidates that were not connected to remove as much bias as possible. This included a small business CEO with advanced Excel experience and a more basic user that had used Excel minimally and normally just focused on word processing.

To record data, in IBM interviews, recorded voice and took electronic notes. For the other candidates, conducted over video call (which was recorded for facial expressions) whilst recording the screen of the user to see where mouse movements were. This allowed me to re-watch areas later to gain any additional insights into where users were initially thinking to go, showing their thought pattern.

Wireframe Creation
Selected key areas that I wanted to address and from user research and my own use, came up with solutions. To convey ideas, used Paper on iOS to draw out wireframes of the current user interface and the proposed solution.

Presented these to the IBM design team who were very pleased with my ideas and proposed that some may be incorporated in future iterations of the software.

Design Report

Wireframes with notes (Presentation)



Yorkshire Museum User Experience Design

University of York 2nd Year Module

Development of an interactive media prototype of a media installation to be used at the Yorkshire Museum to enhance visitor’s experience.

Research
To gain data on the demographic that I would be targeting, visited the museum and observed the visitors along with the surroundings, what current media installations were inside the museum and who were using them. From this, came up with initial questions to further inform my ideas and carried out a short questionnaire that aimed to find demographic and what users would use at the museum.

Questionnaire was made sure to conform with ethical standards and standard question types, removing as much bias as possible and making sure to only include main points to keep it short. Evaluated and tested by peers to make sure that it was giving enough data and then approved by ethical board.

Created three separate personas to collate ideas and make sure that my design was targeting these people and what they would actually use. Referenced these to current installations and my initial observations for real world evidence that they would be used. Deduced the target audience and the aesthetic I would be using therefore.

From this initial user research came up with basic idea of what the installation should be.

Researched other current ideas that were similar to what I would be proposing to see how they had addressed the situation. Whilst none were exactly what I was designing, they allowed me to grasp a view on how I should go about designing the experience.

Development
Created initial wireframes that showed the main ideas I had come up with. Presented these to the class to gain feedback.

Started to mock up app within Adobe XD. Made sure to reference current aesthetics of the museum so that it fitted with their current media e.g. website, leaflets. After creating initial screens, re-evaluated the idea using peer feedback and personas, and changed certain aspects so that they were fully addressing the target market.

Feedback & Evaluation
Conducted two stages of feedback, one with peers and one with outsiders who had not seen the app before. Identified key areas to improve on in the future for future iterations of the design.

Link to Design Report





Unity3D Zombie Game

University of York 2nd Year Module

Developed a 3D game using Unity3D and C# scripts to automate events which enabled user to pick up items along the journey to complete the game. Edited existing 3D models in Sketchup and created animations to faciltate gameplay. Used multiple layers, colliders and images to enhance user experience. Photoshop was used to edit HUD, overlay and splashscreen.

Link to Implementation Report



Lean Detection System

Singapore Botanical Gardens

Implemented lean detection devices on trees including maintenance and installation of systems with recommendations for future development. Created cloud based tree lean recording system using Google Drive Forms with password protection and photograph upload function. Organised an accessible user interface with facility and instructions for adding new tree specimens. Enabled QR code deployment, including cross platform compatibility for any device with a QR reading application. Created all scripts in Javascript.



Positive Ageing Initiative

SiriusArt Singapore

PR training including preparing press releases, managing media pitches and media tracking. Learnt best practice of advertising in digital and print. Trained in effective communication methods including development of posters, leaflets and MailChimp email marketing. Assisted in the development of new venture www.wearto.com including warehouse sales, promotional emails and supplier relations. Coordinated and recommended solutions for IT system. Trained staff on best FaceBook practices including scheduled and effective posting to increase the number of likes using competitions, and use of consistent graphic and type styles to maintain and improve brand awareness.

Extra Curricular Achievements

  • Co-Founder, Vice President & Tresurer of York Marrow Society
  • Lead Designer of Interactive Media Showcase
  • Face of Stormfront
  • Apple Seed Level 48
  • Fully trained to perform Authorised Apple Service Provider in-store repairs