top of page
PRINCIPLES OF INTERACTION
SUMMER 21
Responsive Design
Designing and developing a responsive design utilizing principles and patterns as well as conventions for reading on a website
This was a three week project where I worked individually to solve a practical scenario using responsive design concepts in order to explore creation methods and practice the process of creating wireframes.
The Problem
I was the designer for a (fictional) business-to-business electronic components distribution company's website redesign. Analytics showed that the website's bounce rate was too high and a need for reorganization of the homepage was established. I was tasked with rethinking the layout for desktop, tablet, and mobile.
Initial Explorations + Research
I began sketching by hand to make quick and gestural design iterations. I then moved to digital to create low fidelity wireframes of each viewpoint. My goal was to simplify and organize the information in a way that makes the website more accessible and usable. I annotated my design and worked in a group of four to give and receive feedback.
Usage Goals
1
Allow the users to quickly and easily get to the information and products they need to place an order
2
Provide a space to call out featured content, articles, and social media activity
Initial Wireframes
MOBILE
DESKTOP
TABLET
Feedback + Revisions
I received valuable feedback from my peers that helped me to revise the design. I reworked the layout of each homepage and also adjusted details like buttons, carousels, and menus. By working through an iterative process, I was able to produce a more successful design with an efficient layout and usable elements.
Revised Wireframes
MOBILE
DESKTOP
TABLET
DESKTOP
TABLET
MOBILE
My Account label consolidates sign in and sign up options until the user hovers
Content area begins with company info and featured content to immediately entice users and support the primary usage goal of getting users to find and purchase products
HEADER SECTION
CONTENT AREA
FOOTER SECTION
Recent product additions are displayed next to continue grabbing the user's attention as they scroll
Search bar is prominently displayed at the top of the screen so users can quickly and easily find and use this feature
Tech support, resource posts, and social media are grouped together to emphasize customer service and company integrity
HEADER SECTION
CONTENT AREA
FOOTER SECTION
My Account options appear when user taps, rather than hovering on desktop
Recent product additions carousel displays less products at a time on slimmer screen
Company info and tech support are grouped together here to allow more space for product display
Header section stays consistent with desktop view but shrinks to accommodate the narrower screen size
Resource posts and social media blocks are stacked to allow a variety of topics to be shown without becoming too small in size
Search bar and social media links are pushed to a new row to accommodate slimmer screen size
HEADER SECTION
CONTENT AREA
FOOTER SECTION
My Account and contact info are also included in the hamburger menu with the search feature reduced to a tappable icon
Navigation is collapsed into a hamburger icon to reduce content clutter and simplify the smaller interface
Content blocks from larger screens flow into new rows and are stacked to meet the needs of the narrower screen
Amount of resource and social media posts is reduced and allows the user to scroll through
Design Takeaways
The goal for this responsive interface was to simplify and organize the content in order to allow the user to have the most seamless experience possible. The company’s goal is to ultimately have the user make a purchase on the website, so the interface is designed to make that as easy as possible. The design would use percentages rather than pixels to make the transition between devices easier.
All images are courtesy of Unsplash.
Next Project
Interactive Design
bottom of page