B2B Components Distribution
Responsive Interface
Project Background: Utilizing the principles of responsive design and the conventions for reading on a website, diagram a home page for each major breakpoint: desktop, tablet (vertical), and phone (vertical).
Problem: Analyze and format a site redesign for a Business-to-Business electronic components distribution company. This company sells and delivers a large inventory of components that other companies (manufacturers, retailers and fabricator) purchase, either for large scale use or resale to consumers. While individual consumers can order from the company, it is relatively rare.
Goals: Design the the home page to be more organized, accessible, and usable.
Primary: Get the user to the products and information they need to place an order on the site.
Secondary: Provide a space to call out featured new products, sales, and events. Incorporate sections to for recent articles, how-to content from a resource center (essentially a blog), and recent social media activity.
Action: First, I performed a competitive analysis of 3 sites to view how similar companies were displaying similar information. Next, I began with hand drawn sketches to establish the layout. The primary and secondary goals helped drive hierarchy within the design. I used Sketch to develop wireframes for the desktop, tablet, and mobile views.
Results: After peer review, I removed the social media link section to allow for more real-estate. Fully annotated wireframes can me seen below.
Lessons Learned: This project allowed me to build experience in creating a responsive design with focused wireframes including annotations.
I was able to explore creation methods, both by hand on paper as well as a software tool to help become more comfortable with the process of creating wireframes rather than jumping into higher fidelity designs.
Opportunity to share, collaborate, critique, and communicate with peers about the work. Gaining experience both giving and receiving critique (and how to react to it) is an important element of professionalism as a designer.
In this case, I did not exclusively take a “mobile-first” design approach, but I can see why that could have been helpful if this was a real-life scenario (rather than a made up grad-school assignment). I was forced to make content decisions such as how many products or blog posts to show on the screen. With limited screen space, focusing on mobile delivery could have helped me simplify and improve the content.
Initial Wireframes
Desktop View
Tablet View
Mobile View
Mobile View - Menu
Design Behavior
Header
Desktop
When the logo is clicked, it will direct the user back to the home page
The main navigation bar includes: About Us, Products, Solutions, Resources, and Support.
The search bar is a global search so it can be used for anything within the site including specific products.
Mobile
Main navigation, account login, cart, and phone number are collapsed in the hamburger navigation.
Search remained outside of the menu for easier usability.
Search would overlay the screen on mobile when the user clicks on the magnifying glass to search for something within the site.
Content Area
Callout Carousel
Highlights the company info, upcoming sales events, and featured products
Will rotate automatically or the users can click on thhe left and right arros to navigate through the three options
On a mobile device, user can use swiping action
CTA’s - Learn More and Contact Sales Support
Community
Blogs/Knowledgebase
Blog posts consist of an image, article title, and description.
Clicking “Read More”, tile, or title redirects to article page.
On smaller screens, the image and description take up the entire container. As it moves to mobile, they stack on top of one another in the mobile screen.
Social Media
Twitter container holds 4 posts at a time.
On the smaller screens, container moves below the Blog Post container.
New Products
Image tile with product name and details below.
User can click on the tile to be redirected to another page with full description.
Click the cart icon in the top right of the tile to add to cart. This will add it to their cart and there will be a signifier to the user letting them know that the action was complete. (Think Amazon)
By clicking the “More >” link at the bottom of this section, the user will be taken to the page with the complete list of “New Products.”
Social Media Links
Allows the user to click on any of the social media icons to be redirected to that specific platform for the company. As the screens decrease in size, the icons get larger to allow for easier touch target on mobile.
Footer
Desktop
The footer would function the same as a site map and includes a site search, social media links, the navigation links seen in the header
Visible sub-navigation items – My account, Create Account, Sales and Tech Support, etc.), newsletter subscription sign-up, copyright/rights reserved information (Terms and Privacy policy included), and contact information (phone, address, and email).
Tablet/Mobile
The navigation sections stack as the screen becomes smaller but still allow for that sub-nav items to be visible and are large enough to click on.
The logo at the bottom will redirect to the home screen.
Iteration
“Great work. Your wireframe is complete and well structured. You've explained the intended behaviour and provided details about the breakpoints.”
— Mauricio V (classmate)
“I think there's a way to draw attention to their social media accounts and community and blog without having it take up valuable sales and support space.”
— Nellie R (classmate)
Final Wireframes
Carousel indicators moved and social media links moved to footer only. I would like to explore changing the New Products section to a slider in a future iteration.