Internal Systems and In-House Projects
Role
UX Designer
Company
Home Bargains
Year
2022 - 2024
As part of a shift in the development team mentality towards user-centric design, I have provided UX support through workshops, user interviews, and high-fidelity prototypes across a variety of internal and customer-facing projects
Research & Evaluations
Product Evaluations
As the business looks to grow the design capabilities, one of the key outputs I have produced for projects as part of the discovery phase is an evaluation on existing systems that are either being enhanced or rebuilt. These documents highlight to stakeholders and the development team key areas to be mindful of and form the basis of pain points to be able to discuss with users. Playback of these documents has also worked as an educational piece to inform stakeholders of why certain changes should take place.
Recommendations
The digital presence is an area of focus for improvements and through performing a UX review I was able to identify these parts. Since there is already a backlog of work for new features for the e-commerce platform, I created visual examples for quick UX wins that can sit alongside the work on new features to ensure even new additions would benefit from the research
User Interviews
While a tool already exists for product safety, the department wanted to merge different product types into a single system. As part of the discovery process I interviewed members of the department to understand how they used the current system, what areas they struggled with, and asked them to go through an interactive wireframe to ensure the project was going in the right direction. This was summarised for stakeholders and the development team and formed the basis for additional technical requirements to be identified.
Competitor Analysis
Similar to the evaluations, competitor analysis is a useful way to demonstrate areas for improvement by highlighting what is working for other companies. In workshops, I have found this particularly useful to engage stakeholders to identify the features they want to see in their department’s systems.
Workshops
Product Safety Discovery Workshop
As design is still new to the business, departments are wary of discovery as it takes time away from their regular day-to-day tasks. Part of my objectives when running this two-day workshop with the product safety department was to highlight the benefits of participating in process to gather requirements. This has been an issue for the development team in the past and has led to projects either taking longer than expected or for the product to miss the mark. The results of the workshop were engaged stakeholders who were all in agreement with what the new project required and wireframes that were used in subsequent interviews to further identify areas for improvement.
Careers Website Design Workshop
While the project had strong stakeholder support, the careers website overall belonged to the HR department. As part of the design process, I held a short workshop that served to generate excitement and buy-in from the other members of the department by showcasing the results of research and dot-voting on proposed designs.
This not only had the desired effect, but also resulted in additional feedback and ideas from the team as they wanted to see the product succeed.
Design Systems
Master Design System
Part of the work on the external-facing careers website redesign involved going through the various existing corporate sites in order to identify core colours outside of the few hex codes I received from developers for the main e-commerce site. What started as an initial design system for an external-facing project quickly grew to encompass multiple external-facing projects. One of the workarounds to this that also helped with file management was to then separate out this large system into a master system with core elements like colours, logos, and certain components such as navigation bars and buttons, and smaller sub-systems that could act independently from each other.
This has since led to a separate system for internal-facing projects but it still inherits certain aspects from the master system.
Prototypes and Final Designs
Live Prototypes
When prototyping final designs, I find that including delays can really help bring a design to life and make it feel as close the “real deal” as possible.
Prototyping in this way has the added benefit of showing developers how screens should transition from one to the next. It was helpful when describing how the company’s new Single Sign On screen would look like while checking if a user’s password was a match or not.
Component Interactions
I like to make use of Figma’s component variant interactions especially for demonstrations. This ranges from everyday components like buttons and cards with hover effects, to how fast a carousel would move between objects, and to navigation bars with dropdown menus.
While these things can be considered minor in the grand scheme of a full project, they are the core of what users will generally be seeing and clicking and so I believe it is important to prototype those and get feedback.
The carousel was prototyped to include allowing stakeholders to click the “dots” as another way to navigate between all five elements.
Key Takeaways
Use of Visual Examples
As part of research and playback documents, I found that including screenshots of other digital experiences was beneficial as a comparative tool in explaining issues with existing systems. I had initially believed it could be seen as condescending to include these, but being able to clearly point out aspects that were working on another website got stakeholders more engaged with the playback and excited for the next steps.
Consistency Through Design
At the time, no design system existed other than what coded components existed across the company's digital presence both internally and externally. One of the key issues was that the internal systems could all look different from each other. As part of the design process, I worked on setting up a core design system in Figma that other sub-systems could inherit from. This meant that external-facing things like the e-commerce or careers website would have shared components to strengthen the brand, while the internal systems benefitted from a uniform experience.
QA Experience
The nature of having a small development team has meant that in order to get projects “over the line” I have stepped in to help with testing. I found it really interesting using tools like BrowserStack to view live designs on a variety of devices and operating systems and see exactly how things would work. The experience following test scripts has also really highlighted to me how easy it is to miss edge use cases, especially when working as the sole designer, so the support from the team in letting me know about them means being able to craft a better end result.
Bridging the Design-Development Gap
As part of building the design capability within the development team, one of the ongoing goals is to better bridge the gap between design and development. I have been working through the code base to identify what components are missing from the Figma designs and have also been working to use naming conventions that align with the code and have found that this makes for an easier handover.
The next steps are to workshop our processes and included within that is how to better align design components with coded components to allow developers to focus on building new features instead of testing and re-testing old components.
Still curious?
There’s plenty more to check out