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


Get excited for SQL Saturday 2022! Join our Microsoft MVP speakers Rez and Eric to learn how you can use the Power Platform in conjunction with Dataverse for Teams to create apps and solve your business automation challenges. Register now:


During the next episode of the #PixelMillWebinars, our #UI/UX experts break down:

- #PowerApp UI/UX best practices & common pitfalls
- #Figma best practices for PowerApps
- Converting from Figma to PowerApps
- See a PowerApp design in action!

In the next episode of the #PixelMillWebinars, our #UI / #UX experts break down:

- #PowerApp #UI / #UX best practices & common pitfalls
- #Figma best practices for #PowerApps
- Converting from #Figma to #PowerApps
- See a #PowerApp design in action!

In the next episode of the #PixelMillWebinars, our branding and #UI/#UX experts will show you how to elevate your #PowerApp experience without #coding.

Join us on 9/29 at 11am PST to see how you can apply custom #UI to #PowerApps designed in #Figma.

Working in a hybrid environment allows us to collaborate with people from all over the world. Check out this quick video and learn how to navigate language barriers when using Teams! #workthewayyouwant

Subscribe to PixelMill's

* indicates required

Let's Talk Digital
Workspaces Today

Get In Touch