Susan Ford UXD
Responsive Interface
A large e-commerce company looks at ways to make it Easy for Customers to find Products on their website between different Digital Interfaces.
Deliverbles
Low Fidelity Wireframes
High Fidelity Mockup
​
Role
-
Lead Interaction Designer
-
Collaborated with team UX Designers (classmates) and company stakeholders (instructor).
Programs
-
Sketch
-
Figma
Project Length
3 weeks
The Problem
Large e-commerce businesses use their websites to present their large array of products and services to clients and consumers. Because of the vast amount of products and information that needs to be presented, many of these sites become cluttered and difficult to navigate on a desktop computer.
But with the advent of digital mobile platforms that make websites readily available at our finger tips, how can these companies present their products across different digital platforms in a layout that is well-organized and easy for the users to find what they are searching for in amongst all the information contained on these sites?
In this class design project, our interaction design team was approached to analyze and format a site redesign for a business-to-business electronic components distribution company.
Recent company analytics showed that while a large amount of traffic was being driven to the site, the number of visitors leaving the site after visiting the home page was too high. The business goal was to reorganize the home page so more visitors would be converted to products sales. The following feed back from users included:
-
Home page is too cluttered.
-
It's difficult to find what they are looking for on the site.
-
The overwhelming amount of information and potential links leads to confusion and obscures clear pathways for the user.
-
There needs to be quicker ways to get directly to the products they need.
Customers use a variety of different digital platforms when accessing the website, so not only does the home page need to be more organized, accessible, and usable, the layout also needs to be easy to navigate across different sized screens and mobile devices.
The company also requested that the following information be included on the home page:
-
Header Section:
-
Logo
-
Primary Navigation (Products, Solutions, Resources, Support)
-
Account Navigation (Sign-In/Sign-Up links, Shopping Cart)
-
Toll Free Phone Number
-
Product Search.
-
-
Content Area:
-
Featured content area (for featured products/sales/events)
-
Brief Company Introduction
-
Tech Support
-
Recent Blog Posts
-
Recent Product Additions
-
Recent Twitter Posts.
-
-
Footer Section:
-
Copyright and Rights Reserved
-
Contact Information
-
Social Media links
-
Newsletter sign-up
-
Footer navigation (Products, Solutions, Resources, Support, My Account, Site Map)
-
Site Search.
-
In listening to the company's concerns, goals, and vision for the website, I concluded that the immediate problem that needed to be addressed was
How can the website be reorganized so that users can easily navigate and find what they are looking for across different digital platforms?
The Solution
In addition to the design and reorganization of the home page, I suggested incorporating responsive design to help keep the overall layout of the site stay consistent across different platforms while also adapting to be able to fit and remain organized on different sized screens and devices. This, in turn, would help users to be able to easily navigate and find what they are looking for without having elements on the site appear unorganized and/or cluttered on different devices.
Goals
The immediate goals for the redesign of the electronics company home page were:
-
Redesign the home page using responsive design so it is more organized, accessible, and usable across different digital plaforms.
-
Redesign the home page so users can find the products and information they need to place an online order.
-
In addition to helping users find products, also provide spaces on the home page to call out:
-
New Featured products, sales, and events.
-
Recent product additions.
-
Recent blog posts and articles.
-
Tech support.
-
Recent social media activity.
-
Initial Design, Iteration, and Wireframes
With pencil and paper in hand, I began to sketch out my initial designs for a desktop, tablet, and phone platform, keeping in mind the goals set forth from the company as well as for the project. My initial wireframe drawings and the rationale for my design decisions are as follows:
After sketching out the initial designs with design rationales, I met with my team mates and we discussed and critiqued the initial responsive designs between each digital platform. The following feedback was discussed and implemented into low fidelity wireframes and high fidelity mockups for the client:
-
The newsletter sign-up link was moved from the footer section to it's own content container above the footer where users could input their email address for the newsletter subscription.
-
A Site Search bar was added in the footer section.
Click on each high fidelity mockup above to see the full responsive design for each digital platform.
Next Steps
-
Conduct a one-click usability/navigation study using all three digital platforms to test the organization, navigation, and ease in finding featured products and information.
-
Using the data collected in the above study, make necessary iterations to the home page and/or continue with the design project by redesigning the rest of the pages on the site.
-
Continue usability and navigation testing throughout the redesign project and make necessary iterations per the collected data.
Take Aways and What I Learned
This project gave me a great introduction to responsive design and how important it is when designing between different digital platforms, especially for a large website like an e-commerce website that houses a lot of information. There is still quite a bit that would need to be done with this project (like usability/navigation testing and the designing of other pages on the site to make it complete), but having the opportunity to design the homepage for this website was a great learning experience for me.
​
The collaboration I had with my fellow team mates was also a very valuable experience, and taught me the importance of constructive feedback and critique during a design project. I found that each team member had valuable suggestions and feedback that helped make the design easier to use, and also helped accomplish the design team and company's goals that were set out at the beginning of the project.
