UX PROTOTYPING, TESTING, AND CASE STUDY
FURNITUREBANK.ORG REDESIGN
Samantha Chong-Luke UX/UI Designer
METHODOLOGY
1
Empathize
Proto-personas, interviews and surveys
2
Define
Affinity diagram, problem statement, user insights and pain points
3
Ideate
Storyboarding, sketches
4
Prototype
Low-fidelity prototyping
5
Test
User testing, heuristic testing
6
Implement
Style tile, final high-fidelity prototype
Tools Used: Miro, Figma, Google Surveys, Paper Sketching
PROBLEM STATEMENT
We have observed a problem with the existing navigation system of the Furniture Bank website which deters users from utilizing their donation service.
We believe that improving the design, navigation hierarchy and calls-to-action on the website will make it easier for charitable users to better understand Furniture Bank’s value proposition and arrange furniture and financial donations.
USER RESEARCH
User interview plan
Conduct 5 interviews
Each interview within 10 mins
User Survey
Prepare a detailed user interview plan with 3 tasks
Teammates conduct interviews separately
Manage interview time between 5~10 minutes
Gathering all the results and generate affinity diagram
Create a user survey and receive over 50 feedbacks
KEY USER INSIGHTS
People are not actively moving
People are willing to donate furniture on website
People are looking to free up space/downsize
KEY USER PAIN POINTS
A lot of scrolling on homepage
Don't like the main green colour on the website
Request pick up button is too much
Information is poorly organized
The nav bar is confusing
Request form should be above the fold
Font is colourful
USER
PERSONA
STORYBOARD
User: Mary Walters
Problem: Getting rid of old furniture
Solution: Furniture Bank pick up service
Bonus: Tax receipt of the value of her donation
CURRENT SITE USER TESTING
Key Issues From User Testing
LOW-FIDELITY PROTOTYPING
Key Issues to Address
PROTOTYPE TESTING AND FEEDBACK
Key Issues to Address
PROTOTYPE TESTING AND FEEDBACK
Key Issues to Address
PROTOTYPE TESTING
AND FEEDBACK
Key Issues to Address
FINAL HIGH-FIDELITY PROTOTYPING
OLD WEBSITE
NEW WEBSITE
UI
STYLE GUIDE
ALL THE COLOR PASS THE ACCESSIBLE COLORS - AA
FINAL HIGH-FIDELITY PROTOTYPING
FUTURE OPPORTUNITIES AND NEXT STEPS
Streamline donation process
Improve blog
INDIVIDUAL TAKE AWAY AND FUTURE
I would love to continue to iterate and test based on the feedback given.
Please see initial changes made based on the comments received in class.
I look forward updating the UI style guide to reflect insights and continue to implement changes based on user testing