1
ABOUT ME Miles Bennett Bsc Product Design and Technology Loughborough Design School Education
Personal Skills
Product Design and Technology Loughborough University Second Year Result - First
Software Sketch, Figma, Illustrator, Photoshop, Adobe XD, Invision, After Effects Solidworks, Blender, Keyshot
A-Levels [2015-2017] The college of Richard Collyers Product Design (A*) Computer Science (A) Physics (B) GCSEs [2010 - 2015] The Forest School Acheived 14 GCSEs
Personal Creativity, Organisation, Teamwork Communication, Reliability Interests Achery, Gym, Climbing Graphic Design, 3D Visual Art
Employment
Contact
Cambridge Consultants - UX Design Intern 2019 - 2020 UI Design, UX Research, User Testing
milesbennett90@yahoo.co.uk 07887392590
John Lewis - Stock Management 2015-2016 Customer Service, time management Trend Controls - Research and Development 2014 Computer Aided Design, Electronics
2
03 GESTURE GLOVE
Electronics Programming Prototyping
04 ROTOASTER
Interaction Design Rendering
TABLE OF CONTENTS 01 QUANTUM
UI Design Prototyping User Experience Animation Prototyping
05 BacilAi
Workshops Ideation
02 FIND
UI Design Journey Mapping Design System Prototyping
06 3D UI
Blender Modelling Animation User Interface
3
A RETRO MOVIE RECOMMENDER
01 THE QUANTUM RECOMMENDER RESEARCH WIREFRAMING PROTOTYPING USER TESTING MOCK UPS
A team project to take the seemingly bland movie recommending experience and give it a brand new interaction while taking the style back. The recommender consisted of two parts, an iPad which showed the user movies to rate, and a TV dashboard which showed the results. My contributions to the group projected consisted of conducting all background research into existing products and current pitfalls and designing the final solution, including, wireframes, high-fidelity design mockups and interactive prototypes used for user feedback and testing. 2D Animations were also created for this project. Winner of “The New York Aiconics, excellence in Ai” software award.
QUANTUM
4
RESEARCH
UNDERSTANDING THE USER The research was then encapsulated and personified, creating a persona and user journey to help clarify who the design was for, and what pain points it was trying to address. As the algorithm utilises brand new advances in technology, it was critical that the design and interaction reflected this by standing out against the competition, understanding the current processes users currently use enabled the design to build upon the current experiences. This software was designed as a conference demo, so the user journey reflects this.
MARY Casual Film Fan Tech Enthusiast
HATESH Movie Reviewer Likes indie films
“I spend more time looking for movies than actually watching any, recommendations aren’t ever good”
“Always preferred the older block buster rent-amovie experience”
Needs:
Needs:
- A new method of finding movies, rather than the standard scrolling through a huge database.
- New recommendations based on stuff that he’ll actually like, not based on what’s popular.
- To have relevant movies results to the input criteria she puts.
- Films to mean something again, not just cover art on a digital screen.
Frustrations: - Bored of the same movie recommendations based on stuff she’s already watched multiple times.
RESEARCH Initial background research was conducted into existing solutions to similar problems, understanding the current pitfalls and pain points of existing solutions helps to design to prevent these. The style of existing user interfaces all follow the same trends, and all showed the same issues, researching these showed that the current solutions would not be appropriate for the demo scene we had proposed, providing “how might we” questions for us to design solutions against.
Frustrations: - Doesn’t find the current experience fun, and can even put him off bothering to watch something.
- Can’t tell the difference between different UIs. - The experience doesn’t feel like you’re interacting with anything or putting any work in.
QUANTUM
5
EXPLORATION
SKETCH IDEATION I conducted several rounds of “Crazy Eights� with a team of designers to ideate on a range of solutions. The team then used a dot voting mechanism to vote on the best solution which met the initial criteria the best.
MOODBOARDING The concept stage consisted of moodboarding different aesthetic themes the UI could incorporate. Different versions of a basic user interface were mocked up with each aesthetic to pitch to the development team and stakeholders.
QUANTUM
6
PROTOTYPING
WIREFRAME MOCKUPS
USER TESTING
The most popular design was taken forward, to where a range of different designs was created for the final concept. Then, the following wireframes were created on sketch, and a basic interactive prototype was created on invision.
A high fidelity prototype was created using Invision and sketch, this was used for user testing, to get potential users feedback on the experience.
FINAL IMPLEMENTATION Confusion over button meanings, such as the two destination cards looked a lot like buttons, leading to being pressed rather than swiped.
INFORMATION It was found that several users wanted more than just the title of the movie shown, they also wanted information regarding release date etc.
MATRIX VISUALISATION One of the main selling points of the algorithm was the speed, this was shown to not be stated clearly enough, leading to it being undersold.
QUANTUM
7
SOLUTION
WORK FLOW
Introduction screen, with a 2D loading animation featuring the branding and logo.
A movie is shown in the middle, the user swipes it left or right depending on if they like it or not, along with a don’t know button.
Results screen displayed to the user showing their input history.
Results screen shows the recommended movies, the bigger the bubble, the stronger the recommendation.
FINAL IMPLEMENTATION The final design was built and developed into a real life setup by a team of engineers. I worked closely along side them, ensuring the implementation was kept true to the design, and allowing me to learn some front end development. Designing and setting up the final demo resulted in the final images shown. This demo was set up at several conferences worldwide, with thousands of people interacting with it. The design went on to win the best digital solution at the 2020 AiConics New York Summit.
QUANTUM
8
A GPS TRACKER WEB APPLICATION
02 FIND TRACKER UI DESIGN JOURNEY MAPPING DESIGN SYSTEM PROTOTYPING
A new GPS tracking device was using an outdated and unusable UI, this needed to be de-constructed and re-designed due to a range of issues reported. My role in this project was running the user tests for both the old and new UI, being the sole designer in charge of the re-design and creating the final design mock-ups and interactive prototypes which then went on to being made.
FIND
9
RESEARCH DECONSTRUCTION The existing UI had recieved lots of complaints, and needed drastic re-designing before it was going to be used. The first step in redesigning it was finding out what people disliked so much about it, and what made the experience an unpleasant and difficult one, highlighting what could be improved on.
TEXT IS HARD TO READ
Ben Avid Biker Sport Fanatic
INCONSISTENT STYLING
“I’ve had a bike stolen before this, but i’ve spent too much money to get this one stolen!” Needs: NO CLEAR FLOW
- A system they can trust an expensive item with. - A source of comfort and relief when leaving their bike alone.
Dorris Dog Owner Animal Lover
LAYOUT IS TOO SPREAD OUT
“My dog gets carried away when chasing other dogs, can lose where he is!” Needs: - Accurate tracking for something that could be moving fast.
HOVER ACTION IS OVERLY COMPLICATED
- A history of where the device is and where it’s been.
CONTINUE BUTTON ISN’T CLEAR
USER PERSONAS To help understand the use cases better for the tracking device, I created some personas based on what the tracking device may be used for. These were chosen after speaking to the product development team to understand the target audience they were aiming for, these helped me to further understand who the system should be designed for. FIND
10
USER TESTING
1/14/2020
Find User Testing - Google Docs
USER TESTING
Find User Testing (Session 1)
Once the new design had been mocked up and a basic prototype was made in invision, it was an important stage to now user test the new design to see if it improved on the old one. These user tests were conducted with 5 people who knew nothing about this project or the original UI. The results were then collected and the relevant changes were then made to the UI.
The document outlining the tests that will take part in regards to the Find Application.
Introduction
● Explain what find is and the outline of the test and that it will only take around 15 minutes, ask them to think out loud. ● Ensure the user knows that they are not being tested, it is the design that is and that there are no wrong answers and they can’t hurt my feelings. ● This is only a quick prototype, it won’t be 100% functional. ● The user cannot type into any input fields, the data will automatically be filled in once clicked. ● There are no hover states in the app.
Home Page Tour
Ask you to look at the main page and tell me what you make of it: what strikes you about it, what you can do here, and what it’s for. Just look around and do a little narrative. Don’t click on anything.
Task Scenario
1. You’re a new customer to find, and are unsure about what makes it so unique compared to other trackers, please find out more information. 2. You’ve just bought a new bike, but living in Cambridge means there’s a high chance of it getting stolen, so you’ve bought a “Find” tracker. Please set up your new bike with Find. 3. While out and about, you realise you’ve left your rucksack somewhere, you need to check it’s location.
Questions at the End
● What important information did you find out when the device is in “Find” mode? ● Any significant pain points?
https://docs.google.com/document/d/1TuVRqNTttg0qg6h4FbKQUtwxJrP3curlLqdiT_MlziQ/edit#
FIND
1/2
11
RESULT IMPROVEMENT The new design is shown compared to the old one here, this new improved design recieved much better feedback and was approved to be used. There was one new screen that was developed in answer to some of the user feedback sessions alongside all other screens being re-designed. Due to time restrictions of the project, there were limited rounds of user testing that could be conducted. Ideally, another round would be done now. Original Design
Title Page • • • •
Graphic colours updated to match branding Interaction points made clearer Typography and font updated Map darkened
FIND
Updated Design
Device Selection
Information Page
Main Map
• More consistent branding • Clearer selection and hover states • Icons made simpler
• Information points changed from having to hover over to read to always displayed. • Icons made less intense
• Relevant interaction points brought closer together for easier interaction, navigation Tab added at the top • Warning signs made clearer and easier to spot • Map information updated. • Instructions added for first time use, map history added
12
ELECTRONIC PROTOTYPE
03 GESTURE GLOVE ELECTRONICS PROGRAMMING PROTOTYPING
A joint project with a partner, in which we developed and built a prototype for a gesture controlled glove with which different hand movements and gestures can be used to control external devices. Based on a problem identification of an elderly users trouble with pressing small buttons on many TV remotes. I took the role of the researcher and main designer, the programming and electronic hardware stage of the project was a 50:50 split with my partner.
GLOVE
13
RESEARCH EXISTING PRODUCT RESEARCH Existing remotes are full of buttons, each being small and closely located to one another, without clear distinguishability. User Interviews Overseeing some structured interviews with potential users led to some key insights and quotes to take forward into the persona. “It all seems so complicated, I’m not really sure what the buttons mean!” “Pressing one or two is ok, but after searching for a long movie title or something, they start to ache a little bit” “The volume buttons on my remote are so fiddly to press, I just can’t do it reliably.”
NEEDS • Wants to be able to search and browse tv channels easily. • A solution that doesn’t require high accuracy movements • A solution that doesn’t strain his joints.
FRUSTRATIONS
MARTIN
73 years old Sports Fan
• Has to push hard on the buttons, causing strain. • Experiences difficulty aiming his fingers to the small buttons • Takes a long time to find what he’s after. • Difficulty seeing small icons on buttons
PERSONA To better guide our design, the reseach was synthesized into the following personas. GLOVE
14
PROBLEM
“The small buttons on remotes can be hard to press sometimes, it can hurt my fingers when doing so.�
Easy ways to type search criteria without repetitive button presses.
Accessible to all users with dexterity problems
Use a range of sensors to detect movement
Settings for gestures must be easily changed.
PROBLEM
SOLUTION
Elderly people often suffer from conditions such as arthritis, this can cause huge pain when trying to use small remotes, gripping these small remotes, and pressing hard on the small buttons can aggravate the users joints, and prove hard to do so.
A new method of controlling which will get rid of controllers is needed, the method needs to remove the interaction with small, hard to press buttons. The solution uses a glove, which removes the need for buttons, replacing the individual buttons with sweeping actions and finger gestures.
GLOVE
15
PRODUCTION
PROTOTYPING The prototype glove was designed, coded and built from scratch, it uses a series of components including accelerometers, hall sensors, LEDs and an LCD, with over 900 lines of C code.
GESTURES Working gestures are shown right, these were fully functioning with the prototype created. The final glove had over 16 different working gestures, each producing a unique output. GLOVE
16
OUTCOME
The final product created is an early prototype, made with limited time and resources to show off the functionality only.
GLOVE
17
REDESIGNING THE TOASTER
04 ROTOASTER TOASTER Interaction Design Rendering Product Design
ROTOASTER
The brief looked at having to de-construct and reimagine the toaster to produce a new and exciting toasting experience.
18
RESEARCH USER JOURNEY MAP The first stage was creating a user journey map to analyse the current toasting experience a user goes through, to highlight the pain points, touch points, and interactions that are needed.
01 RESEARCH Competitive Analysis Journey Mapping Product Teardowns Observations How might we statements
02 IDEATE 2D Sketching 3D Sketching Thumbnails Storyboarding
03 DESIGN Informed Brainstorming Design Alternatives Decision Matrix Prototyping
ROTOASTER
RESULTS The journey map informed a range of How Might We statements to be generated, these were created in response to the identified pain points. Several are shown here.
“How might we make the toasting experience more memerable?”
“How might we provide an easier way for user to remember what toast setting to use?”
“How might we provide visual indicators for the current toasting status?”
“How might we enable the user to interact with the toaster more?”
“How might we stop the user from getting annoyed about how boring the toasting experience is?”
“How might we create a new visual appearance for a toaster compared to existing products?”
19
IDEATION
SKETCH IDEATION A series of design methods including thumbnail, 2d and 3d sketching were used to quickly ideate new ideas, based as answers to the How Might We statements generated.
ROTOASTER
20
SOLUTION
The toaster starts in its downwards position. Rotate the toaster slightly untill it clicks into its resting position.
ROTOASTER
Once in the rest position, load the toaster with one or two peices of toast.
Tilt the toaster back depending on how toasted you want your bread. The more toasted you want it, the further back you push it.
Wait for the toaster to tilt back forward untill it’s done.
Once at the bottom, the toast will have been released and caught by the guards.
21
RENDER
ROTOASTER
ROTOASTER
22
CREATING THE DEMO EXPERIENCE
05 BACILAI TUBERCULOSIS WORKSHOP FACILITATION IDEATION JOURNEY MAPPING
A machine learning service used to detect tuberculosis under a miscroscope using an 3D printed phone mount. This project had already been created, but in its current UI state could not be used as a demo experience. This demo experience needed designing and prototyping to ensure it gets across the revolutionary functionality. My role for this project was to find out what information needed to be displayed and how, and then use this to design the demo experience.
BACILAI
23
WORKSHOP
PLANNING This workshop had to find out information for the digital solution and display, as well as the physical set up for the demo. A lot of information was needed, so careful workshop planning was needed, this included a workshop backbone, prompts, and resources created to help the workshop run smoothly.
WORKSHOP FACILITATION The workshop was run with members of the original project, from all divisions, there were engineers, biologists, project managers, and other designers present, these were all included to ensure all aspects of the project could be understood in full, and no parts were left without a say into what could be said. I took lead on planning and running the worskhop with the team.
BACILAI
24
RESULTS
DEMO WORKFLOW The workshop ended in a large amount of insights and pain points generated. These could then be refined and a demo workflow could be created with them, highlighting the key points that need to be shown, and the potential pitfalls that need to be avoided. The demo needed to consist of both a physical and digital setup, both points were covered during the exercises. Goals: What should we try to achieve by the end of the demo? What is everyone’s goal for this project? Success: How do we measure success through quantitative and qualitative measures? Risks: What are some of the factors that might prevent us from achieving our goals? What are potential pit falls of the demo? Assumptions: What does the team assume to be true? What needs to be validated through research?
BACILAI
25
OUTCOME
The workflow was translated into design points, and through rounds of design interations, feedback and testing, the final design was made. The final design consisted of 2 screens, both with a light and dark theme. The design was an interactive experience which used a physical set up of the microscope and phone to display the users input onto the larger television display, allowing an audience to view it.
The design has been used worldwide in several conferences, which has lead to several client investments, aswell as many press releases.
BACILAI
26
PERSONAL PROJECTS
06 USING 3D MODELLING IN USER INTERFACES 3D MODELLING USER INTERFACES ANIMATION INTERACTION
As a personal experiment and project, I’ve been using Blender to create custom 3D objects, animating/rendering them, and using them as backgrounds for user interfaces. This was started as the popularity of using 3D models in User interfaces has been increasing, especially for home pages etc. All briefs were generated myself, as well as all models and UIs.
PERSONAL
27
3D UI 3D MODELLING EXPERIMENTS IN BLENDER FOR UI Using Blender to create 3D animations, used for homepages for user interfaces. Custom animations that react to the UI being interacted with. The assets, animations and UIs were made custom for each example below. Below shows stills from those animations.
FLIGHT BOOKING WEBSITE
MUSIC STREAMING APP
SPORTS MESSAGING APP PERSONAL
28
THANK YOU FOR YOUR TIME. Feel free to get in touch.
29