OVERVIEW
Roles and Deliverables
I was the main UX designer working with a team of developers to build this out. There had already been research done on the search and filter flow, and the rest were targeted for minor updates. My deliverables included:
- Sketches
- Mockups
- Full a11y annotations for each screen
- Responsive layouts
Problem
The main issues were usability, and consistency. There were plenty of issues at first glance that anything would have if it hadn't been updated in a few years. Also, with so many pages each with different amount of products to design for. Along with those issues, we had to address the accessibility issues as well.
Audience
The target audience was provided to us by the business unit on this project. They know the frustrations of the users and were able to collaborate on the design phase in order to relieve as many of the pain points as possible. Our users were school admin and those who make purchasing decisions for the upcoming school year. We had physical catalogs that we passed out and got feedback that the layout used was easy to understand for purchasing.
Solution
Clean up the UI while updating the components and focusing on the search and filter flow for the product list. This included using bs5 components and addressing the accessibility concerns of the page. The goals are to get the user to the product list quicker, clean up the overall page, update components to bootstrap 5 , and get the page to WCAG AA standards.
Process
Discovery and Research
As stated above, the initial research phase had been complete along with user interview, and competitive analysis.
Competitive Analysis
We focused on what the users knew and preferred. The main goal was to get our users to this product list as quickly as possible. From there, we tried to emulate the flow of a physical catalog to match their mental model. By using the hard copies we were implementing basic skeuomorphic design. This was the basis of the entire page.
Flows and Breakdowns
Before designing, we took a look at what we had currently. The main issue correlates to the main goal of the redesign: get the user to the product list as fast as possible. The current flow requires the user to scroll below the fold and click the "all products" tab to get to the entire list. This is too long for our users and it gave us a good starting point. Along with the overall UI issues that come with older screens, the other main issue is the content below the product list, we saw that most of our users were not aware of that content due to it being below a long list. Below are some visual breakdowns of the current UI, the first two images illustrate the issue with the read more/less toggle.
Figma Mockups
Finally, we started the designing the updated UI. We used a previous research effort to influence the product list search and filter UI. After the search and filter the rest of the content was designed to nest in tabs to give the content a full page instead of sharing space with the product list.
Live build
Building it out
This was one of the first times I took the lead in assisting developers with building out the pages. I worked with a few developers daily, assisting them in the CSS styling, and accessibility of the page. It was a great learning experience where I gained more of an ability to change things on the fly when they just are not working out. I was able to learn a lot about CSS style manipulation and HTML. This process helped me further my ability to discuss with developers and improved my design skills to be more developer friendly.
.png)
CONCLUSION
Final Thoughts
Through this process, I learned a lot about the final steps to getting a page built. I gained more confidence in my ability to use CSS and HTML, as well as design better for more efficient pages. I learned how to assist a team of developers and gained confidence working with them everyday. I look forward to future projects where I get to develop more skills and showcase the ones I have learned from this project.
Next: TallyUP
.svg)
