UI/UX PORTFOLIO Tom Kendrick
DESIGN PROCESS // RESEARCH
My design process is heavily research focused. I like to have a thorough understanding of the user, client, business, market, competition and current design trends. Having a solid understanding of all of these areas allows me to design more effectively and provide context for my product. I believe that a healthy design process expands and contracts as it progresses (as shown by this graph.) Research, ideation and user testing all expand the possibilities of a design solution. By refining these factors, an effective and conscientious design can be achieved.
RESEARCH, RESEARCH, RESEARCH...
ANALYSIS OF RESEARCH...
With any new UX project, I carry out intensive research. I am not specific at this initial stage. I gather any and every bit of information I can.
I look for anything that can define the needs/requirements of the user, provide context for the project and any holistic insights that can influence my approach to the design problem.
I D E AT I O N / I T E R AT I O N
PROTOT YPING/ U S E R T E ST I N G
IDEATION...
ITERATION...
PROTOTYPING & USER TESTING...
FINAL DESIGN...
I develop a hierarchy of content. This can change as the process develops but I use it as a referral when designing. I sketch as many ideas as I can and produce multiple low fidelity wireframes and user flow concepts.
I refine and simplify my initial concepts through iteration to develop a single high fidelity wireframe and developed user flow. I refer back to my hierarchical content list, research and user personas.
With my high-fidelity wireframe and user flow established a prototype can be made. This prototype can be used for user testing. This allows me to make any adjustments to the information architecture, user flow and wireframe to improve usability.
User testing allows me to improve the usability of my UX design as well as implement suggestions from the user and iron-out any flaws in the design. Through effective user testing I can refine the UX design into a finished design solution.
SAFEGUARD // PROJECT As part of my ‘Safeguard’ final year project I needed to develop an app to be used by coaching staff to help them identify and keep track of head injuries suffered by rugby players. The app had to coincide with a smart mouthguard that connected to the app via bluetooth and recorded the head impacts received by players.
APPROACH I needed to understand the full behaviours of rugby coaching staff and the scenarios they often find themselves placed in during a rugby match. I also needed to know their current understanding of the dangers of head injuries and their attitudes towards addressing and treating injured players.
DESIGN SOLUTION An app based around a home screen which warns the user when a player is at risk of a head injury and allows the user to respond. The home screen featured essential tools such as syncing devices, the number of players connected to the device and a team overview. This home screen allows the user to keep an eye on players while also being engaged in the game. Additional features are accessed through a hamburger button such as device battery life, player profiles, NHS guidelines and incident history.
USER PERSONA
CONTENT MAPS & SCENARIOS
SKETCHING
Speaking with Rugby Coaches, I developed a user persona to gain an ethnographic insight into the needs of the user and the scenarios they often encounter during rugby matches.
I created content maps and scenarios which allowed me to explore different features and when during a match certain features would be required. This process enabled me to develop a hierarchical list and prioritise essential features.
I sketch to quickly create wireframes. I started to build a layout and iterate my ideas to ensure that the key features were prioritised and the information architecture was understandable and intuitive for the user.
USER FLOW
HI-FIDELITY WIREFRAME
FINAL CONCEPT
Using my sketches and hierarchical content list, I built a user flow which enabled me to understand the functionality of the app and tweak any issues before I approached my high fidelity wireframe.
When I was confident that my user flow and wireframe were functional, I developed a high fidelity wireframe. I used this wireframe to develop a prototype and carry out user testing.
User testing and feedback allowed me to adjust any issues with the design to ensure that the final concept was efficient and intuitive for the end user.
VETERINARY D I AG N O ST I C S / /
ANALYSIS OF CONTENT
USER PERSONA
I received a basic wireframe for the app from the developers. I analysed the essential features of the app and began to investigate and research ways to improve the usability and aesthetic of the app.
I created a user persona of both vets and researchers so I could tailor this app to their needs. I identified that vets needed more visual cues in the app. They also wanted more of a personal touch to a statistically based app.
WIREFRAME
FINAL CONCEPT
I developed a split-level wireframe which helped to separate the large amounts of data on the screen. It also improved the information architecture and made the app more understandable for the user.
My final concept featured a more personable layout and heavy use of iconography to make using the app intuitive and engaging. The concept was sent to the developers for prototyping and testing.
PROJECT I was approached by a start-up company to assist them in a veterinary app that would be used by researchers and vets. The app records data from sensors that measure the gait on Canine and Equestrian animals. The company provided me with a developed user flow and basic wireframe using Google Material.
APPROACH I had been provided with a basic wireframe and user flow already so my primary role was to concentrate on user experience and the aesthetic of the app. I carried out thorough research about vets and spoke with them to gain a clear insight to the user requirements of this app.
DESIGN SOLUTION I created a split-level design which organised the information architecture of the app. The app is being designed for an international market so I heavily used iconography so that users who can’t understand the language can still effectively navigate the app. I added a personal touch to an app that is very data orientated by adding features that allow the users to take pictures of the patient (canine or equestrian.) This made the app more personable as well as making it easier to locate an individual patient.
KENDRICK LTD // |work in progress |
PROJECT To develop a website for an accountancy firm based in Mid-Wales. There is not a lot of information needed for this website. The client wants a web presence that is professional and that can provide a contact point for future clients.
APPROACH I needed to develop a concept that was professional and stylish. I created a wireframe that would showcase information about the company as well as allow for easy navigation for the user. Using this wireframe I used HTML and CSS to develop a working prototype.
DESIGN SOLUTION I decided on a contemporary design. I kept the entire website grayscale. This was inspired by the black and white facade of the client’s office building and is a reference to the Victorian town where the offices are based. I used iconography to make the client’s services easy to understand for the user and I also integrated Google maps so that the user can identify the business’ location.
WIREFRAME
HTML
CSS
After sketching a few wireframes, I developed a simple wireframe that looks contemporary while maintaining a strong professional feel.
Using Sublime Text, I developed the html pages for the website. I created the layout and added information about the company, images and Google maps links.
I developed CSS pages for the website, using my wireframe as a reference. I am currently waiting on high resolution images to bring the web pages up to a professional standard.
WEB PROTOT YPE
THANK YOU
PROFILES www.tomkendrickdesign.co.uk https://uk.linkedin.com/in/tomkendrick https://www.behance.net/tomkendrick https://issuu.com/teek
C O N TAC T 1 Portman Mews Shieldfield Newcastle upon Tyne NE2 1TB tomkendrick@live.co.uk +44 7501 450 720