Luke Hazlehurst UI/UX Portfolio

Page 1

2024 Lukehazlehurst3004@gmail.com London, UK +44 (0)7531 957 310 UI/UX Portfolio Luke Hazlehurst New Designers 2020 Kenwood Appliances Award Winner

About.

A Design for Industry Graduate from Northumbria University with three years of agency experience including an internship working in Amsterdam. Now, a passionate and enthusiastic designer looking to immerse myself in the world of UI/UX design to further develop my expanding skill set and to help pursue a new creative venture.

Ethos.

A successful product should be inspired, intuitive and inviting. Simply put, you should know what to do with it and how to use it as soon as you look at it. When you understand the people you are trying to reach and design from their perspective, the solutions that you develop and ideas you put forward, will be embraced.

Extras.

I have won the Kenwood Appliances Award at New Designers 2020, taken part in online courses such as Human-Centred Design 201: Prototyping which was sponsored by IDEO.org and also furthering my skill set through personal projects. I have also had the opportunity to work on some exciting live briefs with the likes of Kenwood.

Studio Sophisti
Deadgood Ltd Displayplan Outfly Newcastle-upon-Tyne Hertfordshire London Amsterdam Alveo kKit Pulse Clipz Interaction Design Product Design Final Year Project Service Design Kenwood Reckitt Benckiser Third Year Second Year Money UI Design

Full website revamp with the new Breeze brand. This vision has been developed by their founder, Josh. Breeze needed help to translate the new brand to the web, with UX/UI consideration.

Who are Breeze?

Lydian Dental are rebranding from Lydian to Breeze. The rebrand is intended to cement their unique brand position as a dentist that cares about people and experience over profit. By redefining the business of dental, Breeze is making oral and dental care less about what you ‘need’ to do and more about what you ‘want’ to do.

Assumptions

What are they thinking before they find us?

How do we want them to make them feel?

Needs

What we need them to know?

Why should they care?

The Breeze Tone of Voice

Who are our users?

Monica, 25-45, New Patient

A tech savvy individual with dental insurance who is looking for easily accessible dental care while they are working a full time job. It needs to be easily accessible when needed to fit in their busy day-to-day schedule. Quick and convenient is essential for their lifestyle and something they look for in their chosen practice.

Laura, 30-40, Dentist

A full time professional in most cases who is looking for a nicer space to work in. Bored of the classic, dreary dental clinics they need a better place to spend their life. Having good pay and benefits is at the forefront of their decision making and they need to be appreciated by my workplace.

Following on from a successful UX workshop I built a well structured information architecture based on around the users wants and needs from the Breeze site. This involved a restructure of content hierarchy to make sure users could access all the crucial information needed.

I then built mobile and desktop wireframes of the ten page website which included three template pages. As most of the users were more likely to access the site via mobile I made this a priority when showing the client. This was to make sure it was user friendly and flowed well.

Breeze supplied us with some beautiful still life imagery that had examples of the new brand. I used the brand guidelines and to mock-up a ‘look and feel’ for how the website could be designed. I then used this to help form the basis of the style guide before implementing across the wireframes.

When rolling out the style guide onto the wireframes we came across some very prominent accessibility issues with the new brand they had developed. Following some tweaking to colour palettes and a new set of rules to follow we landed on a beautifully designed website.

The final outcome was both accessible while still keeping the tone and feel of the brand. With some solid imagery and smooth interactions the website fulfilled the brief.

Outcome

The outcome, was an exciting, new dental care website that is breaking away from the boring dull norms associated with the industry into something playful and light. A website that functions seamlessly across desktop and mobile

What were the challenges?

This brief was a real eye opener for the importance of accessibility. With the need for inclusive and accessible design becoming the norm, it is a stage of my design process which has now become essential within our projects.

North, formerly known as WithSto, is a new mental health service who is aiming to revolutionise the delivery of mental health services. There main target, people who wouldn’t normally have the inclination or the ability to go to a therapist.

What is North?

North is a mental health platform that provides educational courses, practical advice and clinically-backed guidance to anyone who needs it. These include those dealing with stress and low self-esteem, as well as those living with mental health conditions. North is the only clinically-backed mental health support platform that is accessible to all. They put the power back in your hands to help you improve your life.

The North Tone of Voice

We provide scientifically-backed, practical advice in an easy to understand, accessible way.

