UI Improvement of OpenProcessing
UX Research & UI Refinement For A Seamless User Journey
PROJECT TYPE
UX Research Program
Web App
User Research
UI Redesign
DURATION
10 Weeks
TEAM
Sinan Ascioglu - Project Leader
Alex Xu - Web Developer
Sally Chen - Web Developer
Richael Sun - UX/UI Designer
TOOLS
Qualtrics
Sketch
1. UNDERSTAND the Operational Goals
I have detected the following functioning issues of OpenProcessing(OP) website as an OP user during class:
UI for sketches library can be improved. The search filter and layout of the sketches are not very readable and accessible.
There is no button for going back to the search result page. I can only go back to default sketches page using the “Previous Page” button of the search engine and my filter selection will be cleared.
The code for Processing.js classes only runs properly in “mySketch”. It should be executable in “Tabs” as well.
UI for users’ profile page can be improved. The icons on the webpage are quite confusing.
The Operational Goal is to maximize the values of all User Interface(UI) elements to make it more accessible and user-friendly by redesigning the UI of the website.
2. RESEARCH Latest UX Trends & Users’ Needs
Keywords for latest UX trend: simple, modern, minimalist
Methodology: 1-to-1 interviews and online survey
Online Survey Results
25% of the respondents find it is a bit hard to use the searching interface.
All of them have used the filters and search bar to search sketches.
Half of them feel that the searching interface is not well-designed due to the poor readability and low accessibility to the most helpful results for searchers.
User Research Results Analysis
Strength
Overall design of the website is unique and clear.
The interface is quite accessible and easy to use.
The results are listed organized and neat.
Weakness
The user cannot get back to search results after opening a sketch.
The nav bar, filters and icons are a bit confusing, especially for first-time users.
The searching interface seems to prioritize aesthetics of the results page over legibility of any textual or visual information contained within the search results. In doing so, it impedes the searcher's ability to identify and access the most helpful results.
Suggestions for Improvement
A button for going back to the search result page after opening a sketch.
Add a search bar on each page; tutorial/explanations of the buttons&functions for first-time users.
(Better design of the filter) Think of the practical reasons a person might actually want to search the sketches, and what information they'd want to glean from the results. One helpful thing would be to have the option to search the code only, or the content of the sketch only, or to be able to search by username of the creator, only, and other things like that. It's not really fun or interesting or useful to search for sketches by date ... it'd be more interesting and useful to be able to search for sketches that all make use of a certain function or incorporate some term from the p5.js library to see how different users implement it... as an example.
Add a function that allow the users to organize their own sketches and collections of other users’ sketches.