Overview
The goal of this project was to build a new application, to identify the best possible technology, any usability issues of the old legacy application and to determine the critical priority features for the next iterations of the product.
Role - Product Designer
Product Strategy, User Research, Interaction, Visual design, Prototyping & Testing
In 2019 I was hired by Zetcom to start and maintain a development of a new product - eMuseumPlus 2. The product can serve existing and new clients as a public showcase of their art collections. The new solution was to replace legacy Java application and bring modern React and Elastic stack approach. My responsibility started at the RFP stage (to outsource part of the development) and lasted to first successful client implementations.
My key achievements:
● Implementation of a design process. This has helped our team to establish more structure to our work conduct and allowed other teams to gain visibility across our upcoming sprints.
● Improved usability across the application. Since we established a dedicated team, we have been actively working towards conducting UX research and usability testing on all projects.
● Establishing a design kit. This has helped to maintain consistency in the look and feel across different parts of the application.
● Establishing a design system. This has helped the Engineering and Product teams to understand how and why we choose to implement certain components over others.
The Process
We went through the UX design process to understand what kind of a solution clients might need in order to address the problem, to come up with ideas, to design and test them, and build them into a live product.
Understanding the problem
I conducted research interviews with our primary users (project managers, existing clients) to uncover any pain points that they were experiencing with the legacy application.
My research encompassed:
My research encompassed:
● Understanding the user goals and needs
● Understanding the technology that will run the new solution
● Uncovering pain points with the existing legacy solution
● Determining the success of the tasks measured
● Understanding the technology that will run the new solution
● Uncovering pain points with the existing legacy solution
● Determining the success of the tasks measured
The product's vision
Main business requirements:
● Simple and fast environment creation
● Easy configuration of data types to be published by the system
● Scalability
● Low load on the main Zetcom API
● Easy configuration of data types to be published by the system
● Scalability
● Low load on the main Zetcom API
As a product, we wanted to position eMuseumPlus 2 as the leading software for publishing art collections online.
Important part of my research was looking at the competitors and best practices for similar products.
Defining the MVP
I conducted workshops and sketching sessions with the developers, project managers and stakeholders to map out the user flow and come up with a storyboard to capture the MVP.
During workshops we identified key features and acceptance criteria for the MVP.
High level diagram of the technology needed to achieve MVP
Developing the designs
I started by creating high fidelity mockups in Figma and then used Figma prototyping and inspector features to allow the engineers to understand the interactions or various states and to export the CSS code.
A very first sketch of the new eMuseumPlus 2
Key features
Welcome page.
On welcome page I included several widgets and sections like hero section with carousel, video or static image, search bar, highlights for separate modules, recent articles, featured content, call-to-actions.
Search and filters.
Full text search and extensive search possibilities that perform linguistic searches against documents and return the documents that matches the search condition. I highlighted possibility of search across different modules like artists, objects, exhibitions.
Collection page.
Collection page could switch between grid/masonry/list view, use of timeline, pagination, options to change the number of results per page and options to sort results.
Details page.
Details page included proper information about objects, images, reference to related data, recommended articles or social media sharing. Depending on specific client needs it may contain a text heavy sections hidden in tabs/accordions or popup cards.
Working with developers
I worked very closely with the Front End team to spec out any missing interactions that were not covered in the high fidelity mockups. I conducted a UX review of each front-end ticket that was implemented to ensure it was aligned with the designs before it went live.
I also encouraged the team to look into using a third-party component library (Tailwind.css) to quicken the implementation process and spend less time worrying about the component interactions.
Official Tailwind.css styles on Figma
Results and takeaways
After completion of the MVP, Zetcom introduced three clients to be a pilots for the new solution. I used this opportunity to learn even more about various user stories and to calibrate the usability in a real client scenario.
Some key takeaways from this project are:
Some key takeaways from this project are:
● Creating of a strategic plan to launch an MVP. This helps deal with out-of-scope requests that could potentially derail the project and helps deliver a quality product in time.
● User testing doesn't end after development. Design is a constant iteration of improving the experience for the end user. Always find ways to collect and listen to your user's feedback.
● Involving engineering upfront. This helps to reduce any rework later on - understanding of the technical limitations upfront will help to inform your design strategy.
Prototype of the base eMuseumPlus 2 demo that serves as a starting point for introducing clients to the solution