What are frameworks?
Frameworks provide a structured approach for solving a design challenge. They ensure that a UX designer uses a proven thought process (or set of industrial design principles) based on hard evidence. At Conversion Kings, we don’t believe in using the ‘I reckon’ design methodology. Frameworks ensure that the key design bases are covered.
What should you ask a UX Designer?
If a UX designer doesn’t bother to use proper frameworks, it’s clearly a red flag! It means that their design-thinking is based on guesswork, rather than data. At Conversion Kings, we use multiple frameworks, choosing the most appropriate for each task. Sometimes we pit multiple designs against one another, then compare what works and what doesn’t.
Why do they impact testing?
Impact testing helps you determine what to design for different tests. Due to limited time, resources and traffic, you can’t test all the designs at once. Optimising the user experience design process is just as important as the tests themselves. You’ve got to invest your time in areas where you’ll get the highest conversion uplifts. The design principles behind UX help you make decisions based on solid data.
The alternative? You can start at the simplest page, the most popular page, the weakest page or the strongest page.
NeuroPower Group RELISH UX Framework
The RELISH UX Framework – developed by the global leader in Neuro Marketing, NeuroPower Group – is a powerful method for improving user experience. The framework is based on the notion of satisfying a user’s baseline needs, then providing a level of delight to move users swiftly from introductory experience to advocacy. The framework follows a logical process, and assists with understanding the client and their project goals – resulting in a UX design based on research, user testing and validation.
- Relatedness: Familiarise the client with the design proposed by running through design decisions.
- Expression: Identify any issues with the current design to the client and why it’s a problem.
- Leading the Pack: Have a UX goal to rectify any identified issues with the previous design.
- Interpersonal Connection: Empathise with the target market to understand their motivations and frustrations – to design accordingly.
- Seeing the Facts: Design with data and proven frameworks to ensure designs are valid.
- Hopefulness: Present future recommendations to the client, to enhance the user experience even more.
Design School UX Framework
The d.school Design Thinking framework is an immersive process designed to create empathy through design. d.school represents human-centered design, a bias towards action, and a culture of iteration and rapid prototyping — without attempting to communicate all of the methods and activities that the term “design thinking” encompasses. The d.school framework follows this process:
- Empathise: Talk with your customers directly.
- Define: Define a problem statement from the empathy step.
- Ideate: Brainstorm ideas or solutions.
- Prototype: Build and make things to test concepts.
- Test: Test concepts with users.
Conversion Kings Framework
When a test has been approved at a strategy meeting, it enters the wireframing stage to receive client approval. During this stage, instructions are also given to a developer to execute the test on an A/B Testing Platform. Each wireframe must follow the same process, and produce the same deliverables each time. The design process follows these steps:
- Research / Inspiration: Research your competitors to understand what currently exists out there.
- Low Fidelity: Create basic wireframes using pen and paper or wireframing tools.
- Full Design: Fully polished wireframes made in Photoshop.
- Wireframe Template: Annotate each design in the wireframe template with all design reasonings.
- Approval: Present design to the design lead for final approval.
Research / Inspiration
Before creating a new wireframe, it’s important to understand what the test is aiming to achieve, and what framework methodologies will be used. It’s also worth looking at competitor websites in the same industry space, as well as websites from other industries.
- Inspiration Board (PDF)
Low Fidelity (If Needed)
Some tests may call for a low fidelity design prior to a full mock-up. This approach is useful for large page redesigns, or collaborating with a client to create a design. You can sketch this out with pen and paper, or use a low fidelity wireframing tool such as Balsamiq
- Low Fidelity Wireframe (PDF)
After finalising your concept in the initial research phase, you should begin the wireframing process. All wireframes need to be executed through Photoshop, with the following guidelines adhered to:
- Variations / Interaction steps must be in separate layers or art-boards
- Layers must be named and grouped accordingly
- Only use proper fonts and colours that are on brand for the client
- Assets such as imagery, icons, and shapes must be exported separate to the final file.
- Working Photoshop files need to be saved to the CK Design Folder, alongside all exported assets.
All designs must contain responsive states
When creating your design, ensure that you check which responsive states are active on the website. Typically a site will have Desktop, Tablet/Laptop and Mobile, but this can vary as some websites have different breakpoints. If a website doesn’t have responsive states, you don’t need to include it.
- PSD file (.psd)
- Exported Assets (.png, .jpeg, .bmp, etc.)
After completing the design, the wireframe should be placed in the Wireframe Template. Ensure that each created template contains the correct information for the wireframe, and that the file is named appropriately before uploading.
When putting your wireframe template together, the key thing is to annotate all the updates on your page, and state your reasoning behind the change, eg. made menu headers larger and changed colour to blue – by adding a size and colour contrast to the menu items – it will assist users in finding their relevant categories easier and quicker.
Detailed annotations are essential to ensure that a wireframe can be understood without a designer being present. Also, it’s important to annotate the control to highlight the key problem areas. If a template has multiple pages, provide each individual page with a separate page on the wireframe template. Responsive states for a single page can be grouped. This wireframe template that you’ve created should be uploaded to ProWorkFlow before ticking the task off.
- Working PSD file, Additional assets, Wireframe Template file, all saved into CK Design Folder
- Wireframe Template PDF export uploaded into ProWorkFlow