Project Type
Art Direction
Role
Art Director/Lead Designer
Skills
Figma, Wireframes, Prototyping, Branding, UX/UI, Marketing
Refreshing the EBlock Brand and Website for Growth and Innovation
How Can We Better Communicate Our Services to Existing and New Users?
EBlock is the only online dealer-to-dealer auction product that help dealers connect land and technology to move metal faster, wherever and whenever.
With the launch of a new service and the rebranding of physical auction locations across North America, we recognized the need to update our website and brand. This project aimed to align EBlock’s digital presence with its evolving business goals and provide a clear, engaging user experience for both existing and new users.
What Problem Am I Trying to Solve?
The original EBlock website faced several challenges:
The site had not been updated in a while, and much of the information no longer reflected our current services or goals.
It wasn’t designed to grow with the business, creating challenges when adding new features (e.g., updating auction dates).
The website's design was inconsistent with the visual direction of our marketing materials, such as social media assets and print collateral.
The original EBlock website featured a single landing page with navigation that scrolled users to the relevant sections.
Why Is This Problem Important?
As a company pushing the boundaries within the automotive space, it is essential that our brand and website reflect our innovative spirit and provide clarity about our services.
The updated website needed to:
Communicate our full range of services and product features in a clear and structured manner.
Create a seamless user experience to attract and retain users while aligning with our business goals.
Key goals include:
Increasing retention rates among users and auction partners.
Establishing a clear and accessible resource for product and service information.
Ensuring scalability as the business continues to expand.
The Process
Brand Updates
We focused on modernizing the brand with subtle yet impactful changes to maintain recognition, especially in the U.S. market:
Reduced the number of colors for greater consistency and to elevate the brand’s aesthetic.
Adopted a Google font family to ensure compatibility across platforms without technical limitations.
Shifted focus to product-centric visuals while incorporating more lifestyle imagery to humanize the brand.
The updated brand colors highlight green with yellow as a secondary color, using status colors for minimal flexibility.
We went with the font family Mulish as it was very similar to our original font family, Proxima Nova.
Information Architecture
Collaborating with teams across design, product, and marketing, we restructured the website’s information to ensure it was:
Intuitive and well-organized.
Inclusive of all aspects of our business operations.
Flow chart of the EBlock website architecture.
Wireframes and Design Decisions
After researching industry trends and exploring several wireframe concepts, we selected a layout based on:
Concise Navigation: Categories were reorganized, and a sticky header was implemented to allow users to access any page at any time.
Action-Oriented Design: Hero sections now guide users toward desired actions aligned with business objectives.
Clear Auction Details: Users can easily view auction dates and times by country and region, with direct links to log in and participate.
Low fidelity wireframes of the home page in web and mobile.
Components
To streamline development and enhance usability, I designed modular components for high-fidelity mocks. This approach minimized variation and established pattern recognition for users. Some examples of components designed for the new website include:
Auction Details Card: Displays auction times, dates, and locations with direct navigation to login pages.
Service Highlights: A modular section for showcasing product features and services concisely.
Fully customizable components with editable content and imagery.
Responsive design to ensure optimal experience in all platforms.
High-Fidelity Wireframes and Responsive Design
I developed 15 high-fidelity wireframes using real content to validate the effectiveness of components and imagery. Responsive designs were also created for all pages to ensure a seamless experience across devices.
Additionally, I provided developers with:
Technical Specifications: Including character limits and component guidelines.
Comprehensive Documentation: Ensuring a smooth transition from design to development.
High fidelity wireframes of the home page, auctions page, and resource center.
High fidelity wireframes of the news article, case study template, and about us page.