Wireframes | Portfolio

DESIGN SYSTEM

Wireframes help you to focus on what matters!

Creating a simple yet meaningful impact.

PROBLEM AT HANDS

How can the Enterprise Design Group effectively advance and implement improved toolsets and methodologies across teams to ensure consistent benefits and enhanced productivity?

ROLE

Product Designer

TEAM

Srishti - Designer, Trainee Designer

TIMELINE

May, 2024

TOOLS

Figma

PROJECT OVERVIEW

Many teams conduct lo-fi testing early in the design process, which presents an opportunity to streamline and accelerate the process right from the start. To address this, we proposed the development of a Lo-Fi Wireframe Kit, enabling product teams to use it for testing in the initial design stages with simple, low-fidelity wireframes rather than complex, high-fidelity flows.

REASONS TO USE LOW-FIDELITY WIREFRAMES

1. Facilitate Team Collaboration
Share ideas efficiently within your team, fostering a collaborative environment that encourages open communication and feedback.

2. Prioritize User-Centric Design

Focus on what truly matters to your users, ensuring that essential features and functionalities take precedence in the design process.

3. Encourage Creative Exploration

Rapidly generate diverse ideas and concepts using divergent thinking, allowing for a broad exploration of potential solutions.

4. Engage Stakeholders Early

Involve cross-disciplinary teams and stakeholders early in the journey to gather valuable input and feedback, aligning everyone with the project's vision.

5. Accelerate User Testing

Test with customers earlier in the process (Minimum Viable Concept) to quickly iterate and refine designs based on real-world feedback.

IDEATION

Crafting the Vision: Balancing Inspiration with Practicality

During the ideation phase, we began by gathering inspiration, focusing on styles that resonated with our vision. We were particularly drawn to designs with clean lines and a hand-drawn feel. While these elements aligned with our aesthetic preferences, we encountered a limitation—Figma does not support hand-drawn effects natively. To achieve this look, we would need to import assets from external sources, which influenced our design decisions moving forward.

Captivated by designs that featured clean lines combined with a hand-drawn aesthetic.

AMatic SC

Shadows into light

Patrick hand

Gloria Hallelujah

Cosmic Sans

Balsamiq Sans

Black 000000
Grey 797878
Off white F5F5F5

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

To achieve a handwritten look, we explored various fonts and ultimately decided on Balsamiq Sans for the desired feel.

Keeping the spacing as GEL

Hand drawing icons to go with the theme

Decided the colours

To enhance the hand-drawn wireframe feel, we chose to combine a reduced script font with Balsamiq Sans. This approach allows users to avoid using Lorem Ipsum.

EXAMPLE OF A WEBPAGE USING LO-FI COMPONENTS

Final Designs

We decided to implement three modes with text variables attached to each. These modes are designed to emulate different stages of the wireframing process. A standout feature of our wireframe kit is its ability to incorporate these varied modes effectively.

1. Redacted text

This is highly effective for addressing the blank page problem and is particularly useful in the early stages of design and wireframing. It allows you to focus on usability and layout rather than content, and it's also excellent for gathering general feedback.

2. Headings & labels

This mode is ideal for minimal viable cohort testing, integrating accessibility into your daily design and wireframing. It offers a low-fidelity approach with content clues in headings to support effective testing.

3. All text

The final mode features readable text and is used when integrating actual content into your designs. This stage focuses on viewing the complete picture, including content, rather than just usability and layout.

Immediate User Feedback Post-Wireframe Launch