A UI refresh aimed at bringing consistency to the products digital presence through recurring and reusable components.
Coleman
Project Overview
Coleman: Outdoor Camping Gear and Equipment has built its brand on historical precedence and innovation for over 100 years. These days, with more people than ever opting for outdoor experiences, Coleman has the opportunity to market their product to a new generation. With this potential new user base comes the challenge of keeping up with current design trends while also paying homage to the past.
This project's goal was to audit Coleman's current digital presence and implement a UI refresh.
Time Frame
4 weeks
Deliverables
Project deliverables included a style tile, high fidelity mockups of desktop, mobile, and native app. product pages, and a project presentation.
My Role
Brand audit, competitive analysis, low-fidelity wireframes, component library, style tile, high-fidelity screens
Tools
Figma, Adobe Illustrator
RESEARCH
Brand Audit
The first step was to look at the pros and cons of Coleman’s current UI to determine what needed to be changed and what could be built upon.
Pros
-
Product layout.
-
Quality images.
-
Straight forward info.
-
Simplistic UX integration.
Cons
-
Flat colors.
-
Outdated look.
-
Inconsistent elements.
-
No hierarchy.
-
Spacing issues.
Competitive Analysis
For the competitive analysis I looked at the UI of several companies (REI, Black Diamond, and LuminAID). These companies were chosen because each one had a unique competitive factor.
Key Takeaways
-
Two of the companies have opted for a more modern website design format: large image banners showcasing lifestyle shots, menu bars at the very top of page, and bold, high contrast text. The third used several of the same elements, but maintained a more traditional layout.
-
Companies utilize white space more efficiently to help call attention to certain text and imagery, especially through bright contrasting colors.
-
Companies focused heavily on lifestyle shots rather than close-ups of the product itself.
CREATING WIREFRAMES
After this initial research I began sketching and creating wireframes. One of the main focuses during this process was to figure out how I could better utilize the whitespace between product images to help them standout on the page.
Since color and contrast were also going to play a big part in the design I chose to go with simple low-fidelity wireframes so I could spend more time on the high-fidelity portion of the project.
BUILDING COMPONENTS
Component Library
After gaining a clear understanding of the site layout through wireframes, I started building a component library to help design consistent pages more efficiently.
Style Tile
Building this library culminated in the creation of a style tile which could be use by other designers to gain a clear understanding of the company's UI at a glance.
.png)
UI SHOWCASE
1
High-Fidelity
Screens
2
Product
Presentation
High-Fidelity Screens
Using the newly created component library I built out several high-fidelity screens for desktop, mobile, and native app. to present to stakeholders.
Desktop
Mobile
Native App
Obtaining Buy-In
Upon completing these screens the last step was to put together a presentation to obtain buy-in. Pitches were limited to five minutes and presented via Zoom to over twenty people.
REFLECTION
Adjusting My Design Process
This project was a great lesson in taking a step back and learning to reorganize. I had initially approached the design process with my component library coming first. I thought I could just create these components and plug them into whatever design I wanted. This proved to be troublesome because I had no frame of reference for where the components would go and what relation they may have to one another. After toiling with this for a bit I realized I needed to take a step back and do a bit more leg work by creating some wireframes to better understand proportions and content. Once I did this the component library came to together fairly quickly.