REFit
Challenge: REFit is a leading refrigerant management company. Our primary design challenge was twofold: first, to develop a website that seamlessly catered to our customers' needs and preferences; second, to create a user-friendly app that empowered REFit employees in the field with efficient refrigeration management tools.
Solution: I was a member of a dynamic three-person design team dedicated to this project. In close collaboration with another design team and under the guidance of our product manager, we meticulously crafted comprehensive style guides, wireframes, and prototypes for both the website and the app.
My Role: My primary responsibilities encompassed finalizing the brand guide, creating a mood-board and proficiently crafting wireframes and prototypes for both the website and the app. Additionally, part of my role was presenting our designs to our valued clients.
Video of Interactive Prototype
But how did we get here?
Read below to see project case study
Exposition
Website Map
The very first step in understanding the problem at hand was to visualize all the parts that would ultimately make the website REFit was wanting to make.
The website map proved instrumental in comprehending and visualizing the site's blueprint. Among the primary components that garnered significant importance were the incorporation of several key pages, including the About page, Software/Services page, Resources page, Sign-In page, and Contact page. Furthermore, it became evident that the client aspired to have both English and French versions available.
Wireframes for app
While the primary focus was initially on the website, these wireframes offered valuable insights into the workflows and UI elements that would be incorporated into future designs Though the website was first priority, we were still considering and planning for the app along the way. Cohesiveness between the app and web brand styles was imperative.
Highlights
Understanding the Layout of the website (Home, about, product, contact, shop and login/create account) as well as understanding basic UI principles to follow when starting to design.
Ideate on structure of layout of website and app
Sketches for web
Rising Action
Mood-Board
The overarching themes were reliability, industrial aesthetics, trustworthiness, and professionalism. We also sought to evoke the sensation of ice and coolant, we achieved this by prominently incorporating our primary blue colour, which effectively symbolizes this concept.
Highlights
This mood board visually communicated the desired aesthetic, tone, and emotional aspects of the project, guiding the design process and aligning the teams vision.
Style Guide
The subsequent phase entailed crafting the components that would be integral to both the website and the app. This particular facet of the design process necessitated close collaboration with another design team
UI elements clearly defined - can start designing smoothly!
Highlights
These style guide will be used both for the website and the app. Super helpful in establishing consistent design elements and principles, ensuring cohesive and user-friendly experience across both products.
Accessibility check crucial in process of creating inclusive, legally compliant, and user friendly experiences.
Wireframe to early Prototype
Findings from Testing
Usability issues - Reordered layout and and cleaned up labels.
Accessibility concerns - Contrast and colour ratio adjusted to meet accessibility check all around.
User flow adjustments - Redesigned user flows to improve user interactions.
Climax
High Fidelity Prototypes
After following the Design Thinking process, the high fidelity prototypes were achieved. This was the accumulative work of empathizing -> figuring out the problem -> generating ideas -> testing the product -> and ultimately creating the prototype.
Highlights
Process of creating prototypes was imperative because it allowed us to test and iterate on user interactions, uncovering potential issues early in the design phase.
These were presented to stakeholders
Resolution
Next Steps
The next steps is to start designing the app that will be directly connected to the website. The app will be for the REFit technicians to use in the field.
Additionally, the shop must still be designed for the website.
I will be creating this with WordPress