Date:
2023
Platform:
Mobile Application
Role: UI/UX Designer
CHALLENGE
Musicians, sound beat creators and artists in the music industry must use headphones for their work and hence are liable to develop sound impaired deficiencies hence Scott headphones are created to beat the odds by creating noise canceling headphones
WHAT I DID
User observation
Competitive research
User journey maps
Low fidelity wireframes
High fidelity wireframes
Prototypes
Usability testing
SCOTT
HEADPHONES
SCOTT
HEADPHONES
Date:
2023
Platform:
Mobile Application
Role: UI/UX Designer
CHALLENGE
Musicians, sound beat creators and artists in the music industry must use headphones for their work and hence are liable to develop sound impaired deficiencies hence Scott headphones are created to beat the odds by creating noise canceling headphones
WHAT I DID
User observation
Competitive research
User journey maps
Low fidelity wireframes
High fidelity wireframes
Prototypes
Usability testing
SCOTT
HEADPHONES
SCOTT
HEADPHONES
SCOTT HEADPHONES
UI/UX DESIGN
Product Design // Design Operations // Capacity Building // User Researcher
BACKGROUND
Scott Headphones is a resigned project based off the original Scott Headphones Mobile app, first created in the year 2022. Users can easily purchase good quality and ear drum protecting headphones amidst having an excellent user experience. Since we are launching this new product, the team spent a good amount of time on user research upfront to really understand our users goals. we were able to take our research results and story map features and functionality to develop a longer term product roadmap
SCOTT HEADPHONES REDESIGN // RESEARCH + DESIGN
Observations
60%
User Experience in purchasing an purchasing a gadget/ device online
100%
User Experience in community feature
90%
User Experience in acquiring Scott headphones via the mobile phone app
100%
User Experience in needing noise canceling headphones
Observations
Design Maturity
Interface design
Appreciates design’s input for layout, interactions, and user flows
User research is usability/validation of specific section or flow
Systems / business first
Make it pretty
Design is only visual- colors, images, fonts
This user interfaces should look like.....
Systems first
2
1
3
SCOTT
HEADPHONES
veradaniels@gmail.com
Name on card
veradaniels
Card number
0000 0000 0000 0000
MM/YY
10/20
CVV
234
BUY NOW
i
SCOTT HEADPHONES REDESIGN USER JOURNEY
Onboarding
Screens
Resend Verification
Create Account and login
Verify Email/Number
Proceed to Home page
Explore Features
Select Items
Add to Cart
Proceed to payments
Enter payment Details
Retry Payment
Confirm Payment
Order Confirmation
Initiate Delivery Process
Prepare Order
Dispatch Order
Track Order
Deliver Oder
Receive Oder
Review Experience
Feedback Submitted
End
Account Verified
Payment Successful
SCOTT HEADPHONES // LOW FIDELITY WIREFRAMES & COMPONENTS
The music of our people brings joy and delight to the soul
buy our amazing products and listen to any music of your choice. get to stream songs on all platforms including spotify ,audiomack etc. Get amazing deals with up to 50% off all products this Christmas holiday start now by clicking here(link)
LEARN MORE
BUY NOW
REVIEWS
The Music of our people
SCOTT
HEADPHONES
5pL-00
$ 290
Beautiful materials
umam sagittis id scelerisque donec in diam. Vulputate faucibus nulla sit sitdiam. Vulputate faucibus nulla sit s.
All the Bass
umam sagittis id scelerisque donec in diam. Vulputate faucibus nulla sit sitdiam. Vulputate faucibus nulla sit s.
All the Comfort
umam sagittis id scelerisque donec in diam. Vulputate faucibus nulla sit sitdiam. Vulputate faucibus nulla sit s.
Recycled plastics
umam sagittis id scelerisque donec in diam. Vulputate faucibus nulla sit sitdiam. Vulputate faucibus nulla sit s.
Recycled
Material
Bass
Comfort
SCOTT
HEADPHONES
veraswem662@gmail.com
veraswem662@gmail.com
veraswem662@gmail.com
veraswem662@gmail.com
SCOTT
HEADPHONES
SCOTT
HEADPHONES
SCOTT
HEADPHONES
BUY NOW
BUY NOW
BUY NOW
BUY NOW
SCOTT
HEADPHONES
SCOTT
HEADPHONES
SCOTT HEADPHONES // HIGH FIDELITY DESIGN
The music of our people brings joy and delight to the soul
buy our amazing products and listen to any music of your choice. get to stream songs on all platforms including spotify ,audiomack etc. Get amazing deals with up to 50% off all products this Christmas holiday start now by clicking here(link)
LEARN MORE
BUY NOW
REVIEWS
The Music of our people
SCOTT
HEADPHONES
The music of our people brings joy and delight to the soul
buy our amazing products and listen to any music of your choice. get to stream songs on all platforms including spotify ,audiomack etc. Get amazing deals with up to 50% off all products this Christmas holiday start now by clicking here(link)
LEARN MORE
BUY NOW
REVIEWS
The Music of our people
SCOTT
HEADPHONES
5pL-00
$ 290
Beautiful materials
umam sagittis id scelerisque donec in diam. Vulputate faucibus nulla sit sitdiam. Vulputate faucibus nulla sit s.
All the Bass
umam sagittis id scelerisque donec in diam. Vulputate faucibus nulla sit sitdiam. Vulputate faucibus nulla sit s.
All the Comfort
umam sagittis id scelerisque donec in diam. Vulputate faucibus nulla sit sitdiam. Vulputate faucibus nulla sit s.
Recycled plastics
umam sagittis id scelerisque donec in diam. Vulputate faucibus nulla sit sitdiam. Vulputate faucibus nulla sit s.
Recycled
Material
Bass
Comfort
SCOTT
HEADPHONES
SCOTT
HEADPHONES
veradaniels@gmail.com
Name on card
veradaniels
Card number
0000 0000 0000 0000
MM/YY
10/20
CVV
234
BUY NOW
i
Congratulations
Your order is on its way
Thank you for your patronage
Congratulations
Your order is on its way
Thank you for your patronage
HOME
FEATURES
CART
CHECKOUT
COMFIRMATION
REVIEWS
SCOTT
HEADPHONES
+
SCOTT HEADPHONES // GRID PLACEMENT //ALIGNMENT // MANIPULATION
GRID PLACEMENT // CONTROLS
Selected Control with Grid Shown
Understanding Control with Grid Shown
Unselected Control with Grid Hidden
The control and its padding fits to the grid. There is 4px padding around each control. The bounding box fits to the edge of the control padding.
The control is offset from the grid by 4px since the control padding fits to the grid.
The control is shown on the front panel in normal view, without the grid shown.
ALIGNMENT // CONTROLS
Alignment Overlays
Alignment Overlays
Each control has alignment overlays generated based on mouse tolerance to nearby controls.
As the user moves a control on the interface , it snaps to existing controls and alignment. overlays should display
The controls should be able to snap to the grid and also to any alignment areas for each control.
MANIPULATION // CONTROLS
Placing and Movement
Default Behaviour
Placing a control and moving a control should function the same way so the user can see the control that is being placed. The control on both actions will be semi-transparent and is the actual default size of the control.
By default, the control moves in 16px increments to align with the grid. A control can move in 1px
SCOTT HEADPHONES // OUTCOMES
I would work with our product manager to bucket designs into the product release, which were on a six month cycle. For the first product release in 2023, the product feedback we received for the UI creation functionality was positive: users stated that they were able to load pages quicker and action buttons where loaded in split of a second based on the built in features our team had designed.
SCOTT HAEDPHONES // IMPLEMENTATION
As the team worked towards the first release, I established and formalized processes and best practices based on some activities that were happening on the project. This included creating a design system and templates for user research and design. It was this bottom up approach coupled with working with leadership that allowed the team to get buy-in for more design work.
KNOWN UI PATTERN
NEW BUT KNOWN UI PATTERN
NEW AND UNKNOWN UI PATTERN
Write user stories
Develop
Define problem
Design solution
Design solution
Validate
Gather
requirements
Validate
Validate
Develop
Write user stories
Wireframe
Validate
Develop
Validate
Usability test
User centric
Design is seen as a way to solve problems
Support for user research
User’s first-start with the user’s mental model and built to that
SCOTT HEADPHONES
UI/UX DESIGN
Product Design // Design Operations // Capacity Building // User Researcher
BACKGROUND
Scott Headphones is a resigned project based off the original Scott Headphones Mobile app, first created in the year 2022. Users can easily purchase good quality and ear drum protecting headphones amidst having an excellent user experience. Since we are launching this new product, the team spent a good amount of time on user research upfront to really understand our users goals. we were able to take our research results and story map features and functionality to develop a longer term product roadmap
SCOTT HEADPHONES REDESIGN // RESEARCH + DESIGN
Observations
60%
User Experience in purchasing an purchasing a gadget/ device online
100%
User Experience in community feature
90%
User Experience in acquiring Scott headphones via the mobile phone app
100%
User Experience in needing noise canceling headphones
Observations
Design Maturity
Appreciates design’s input for layout, interactions, and user flows
Design is seen as a way to solve problems
Design is only visual- colors, images, fonts
User research is usability/validation of specific section or flow
Support for user research
This user interfaces should look like.....
Systems / business first
User’s first-start with the user’s mental model and built to that
Systems first
Interface design
User centric
Make it pretty
SCOTT HEADPHONES REDESIGN // IMPLEMENTATION
As the team worked towards the first release, I established and formalized processes and best practices based on some activities that were happening on the project. This included creating a design system and templates for user research and design. It was this bottom up approach coupled with working with leadership that allowed the team to get buy-in for more design work.
SCOTT HEADPHONES // LOW FIDELITY WIREFRAMES & COMPONENTS
5pL-00
$ 290
Beautiful materials
umam sagittis id scelerisque donec in diam. Vulputate faucibus nulla sit sitdiam. Vulputate faucibus nulla sit s.
All the Bass
umam sagittis id scelerisque donec in diam. Vulputate faucibus nulla sit sitdiam. Vulputate faucibus nulla sit s.
All the Comfort
umam sagittis id scelerisque donec in diam. Vulputate faucibus nulla sit sitdiam. Vulputate faucibus nulla sit s.
Recycled plastics
umam sagittis id scelerisque donec in diam. Vulputate faucibus nulla sit sitdiam. Vulputate faucibus nulla sit s.
Recycled
Material
Bass
Comfort
SCOTT
HEADPHONES
SCOTT
HEADPHONES
veradaniels@gmail.com
Name on card
veradaniels
Card number
0000 0000 0000 0000
MM/YY
10/20
CVV
234
BUY NOW
i
The music of our people brings joy and delight to the soul
buy our amazing products and listen to any music of your choice. get to stream songs on all platforms including spotify ,audiomack etc. Get amazing deals with up to 50% off all products this Christmas holiday start now by clicking here(link)
LEARN MORE
BUY NOW
REVIEWS
The Music of our people
SCOTT
HEADPHONES
veraswem662@gmail.com
veraswem662@gmail.com
veraswem662@gmail.com
veraswem662@gmail.com
SCOTT
HEADPHONES
SCOTT
HEADPHONES
SCOTT
HEADPHONES
BUY NOW
BUY NOW
BUY NOW
BUY NOW
SCOTT
HEADPHONES
SCOTT
HEADPHONES
SCOTT HEADPHONES REDESIGN USER JOURNEY
Onboarding
Screens
Resend Verification
Create Account and login
Verify Email/Number
Proceed to Home page
Explore Features
Select Items
Add to Cart
Proceed to payments
Enter payment Details
Retry Payment
Confirm Payment
Order Confirmation
Initiate Delivery Process
Prepare Order
Dispatch Order
Track Order
Deliver Oder
Receive Oder
Review Experience
Feedback Submitted
End
Account Verified
Payment Successful
SCOTT HEADPHONES // LOW FIDELITY WIREFRAMES & COMPONENTS
5pL-00
$ 290
Beautiful materials
umam sagittis id scelerisque donec in diam. Vulputate faucibus nulla sit sitdiam. Vulputate faucibus nulla sit s.
All the Bass
umam sagittis id scelerisque donec in diam. Vulputate faucibus nulla sit sitdiam. Vulputate faucibus nulla sit s.
All the Comfort
umam sagittis id scelerisque donec in diam. Vulputate faucibus nulla sit sitdiam. Vulputate faucibus nulla sit s.
Recycled plastics
umam sagittis id scelerisque donec in diam. Vulputate faucibus nulla sit sitdiam. Vulputate faucibus nulla sit s.
Recycled
Material
Bass
Comfort
SCOTT
HEADPHONES
SCOTT
HEADPHONES
veradaniels@gmail.com
Name on card
veradaniels
Card number
0000 0000 0000 0000
MM/YY
10/20
CVV
234
BUY NOW
i
The music of our people brings joy and delight to the soul
buy our amazing products and listen to any music of your choice. get to stream songs on all platforms including spotify ,audiomack etc. Get amazing deals with up to 50% off all products this Christmas holiday start now by clicking here(link)
LEARN MORE
BUY NOW
REVIEWS
The Music of our people
SCOTT
HEADPHONES
SCOTT HEADPHONES REDESIGN USER JOURNEY
Onboarding
Screens
Resend Verification
Create Account and login
Verify Email/Number
Proceed to Home page
Explore Features
Select Items
Add to Cart
Proceed to payments
Enter payment Details
Retry Payment
Confirm Payment
Order Confirmation
Initiate Delivery Process
Prepare Order
Dispatch Order
Track Order
Deliver Oder
Receive Oder
Review Experience
Feedback Submitted
End
Account Verified
Payment Successful
veraswem662@gmail.com
veraswem662@gmail.com
veraswem662@gmail.com
veraswem662@gmail.com
SCOTT
HEADPHONES
SCOTT
HEADPHONES
SCOTT
HEADPHONES
SCOTT
HEADPHONES
SCOTT
HEADPHONES
BUY NOW
BUY NOW
BUY NOW
BUY NOW
SCOTT HEADPHONES // HIGH FIDELITY DESIGN
The music of our people brings joy and delight to the soul
buy our amazing products and listen to any music of your choice. get to stream songs on all platforms including spotify ,audiomack etc. Get amazing deals with up to 50% off all products this Christmas holiday start now by clicking here(link)
LEARN MORE
BUY NOW
REVIEWS
The Music of our people
SCOTT
HEADPHONES
5pL-00
$ 290
Beautiful materials
umam sagittis id scelerisque donec in diam. Vulputate faucibus nulla sit sitdiam. Vulputate faucibus nulla sit s.
All the Bass
umam sagittis id scelerisque donec in diam. Vulputate faucibus nulla sit sitdiam. Vulputate faucibus nulla sit s.
All the Comfort
umam sagittis id scelerisque donec in diam. Vulputate faucibus nulla sit sitdiam. Vulputate faucibus nulla sit s.
Recycled plastics
umam sagittis id scelerisque donec in diam. Vulputate faucibus nulla sit sitdiam. Vulputate faucibus nulla sit s.
Recycled
Material
Bass
Comfort
SCOTT
HEADPHONES
SCOTT
HEADPHONES
veradaniels@gmail.com
Name on card
veradaniels
Card number
0000 0000 0000 0000
MM/YY
10/20
CVV
234
BUY NOW
i
Congratulations
Your order is on its way
Thank you for your patronage
HOME
FEATURES
CART
CHECKOUT
COMFIRMATION
REVIEWS
SCOTT
HEADPHONES
+
SCOTT HEADPHONES // GRID PLACEMENT //ALIGNMENT // MANIPULATION
GRID PLACEMENT // CONTROLS
Selected Control with Grid Shown
Understanding Control with Grid Shown
Unselected Control with Grid Hidden
The control and its padding fits to the grid. There is 4px padding around each control. The bounding box fits to the edge of the control padding.
The control is offset from the grid by 4px since the control padding fits to the grid.
The control is shown on the front panel in normal view, without the grid shown.
ALIGNMENT // CONTROLS
Alignment Overlays
Alignment Overlays
Each control has alignment overlays generated based on mouse tolerance to nearby controls.
As the user moves a control on the interface , it snaps to existing controls and alignment. overlays should display
The controls should be able to snap to the grid and also to any alignment areas for each control.
MANIPULATION // CONTROLS
Placing and Movement
Default Behaviour
Placing a control and moving a control should function the same way so the user can see the control that is being placed. The control on both actions will be semi-transparent and is the actual default size of the control.
By default, the control moves in 16px increments to align with the grid. A control can move in 1px
SCOTT HEADPHONES // OUTCOMES
I would work with our product manager to bucket designs into the product release, which were on a six month cycle. For the first product release in 2023, the product feedback we received for the UI creation functionality was positive: users stated that they were able to load pages quicker and action buttons where loaded in split of a second based on the built in features our team had designed.
Navigation:
Home
Services
About
Resume
C
2024 Vera Swem All Rights Reserved
Socials:
Date:
Platform:
2023
Mobile Application
Role: UI/UX Designer
CHALLENGE
Musicians, sound beat creators and artists in the music industry must use headphones for their work and hence are liable to develop sound impaired deficiencies hence Scott headphones are created to beat the odds by creating noise canceling headphones
WHAT I DID
User observation
Competitive research
User journey maps
Low fidelity wireframes
High fidelity wireframes
Prototypes
Usability testing
SCOTT
HEADPHONES
SCOTT
HEADPHONES
KNOWN UI PATTERN
NEW BUT KNOWN UI PATTERN
NEW AND UNKNOWN UI PATTERN
Write user stories
Develop
Define problem
Design solution
Design solution
Validate
Gather
requirements
Validate
Validate
Develop
Write user stories
Wireframe
Validate
Develop
Validate
Usability test
2
1
3