We empower people with the knowledge and tools to improve their lives and become their best selves.

We are concise and simple first, detailed and patient second.

We are empathetic and understanding – we want to make users feel comfortable and accepted, no matter their background, issue or experience.

“You don’t have to be positive all the time. It’s perfectly okay to feel sad, angry, annoyed, frustrated, scared and anxious. Having feelings doesn’t make you a negative person. It makes you human.”
— Lori Deschene

Wise, knowing and reassuring

Calm, serene and dependable

Pale orange Warm, positive and inspiring Indigo Turquoise

Who are we?

We are Dr. Jean Milburn from Sex Education.

Jean is experienced and wise whilst remaining unashamedly expressive and in touch with her own emotions. She’s intentional, careful and empathetic in her speech and actions, making her a trusted guide, friend and parent – and the primary voice of our brand.

Calm, serene and dependable

We are also Jakob Nyman, Jean’s partner.

Jakob, the epitome of Scandinavian stoicism, is calm, direct, concise – and never boring. For our headlines and other short-form content, we embody him; stoic and simple, getting our point across in the fewest words (and syllables) possible, without losing impact.

reassuring

Indigo Wise, knowing and Turquoise

During the wireframe phase I had the chance to improve and refine each screen and to start foreseeing how the platform could eventually look. With the eventual end goal being an app it was mobile first in the stage. However, desktop optimisation was still considered.

With the nature of the product being a very sensitive one, the layout of information across the platform had to be carefully considered. I had to work closely with our copywriter in order to make sure that crucial information was not lost amongst a mass of text.

As previously mentioned, this was a mobile first project. Despite this the product still had to be accessible and function in the same was on desktop. This was quite a challenging task and took a lot of variations to make it have both the same functionality and aesthetic appeals across both platforms. With a solid style guide laid out prior to the design, we were able to implement a clean and calming desktop design system that still felt like the North brand.

The main focus on the mobile design of North was creating a product that felt empathetic but still had a feeling of being gamified. How can we encourage users to participate in courses? Are there rewards? Is mental health something that should even be associated with games? These were all very sensitive topics that we had to carefully consider and test with potential users to make sure that we were not crossing any boundaries.

The introduction of a reflection area took the app too another level by offering a place for users to track their feelings and thoughts while participating in the courses. By seeing their growth through this hopefully it would encourage continued use of the product.

Outcome

North is yet to be fully developed into a functioning product due to the company currently in the process of a new funding round. However, we have produced an accessible, empathetical designed product that functions across mobile and desktop systems.

What were the challenges?

The main challenge here was the cross over between desktop and mobile versions. The design system was created to feel very gamified and in tune with mobile interactions. This made the shift into desktop a difficult challenge but one that succeeded.

A campaign developed by Vivida in collaboration with HSBC, focused on diversity and inclusivity. An experiential environment built in Unity, combining aspects of escape rooms and role-playing experiences to highlight issues of diversity and inclusivity.

What is In Their Shoes?

Traditional Diversity, Equity, and Inclusion training often falls short in driving real transformation. In Their Shoes revolutionises this approach by enabling participants to listen, understand, and empathise with others’ stories. By immersing ourselves in someone else’s reality, we ignite empathy, paving the way for genuine change within organisations and society. In Their Shoes challenges organisations to embrace empathy as a catalyst for change through the use of Vivida’s experiential and bespoke training methods for the workplace. This includes areas such as cybersecurity, technology and innovation as well.

Building upon Vivida’s brand, using refined wireframes and information architecture to develop a partner micro site for In Their Shoes. Refine

Craft captivating UI design mock-ups that align seamlessly with Vivida’s brand guidelines, ensuring visual cohesion and brand integrity. Evolve

Bringing the website to life, we deploy the newly developed platform, ready to empower organisations and individuals across the UK. Engage

Anthony, 25, Resource Group Leader

The groups are essentially ‘clubs’ within a organisation that represent specific protected characteristics. His responsibilities are to promote the visibility of his protected characteristic group. His goal is to increase visibility of their protected characteristic group’s challenges in the workplace. They want a solution that works, but does not require too much time spent from them.

Sue, 45, Head of HR

While officially, her role in HR is to keep staff happy and resource groups happy, it really is about protecting her company’s brand. She supports the diversity and inclusion movement more generally, but can be hesitant. She also operates within the ‘antiwoke’ movement. Her goal is to promote and protect the reputation of their employer brand and to hit their targets.

