Redesigning a legacy application
I joined as a UX Design co-op mid-way through the redesign. As a new team member with no prior retail experience, I met with stakeholders to understand the context of the problem, product experts to understand the functionalities of the app, and conducted research to drive design decisions.
Constraints: changes were only limited to UI and I had limited resources to conduct research.
đź”’ Some of the artifacts in this case study are blurred out due to an NDA. Please email me for more information. :)
Users found it difficult to find functions they were looking for in the application. Many voiced out how they couldn’t tell what elements were selectable or clickable. Many symbols used could be interpreted as other functions, causing confusion.
Users voiced out how there was a lot of information displayed on the screen at times. Everything looked the same, making it difficult to skim through.
The buttons of the app didn’t always work and the app kept crashing. This was addressed by building the app on stabler software — React Native.
NPS Score on recommending StoreForce’s ESS app to others. The industry average is 40 for B2B SaaS companies (Raileanu, 2024).
Contrast ratios and button sizes failed accessibility standards. Elements were small or difficult to see.
Padding around elements and buttons was inconsistent.
The lack of information hierarchy (same text sizes, weight, colour) made it difficult to navigate the screen.
Changes were limited to UI due to resource constraints. These were the following design principles that were used to guide the redesign.
Colour contrasts adhere to WCAG guidelines, ensuring that users could see elements. Both light and dark mode were to be accounted for.
Ensure touch targets were a minimum of 44px to 48px, large enough for users to interact with.
Keeping elements in native locations within app that existing users were familiar with to lessen the learning curve.
