UX design portfolio

Page 1

Hello I’m Max. Graduating from university specialising in UI/UX design morkelmax@gmail.com https://www.linkedin.com/ in/maxmorkellnd/ https://www.instagram.com/mmorkel.designs/ https://soundcloud.com/user-977678988 https://open.spotify.com/user/maxnutter08?si=0bdb62802c7946fb

About me

Quick backstory

An ambitious creative, devoting my life towards crafting deep and meaningful products. No matter what I'm designing, being driven by the user is at the front, back and centre of my design process.

Why UX design?

Being able to influence someone's life in a positive manner is my motivation, and UX design has the ability to change human behaviour in a slow but progressive manner. Being able to craft the world of which we inhabit is a huge responsibility and requires smart and impactful solutions

My passion for creativity

As well as design, I take my love for innovation across the arts. Music production and live shows are a big part of my life and enjoy working on my skills to impress the crowd.

Hospitality work

Various pub chains and bars 2019-2022

Festival volunteer

Boundary Brighton 2021-2022

Concept Ideator

Cast Iron Cad 2022-present

Product design bsc

University of Sussex, 2:1 2019-2022

Clerk

Plus X, Brighton 2021-2022

Digital content

Blueprint records 2020-2021

2021 2020
2023
2019
2022

Design skills

Technical & Software

Miro & Lucid spark

Research and insight synthesis

Adobe Creative Suite

Wireframing & prototyping

Team collaboration & pitching

Visual design Figma User testing analysis

Bounce.

Progress with music by keeping your resources tidy

Project Overview

The product

Bounce is a responsive web design for start up music producers and passionate learners. This product eliminates wasted time on finding resources and insight. So spend more time writing and less time scrambling.

Our target customer is primarily bedroom producers and start ups. Market is left quite open to user interpretation and offers benefits for producers of all skill.

My role

UX designer, providing innovative website design for a convenient learning hub.

The problem

Martijn finds that he doesn’t learn much from self taught music tutorials, since the video is subject to specific assets the artist has used.

Responsibilities

Conducting interviews, paper and digitial wireframing, low and high fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs

Empathize Define Ideate Prototype & Testing phase January 2023 February 2023

Crafted through 1 to 1 discussions

Having a broad range of interviews was a huge success in creating something personal and stress free. Producers small and large gave their story with learning the ropes, providing a sparse collation of data insight.

Martijn Van Sonderen

Age: 21

Education: Graduated higher education

Hometown: Amsterdam

Family: Lives with friends

Occupation: Gig promotion

Martijn is a recently graduated music producer and DJ, having studied music technology. Twice a week they produce ont their own, in order to take fresh music to the clubs and perform live. As a job he is an event promoter and seeks to improve his music as a hobby. Martijn finds it challenging to apply knowledge to their own projects and that online self taught education doesn’t seem to stick.

As a start up music producer and overal enthusiast, I want to have access to dedicated samples and videos, so that I succesfully recreate what I’m being taught”.

Unsuccessful recreation

Pain points

Not having appropriate sample selection can hinder you ability to follow a tutorial

Forced commitment

Lack of noticeable progression

Small breadth of skill level

Pack purchasing that forces you to buy undesired sounds

Content purchased can be unorganised and offer a sense of worthlessness

Video’s suitable to personal desires are hard to find

1
2
3 4

Design sprint

From paper to figma

With this project, iteration techniques were explored to create an array of possible designs to take forward. Drawing tasks such as the crazy 8’s and storyboarding was insightful, when understanding a typical user journey.

Digital mockups

When establishing initial ideas, 6 different iterations of a parent page were produced. This allows for consistency throughout frames as well as exploration for the best design.

Data insight & testing

“Insight produced from usability studies”

Pattern identification 02. Changes made. Being able to select specific videos to purchase is a desired feature, therefore users should be presented with the option when checking out

When completing a transaction, user is able to customise their order and only pay for the videos they want.

Participant found it slow finding the video he wanted, and had to siff thorugh a lot of content to find a specific video.

Pattern identification 04. Changes made. Looking for specific content, that’s personalised to the user takes more time than it should.

Having drop-downs that filter your search dramatically decreases the time taken to complete a user journey.

Pattern identification 01. Changes made. Users felt unsatisfied at the checkout and confused as to how they can store and watch for later use.

When order is confirmed, more options have been added. Such as add to playlist, continue browsing and similar videos.

User annoyed that he can't save videos for later use in a convenient location
No option to purchase an individual video

Mockups

Final design decisions

My design needed to create a simple process for producers when writing music. Therefore the visual interface needed to accompany that goal. Pages have been well utilised, based on usability studies, the user shouldn't find himself lost or overwhelmed with information.

Prototype

The way a user interacts with the product is just, if not more important than the visual design. The way the product moves based on user interaction has been carefully thought out; Framer was used to create more intuitive movement, feeling more natural to the user when navigating.

Design system

Keeping my work organised

Having a well established design system was crucial in retaining page consistency and familiarity. This proved to be beneficial when prototyping, as frame order and symmetry affects Figma’s smart animate feature. Furthermore, having a design system that is adaptable allows for quicker refinement, allowing the designer to explore different design styles, but keeping it consistent with the established user journey.

Current trends and styles

When applying colour, the 60, 30, 10 rule was applied. Taking this further, a gradient was used as my 30%. This creates a more advanced look and fee, but can still be visually sound to the user.

Design system
Bounce

Hop Shop

Menu ordering app, featuring group pay

This project was successful in turning valuable insight into a functional solution. Improving my understanding for a full length design process, I believe this product stands out visually, allowing my established user flow to feel natural and enjoyable.

Method’s and Process

U er jour ey a d Prototyping App i teractio a d a imatio De ig y te i al moc up

value propo itio I formatio architecture Low-fidelity prototype

Paper a d digital wireframe

U ability tudie Goal tateme t Affi ity diagram Storyboard’

figm

Case study

Project ratio ale a d future tep

Hi-fidelity

mockups

Vi ual de ig App i teractio a d a imatio U ability tudie

January 2023

o
U
Empathize Docume t a aly i (Academic a d mar et publicatio ) Re earch pla I terview Empathy mappi g a d Competitive audit report tudie Define
ability
High fidelity prototyping
Initial ideation
November 2022

Wire-framing and prototyping

Putting insight into action was enabled by completing a series of paper and digital wireframes, as well as storyboards and usability tests to keep the designs aligned with project goals and user feedback. When creating initial designs, several iterations were reviewed for parent pages. This was important as subsequent pages would follow a similar design.

Digital wireframes were then created in order to better visualise the final product. This also provided prototypes to test with users in a more realistic scenario

Ideate

Visual design

Clear heirarchy Consistant iconography & colour

Techniques such as containment and colour contrast were applied in order to establish a clear pathway when navigating

Clear iconography was important in order to create a simpler method of ordering. Not to mention creating a more accessible app. A 60/30/10 colour scheme was used

When focusing my attention to the visual aspect, Gestalt principles such as proximity and similarity were applied to create a visually sound interface. My target market was international students and supports users who want to pay as a group. Therefore, my app adapted a fun and colourful style

1 2 Ideate 1
2

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.