Grizzled Bear
Website Redesign & Brand Design
Role
UX Researcher | UX Designer | Brand Designer | Product Photo Editor
Timeline
13 Weeks (100 hours)
Team
Solo
Tools
Shopify | Figma | FigJam | Adobe Photoshop | Adobe Illustator | Google Drive | Statista | Google Analytics | CSS Code
Project
Overview
Grizzled Bear is a local Calgary-based clothing company that specializes in selling rugged-casual outdoor apparel designed specifically for men in tall sizes. Customers can purchase products through various local markets, when available, or online through the Grizzled Bear Shopify store. I was tasked to redesign the Shopify store and to create branding that aligned with the client’s vision, make the website intuitive for the intended target audience, and fix issues with usability heuristics and accessibility standards.
Client Goal
Disclaimer*
The live site is still the previous version. The client intends to relaunch the redesigned version once new product photos are completed.
The client wanted to increase product sales by optimizing the website to bridge the gap during slow periods when not actively selling at the local markets. They also wanted a more specific brand identity that would help tailor the website towards their target audience.
The
Problem
How might I redesign the website’s usability and visual elements to create an intuitive, accessible, and brand-aligned experience for the intended target audience?
My
Goal
Create specific branding to set the tone of Grizzled Bear and tailor towards its target audience by having set colours and typography that are memorable to the brand.
Redesign the website so it follows usability heuristics and standards, is accessible, and is responsive for all device types to optimize online sales.
Design
Process
Due to the nature of this project, I decided that Design Thinking would be the best framework to follow. I wanted to empathize with the target audience to fully understand their needs and expectations for a men’s clothing website. This was essential for me as I didn't know how men think or feel when navigating a website and its branding.
Process Overview
Empathize
-
Website Audit and Heuristic Analysis
-
Quantitative Data: (Statista Surveys and Google + Shopify Analytics)
-
Qualitative Data: (User Interviews and Usability Testing)
Define
-
Affinity Map
-
User Flow
-
Competitive Analysis
Ideate
-
Moodboard
-
Lo-fidelity Wireframes
-
Branding (colour + font)
Prototype
-
Med-fidelity/ Hi-fidelity Wireframes
-
Design Feedback
Test
-
Usability Testing
To begin, I conducted a website audit and heuristic evaluation to identify areas where usability and best UX practices were lacking. I then completed both quantitative and qualitative research to hit every avenue of information I could. I wanted to do as much research as I could before starting the redesign.
Website Audit
-
Minimal readability.
-
Lack of text hierarchy and alignment.
-
Poor colour contrast.
-
Lack of specific branding.
-
Long page loading times.
-
Women in pictures of a mens clothing brand.
-
Logo is not displayed.
-
Images take up half the page.
-
Inconsistent text layouts and alignments.
-
Product images are all different sizes.
Heuristic Evaluation
Using the Nielsen and Molich’s Heuristics guide, I determined aesthetic and minimalist design, and consistency and standards were in need of the most help.
Quantitative Research
I was originally going to start with sending out a survey to my target audience, however, I found statistics from Statista that ended up being very valuable and full of information that already answered questions I would have asked. The statistics and data I found helped me save time and gave me a lot more data to work with.
Key insights I found from Statista were about what elements are important to consumers when purchasing products online.
01
Price
02
Reviews
03
Imagery
04
Transparency
I then looked at Google and Shopify analytics to see where users landed the most and where they would leave. I learned that most abandonment happened on the homepage.
72% Homepage Abandonment Rate
Qualitative Research
Additionally, I conducted 3 usability tests, all with men, on the current website. I was able to watch how they interacted with current features to see how they navigated through different tasks and to see what I could improve and what works well currently. I also asked specific questions about the homepage to find out what the disconnect was after reviewing the analytics above. The target audience for Grizzled bear is represented in the persona below.
67% thought this website was for both men and women, due to the imagery on the homepage carousel.
100% found the bear image hard to read.
100% said the items under the accessories tab didn't make sense.
I also conducted 5 user interviews where I asked questions more specifically about branding. I asked what colours the words "men, outdoors, rugged, and grit" made them think of. This gave me insight into what colours users would expect to see when entering the website.
40% mentioned beige/tan.
80% mentioned green.
100% mentioned brown.
Empathize
Define
Taking these results from the user interviews and tests, I created an affinity map to validate my findings with the heuristic evaluation. I then mapped out a full user flow and used all of this information to create a user persona. I did a competitive analysis and compared 8 different brands that have similarities to Grizzled Bear. I identified common visual elements between the website designs so I could follow suit for consistency.
The affinity map validated my previous findings with the heuristic evaluation. Aesthetics and minimalist design, and consistency and standards was what I needed to focus on.
Affinity Map
*The previous theme was performing on an outdated version of Shopify. Issues with error prevention and flexibility, and efficiency of use were automatically fixed with the updated version.
User Flow
I made a user flow chart so I could see how a user navigates the website from the homepage to checkout. This showed me there are a lot of navigation options for the same category selections. This can be simplified to be less overwhelming to users, and gives me an opportunity to guide users directly to an item.
At this point, I felt like I understood my target audience and was able to identify who they were and what their needs are. I was also able to make a scenario, as a user journey, to determine how users felt throughout each step on the current website. This allowed me to fully see through the eyes of the user and what pain points I needed to address.
User Persona
Ideate
I created a moodboard based on the clients vision. I then created lo-fi wireframes for the design layout that helped me figure out how to simplify the user flow. I tried out different variations of branding to give myself options to gather feedback on. Although I felt that I understood the target user (men) at this point, I still didn't know which colours and typography would be most effective.
Moodboard
*After conducting user interviews, it was determined that a tan/beige colour was mentioned more often than blues.*
Lo-fi Wireframes
My lo-fi sketches were designed to have each page be as simple as possible, while also having a clear user flow to specific products that men would be looking for. My goal was to redesign the previous sections that had important information on them by making it easily digestible, but also still noticeable.
Prototype
Using Figma, I created med-fidelity wireframes to gather feedback and put together hi-fi mockups for the client's vision. I then took the feedback and created the design on Shopify with the help of CSS code.
Wireframes
Based on the research above, I really wanted to think in the way the target audience would. I needed the website to have a very minimalist design as men typically do not browse for long.
By removing the original carousel imagery that featured women, it removes the uncertainty of who the products are tailored for. Replacing the image of the outdoors highlights the intended purpose and feel of Grizzled Bear.
Having products shown right on the homepage allows quick access without needing to search around.
I wanted to highlight the key information about Grizzled Bear that was previously lost in the bear picture. Keeping it up near the top of the page was crucial so it was not being missed when scrolling.
For the pages that provided more information or context, I wanted to make sure users could easily scan and read through the content. This meant using consistent design choices on each page. The design elements include left alignment, bolding important words, increasing text size for readability, and adding in intended white space.
I combined the information from the collaboration page to the about us page to eliminate unnecessary added pages.
Feedback
After showing the client and peers the design, it was mentioned that the homepage "felt too dark" due to the dark overlay on the imagery. It was also noted that the dark images used in each section were designed too similar, and was lacking uniqueness and character. The client also requested to add in a map feature, however due to Shopify limitations, I added in pictures of the shop-on-wheels, and a written location section instead.
Before
Imagery is too dark.
Logo colour is unbalanced.
The word merchandise doesn't work.
After
Image lightens up the page.
The word ACCENTS in the navigation bar replaces the word Merchandise.
Shopify limitations required me to change the layout of the navigation bar.
Shopify limitations did not allow the use of the custom Moonshiner font. Oswald was used instead.
Before
Imagery is too dark.
Wanted to be able to find more information.
After
Lighter imagery using Grizzled Bear products.
Featured content is more noticeable.
CTA buttons so users can find more information.
Before
Imagery is too dark.
Repetitive design.
Text is being ignored.
After
Lighter imagery using a Grizzled Bear image.
Added information about the brand for more context.
CTA button to the contact us page instead of about us. (About us was added to the featured section).
The client noted the colours in the logo didn't "look right" with the green background. I took the logo into Adobe Illustrator and changed it into one solid colour with a transparent background, creating balance and unity.
Before
After
Solution
Redesigned Grizzled Bear website with specific branding, following design principles.
Aesthetic and minimalist design
-
Colour Usage
-
Typography
-
Hero Imagery
-
Hierarchy
-
Logo Usage
Redesigned the FAQ page with a drop down accordion section.
Consistency and Standards
-
Digestible layout
-
Options to select a specific question
-
Consistent with other websites
Combined related information to remove extra, unnecessary pages.
Aesthetic and minimalist design
-
About Us and Collaboration
-
Shipping and Returns
Font is at a minimum of 24px to be readable for all. Text sections are spaced out and important/ key information is in bold.
Aesthetic and minimalist design
-
Accessibility considerations
-
Easier for users to scan information
Test
4 usability tests, all with men, were conducted with the final Shopify design. I wanted to find out what worked well with the design, if it met mine and the clients goals, and if there were any outstanding issues.
Usability Test
100% think the brand feels like an outdoor clothing company, due to the outdoor pictures, green and brown colours, and the bear logo.
100% think the website feels more professional and secure.
75% think the brand is men-only because they only see men in pictures on the homepage.
75% like the inclusion of the real shop photos, making the online store feel real.
Future Improvements
*Due to Shopify access limitations set by the client, I was unable to change specific elements on the Shopify theme that would effect the previous live version of the website.*
This includes:
-
Large-sized imagery portrayed on the accessories page.
-
Lack of accessibility, due to readability and contrast, on the checkout page.
-
Removal of page, or imagery change on the collections page.
-
Hats heading being changed to headwear.
-
Map feature on the homepages - need an API.
Additional improvements include faster image loading times. I shrunk image sizes down considerably for all hero and hat images. The client plans to do a new product photoshoot in the future which then can be edited to adjust the image sizes for faster load times.
Reflection
As this was my first solo website redesign, it was a huge learning opportunity for me. I learned how to work with my own client, properly manage my time, troubleshoot unexpected roadblocks, navigate the Shopify platform, read analytics, and how to take feedback and implement it effectively.
Challenges
Designing wireframes on Figma that can eventually be made on Shopify.
I spent a lot of time getting to know as much about the Shopify theme I was going to design on as I could. This was to make sure I could give the client an accurate representation of what the intended design would look like. Unfortunately, there were still elements that I couldn't fully match. (Alignment issues on About Us, navigation bar orientation, button sizing, etc.)
Custom font not actively working on Shopify.
I used CSS code to add in custom font to the theme.css file on Shopify. On my end, the font was working perfectly fine. When doing live user tests, it was noted that no one else could see the font. Upon furth research, I determined that Shopify doesn't always allow out-of-house fonts to be implemented.
How to work with client limitations.
There were other pages, sections, and specific elements that I wanted to change to improve accessibility and overall design consistency. The client requested I only redesign pages that wont actively effect the previous live site. This became a roadblock as there are still pages that are not consistent with my new design since I wasn't allowed to change them.
Key Takeaways
How to use Shopify.
Having spent hours on Shopify, I can confidently say I can add this web builder to my wheelhouse!
Project scope and deadlines.
With only 13 weeks to complete this redesign while attending full-time classes, it presented a valuable opportunity to develop effective time management skills. I was able to keep a strict schedule while maintaining high-quality work for the client. Efficient time management is key for my success.
How vital feedback is.
Consistently asking for and receiving feedback from user testing, peers, and the client allowed me to work intuitively by adjusting my designs throughout the process. The Design Thinking framework helped guide me through this process and kept my choices and considerations intuitive and user-centered.