Jamie, 35, Head of Security Awareness

Jamie delivers the learning and development resources to staff, so they are trained and equipped with the tools necessary to prevent avoidable cyber attacks. While she is passionate about her subject, she is acutely aware that most people are disinterested. Her goal is to make their topic exciting and engaging to employees, and in the process better protecting her company.

Who are we?

What is our tone?

1

Challenging and Courageous. Aware of the challenge we face and never lose sight of it; never feel it is too big to overcome.

We are TV presenter, actor, director and writer, Reggie Yates.

Just like us, Reggie has an ability to connect with anybody, exploring and challenging social issues through storytelling. Drawing on the lived experiences of individuals, Reggie’s approach is thoughtful, authentic and empathetic. By empowering people to listen to and understand the stories of others, we’re inspiring positive change through empathy.

Orange

Warm, calming and reassuring

2

Empathetic and Impactful. Helping people understand how others feel, changing how they act. Creating impact in the workplace that spreads.

3

Emotive but empowering. Inspire people to think about the role they play in our society; Help them understand how they can be part of the solution.

The topics being address throughout In Their Shoes are very sensitive and current. After a successful workshop we created an information hierarchy that prioritised both the needs of the client and wants of the user.

In Their Shoes will act as an educational platform as well as place for users to tell theirs own stories of workplace issues. A hub for learning and encouraging a change in current workplace practices.

The main tag-line of the In Their Shoes brand is empathy before discovery. This is a very bold statement and required bold imagery and colours to compliment this. The brand’s imagery is clean, bold, and diverse. Emphasising diversity and inclusion. We used midjourney to help source some of the imagery on the request of the client.

We created successful design systems for both desktop and mobile variations of the website. The In their shoes brand is made from 3 warm colours appearing in solid blocks or in a series of calming gradients. These have been used on the site alongside the graphic assets to create smooth transitions between the different sections on the website. It was crucial to maintain a cohesive visual aesthetic across all communication material. No matter how you come across the In Their Shoes brand you should feel the same emotions.

Outcome

The final outcome was a beautiful marriage of well constructed and communicated information paired with a calming and welcoming brand that encourages the users to delve into and explore the In Their Shoes journey.

What were the challenges?

One of the main challenges was to build a website that communicated the essence of the brand without sacrificing on the important content. It involved lots of communication with ‘storytellers’ on how they wanted their journeys to be seen.

Design and visualise a new finance app. A personal project focused primarily on UI design and the process behind it. An exploration task into figma and its capabilities.

I constructed a user flow of what a basic start to finish journey looks like while navigating the app from initial registration through to a transaction. This helped with trying to understand the ways users can interact with the product, as well as allowing us to see navigation through user touch points.

“What is the product and who is it for?”

“What do our users need the most in a product like this?”

“What do our primary users need most?”

Initial user flow.

Walk-through.

After sketching out wireframes and thinking through the preliminary flow, I reviewed what was necessary, unnecessary, and what areas needed improvement. This is always a crucial step to make sure I had the finishing touches on the underlying UX before moving onto the visuals.

Combining vivid colours came from wanting to express to users that money ad saving doesn’t have to be dull. The bold colours feel warm and welcoming enough to draw the user further in.

I wanted to design a finance app that would allow the consumer to easily track and visualise savings and payments with a clear visual language and simplistic UI. My knowledge around finance based applications coming into the project was minimal, so that became problematic when designing around a few screens. This made me realise just how important it is to have strong insights and a project plan to begin with. Overall this was a strong takeaway from the project, one that I use to design well-rounded experiences.

Cymatic is a music event that I run alongside some of my friends which started in February 2023. I’ve had the opportunity to create a series of artworks inspired by cymatics since taking the lead on the graphic and branding aspects of the event. We’ve received overwhelmingly positive feedback for every event artwork we’ve produced so far. Our brand concept revolves around merging a sleek, minimalistic font with the fascinating world of cymatics – the science of creating art through sound. This fusion is evident in our designs, where you’ll find a consistent presence of ripples and waves, capturing the essence of this captivating field of science.

2024 Lukehazlehurst3004@gmail.com London, UK +44 (0)7531 957 310
Thank you for your time.

Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.