Guest Blog | More Than Just a Pretty Interface

We’re baaack with another exciting topic for our guest blog series!
In this exciting sequel to our popular blog, Why a Business Analyst is the Ace Up Your Sleeve, we welcome Kunaal Sharma, PixelMill’s Senior UI/UX Designer to the stage to discuss the next step in our PixelMill process, Design. Our design team is passionate about creating a truly custom, unique, and extraordinary product that’s tailored to our client’s unique brand and culture. But how does this all work exactly? Join Kunaal on this journey through the building blocks of design and find out how PixelMill makes your site more than just a pretty interface.

Innovate + Design : How PixelMill Does SharePoint Your Way

Hi, I am Kunaal, PixelMill’s User Interface & Experience Designer. The foundation of the Design phase is built during the Discovery phase. These two phases usually overlap each other to create a strong foundation for your project. I’ll walk you through some of the major activities that take place during the Design phase that brings your project to life. 


What is a wireframe? 
Wireframes are simplified, black and white drawings, of your site’s layout that outline the placement of features and elements (items that are discussed in the Discovery phase). It serves the same benefit as an architectural blueprint, focusing on the foundational elements before adding any creative elements.  
Wireframes’ main purpose is to:  

  • Define the structure of your site   
  • Outline the layout of your site 
  • Delineate the navigation of your site 
  • Assign content hierarchy and priority  
  • Serve as a reference point for functional specifications 

 Benefits of Wireframing 
Wireframes play a critical role in the project process by saving our clients time, energy and money. It’s a quick and easy way for clients to evaluate the site structure and design. Instead of combining functionality and layout with branding aspects of the project, wireframes ensure that focus is on one of the elements. Wireframes help clients visualize the site’s functionalities and gives them the ability to provide feedback early in the process. Wireframes also make the design process more efficient. Skipping wireframes would delay this valuable feedback, potentially increasing the cost of making changes to a fully branded mockup instead of simplified wireframes. 
Not only does wireframing benefit the client, it also provides room for designers to experiment. This helps make the process more productive while bringing out the best possible solutions to providing the cleanest experience for the end users. 
Wireframing fosters a clear communication channel between Clients, Business Analysts, UI/UX Designers, and Developers. This ensures that everyone is on the same page and is aware of each feature and how it’s meant to function. 


Example Mockup
What is a Mockup? 
A mockup is a static, fully branded, visual representation of your project. Essentially, it’s a visual guide of what will be built during the Develop phase of the project.  Mockups bring the wireframes to life by adding in colors, images, typography, etc.  
Benefits of Mockups 

  • Encourages the review of the visual side of the project 
  • Saves time on development as it allows for feedback while changes are much easier and more affordable to make 
  • Helps stakeholders and eventually end users adopt the product quickly and easily through consistent branding  


Prototyping gives clients an interactive example of the mockup which helps them understand the interactive elements that a static wireframe or mockup cannot demonstrate. This also gives us the opportunity to discover any potential features that could have been missed during the other two activities happening in this phase.  
Prototypes allow us to receive important client feedback and incorporate changes iteratively. Once we have something tangible to present, the client reviews and tests it, and then we make any necessary changes. We repeat this process until we’ve met all the product requirements before we send the final design to our developers for the build. 
Advantages of Prototyping: 

  • Allows project stakeholders to see how the final product will look and behave early on. 
  • Encourages feedback from project stakeholders and users to ensure the product is on the right track. 
  • Saves time when handing off the project to developers. Developers can reference the interactive prototype instead of a static Photoshop file. 
Design Squiggle
Design Squiggle by Damien Newman

The Design phase brings clarity and focus to a project. We start to visualize how the product may look and behave while always following the goals and expectations defined in the Discovery phase. The activities outlined above all play a crucial role in keeping the project goals in line. This phase produces visual references for stakeholders and developers alike that ensure the product is not only visually appealing and true to your brand, but that it also functions and behaves in the most efficient way for your team.  

Kunaal Sharma
Senior UI/UX Designer
Batman Junkie
Your Composition Confidant

Leave a Comment

Your email address will not be published. Required fields are marked *

Enter Code *

Filed Under


Anyone who has 'attended' a physical meeting by 'conferencing in' in knows the frustrations & limitations that come from not being in the room. You're the voice in the ceiling & not equally represented in the conversation.

This is no longer acceptable.

Today, we find ourselves facing the “hybrid work paradox.”

Employees are keen to retain flexibility. At the same time, human-to-human collaboration remains important.

To marry the best of both, hone your strategy, spaces, & tech to suit employee needs.

It's the day of the show, y'all!

Join the #PixelMillWebinars this morning at 11am PST for a live panel discussion about what the #digitalworkspace looks like for a #hybrid team, & how #Microsoft365 can empower your users no matter where they're working.


Join the #PixelMillWebinars this Thursday as we welcome key players from @OrchestrySoft, @KieferConsult, and @AP_Mortgage to discuss the hybrid work paradox and how #Microsoft365 can empower your users no matter where they're working.

We've all been itching to get "back to normal," but what does that mean? Are we missing out on valuable lessons learned by trying to return to something that perhaps wasn't working before?

Join us next week for a live panel discussion on the new normal.

Subscribe to PixelMill's

* indicates required

Let's Talk Digital
Workspaces Today

Get In Touch