U Apparel

U Apparel is a sustainable athletic wear company looking to shape the future of the apparel industry.

For this project, I was tasked with creating an updated website that establishes a better brand identity for its customers, while increasing the accessibility of the site.

Technologies

XD

Photoshop

Duration

2 Weeks

Team

Frankie Kastenbaum

role

UX/UI Contractor, focused on conducting usability tests to understand a first time user's impression of the market space which was ultimately used to update the UI of the site.

Research

01 research

Competitor Analysis

I wanted to understand how other environmentally friendly clothing companies and brands showcase this element to their users on their sites. To do this I looked at the website's of Pact, People Tree, Amour, and Thread 4 Thought.

Pact

People tree

Amour vert

Threads 4 thought

Each of these sites made a point to highlight their effect on the environment at least once on their homepage, many added it more than once. (see red boxes)

who i interviewed

I was interested in discovering first-time impressions of the site so due to time constraints, I reached out to friends who fit the audience age to get a better understanding of how they would define the company's market space based on viewing the homepage.

After my initial interviews, these were some of the interesting insights I heard. Users could not understand at quick glance that this company was using sustainable materials.

the current solution

Current Solution

Not only did I gauge a users' understanding of the companies identity, but I also conducted an accessibility audit in order to call out the areas that needed to be reconsidered during this redesign. For this type of website I focused on cognitive and visual disabilities.

Cognitive disabilities

A person with cognitive disabilities has difficulties with mental tasks and abilities to learn.

Homepage

Currently, the site uses inconsistent labels to categorize the different apparel that is sold. For those with cognitive or learning disabilities or differences, this could be hard to decipher.

custom clothing

The live site uses an animation slider to showcase all the programs they have customized clothing for. However, individuals with cognitive disabilities could interact negatively to this constant motion.

visual disabilities

A person with visual disabilities has a decreased ability to see. This includes individuals who can't see well and don't have access to glasses or contact lenses.

homepage

Currently, the site uses a font size that is smaller than best practices. For those who are visually impaired this text could be hard to see and right now it is one of the only locations on the site that talks about the sustainability aspect of the brand.

below the waist

On the active state of a page, a user is notified of location through this low contrast color combination. This could be difficult for someone who has visual impairments.

02 DEFINE

what was solved for

Individuals are currently struggling to quickly grasp how this company differs from its competitors. They find they have to search to understand that this brand focuses on being environmentally friendly.

How might we help individuals understand easily and quickly that U Apparel makes its clothes from reused water bottles?

Design

03 design

how users impacted the mid-fidelity wireframes

Once I had a better understanding of how users perceived the brand and ideas of locations that needed to be improved to allow for all users to easily access this site, I turned to building out wireframes.

The focus was on creating screens that simplified the experience for all users, creating a more standardized layout for each page on the site.

homepage

I focused on refining the copy so that at a quick glance regardless of where on the page the user looked, a first-time customer would understand the effect this company has on the environment.

custom clothing

Rather than have the affiliated teams continuously scrolling around, I changed the function so that a user must click the chevron icon in order to initiate the carousel to see the next team. This way it is less distracting or limiting for cognitively impaired users.

below the waist

I updated the navigation item titles in order to make the list parallel with each other. Rather than having "Below the Waist" and "Tops," it now reads as "Below the Waist" and "Above the Waist." As well as I changed "Behind the Scenes" to "Our Story." I focused on this since consistent labels play a factor in cognitive disabilities.

what i heard

Solution

solution for users through hi-fidelity wireframes

New Homepage

I designed the new homepage with updated copy as well as I simplified the sections that were shown. This helped to create more hierarchal groupings on the site.

New Our Story Page

For this page, I decided to redesign the entire layout. The focus was to create a style that fit with the professionalism and cleanness of the site and brand. I broke the text into paragraphs rather than through the existing timeline style.

New Custom Clothing

The main focus for this page was on the hierarchy of the information, along with cleaning up the layout of the text. Specifically, I made all text left-aligned, rather than centered and I lined up the check box options on a grid system.

New Below the waist

For the Below the Waist page I focused mainly on redesigning the hover state. I moved the save feature out from the hover state and made it a constant action. I also redesigned the quick view feature so that it resembled what uses expected.

06 Reflect

Retrospective

This website redesign encouraged me to dive deeper into accessibility standards and to learn specifically about the different types of disabilities a user could have. In order to satisfy the client's needs to make the site accessible to all, I specifically had to learn the differences between cognitive and visual disabilities and the variants these could take. Unlike my other client projects, this one differed in that I did not interact with the client throughout my process. Instead, it taught me the importance of what questions and information I need at the onset in order to create a solution that satisfies the client's and users' needs and I was also proud of.

Back to Projects

Frankie

kastenbaum

Frankie

kastenbaum

U Apparel

U Apparel is a sustainable athletic wear company looking to shape the future of the apparel industry.

​

For this project, I was tasked with creating an updated website that establishes a better brand identity for its customers, while increasing the accessibility of the site.

Technologies

XD

Photoshop

​

Duration

2 Weeks

Team

Frankie Kastenbaum

role

UX/UI Contractor, focused on conducting usability tests to understand a first time user's impression of the market space which was ultimately used to update the UI of the site.

01 research

Competitor Analysis

I wanted to understand how other environmentally friendly clothing companies and brands showcase this element to their users on their sites. To do this I looked at the website's of Pact, People Tree, Amour, and Thread 4 Thought.

Pact

People tree

Amour vert

Threads 4 thought

Each of these sites made a point to highlight their effect on the environment at least once on their homepage, many added it more than once. (see red boxes)

who i interviewed

I was interested in discovering first-time impressions of the site so due to time constraints, I reached out to friends who fit the audience age to get a better understanding of how they would define the company's market space based on viewing the homepage.

After my initial interviews, these were some of the interesting insights I heard. Users could not understand at quick glance that this company was using sustainable materials.

the current solution

Not only did I gauge a users' understanding of the companies identity, but I also conducted an accessibility audit in order to call out the areas that needed to be reconsidered during this redesign. For this type of website I focused on cognitive and visual disabilities.

Cognitive disabilities

A person with cognitive disabilities has difficulties with mental tasks and abilities to learn.

Homepage

Currently, the site uses inconsistent labels to categorize the different apparel that is sold. For those with cognitive or learning disabilities or differences, this could be hard to decipher.

custom clothing

The live site uses an animation slider to showcase all the programs they have customized clothing for. However, individuals with cognitive disabilities could interact negatively to this constant motion.

visual disabilities

A person with visual disabilities has a decreased ability to see. This includes individuals who can't see well and don't have access to glasses or contact lenses.

homepage

Currently, the site uses a font size that is smaller than best practices. For those who are visually impaired this text could be hard to see and right now it is one of the only locations on the site that talks about the sustainability aspect of the brand.

below the waist

On the active state of a page, a user is notified of location through this low contrast color combination. This could be difficult for someone who has visual impairments.

02 DEFINE

what was solved for

Individuals are currently struggling to quickly grasp how this company differs from its competitors. They find they have to search to understand that this brand focuses on being environmentally friendly.

​

How might we help individuals understand easily and quickly that U Apparel makes its clothes from reused water bottles?

03 design

how users impacted the mid-fidelity wireframes

Once I had a better understanding of how users perceived the brand and ideas of locations that needed to be improved to allow for all users to easily access this site, I turned to building out wireframes.

​

The focus was on creating screens that simplified the experience for all users, creating a more standardized layout for each page on the site.

homepage

I focused on refining the copy so that at a quick glance regardless of where on the page the user looked, a first-time customer would understand the effect this company has on the environment.

custom clothing

Rather than have the affiliated teams continuously scrolling around, I changed the function so that a user must click the chevron icon in order to initiate the carousel to see the next team. This way it is less distracting or limiting for cognitively impaired users.

below the waist

what i heard

solution for users through hi-fidelity wireframes

New Homepage

I designed the new homepage with updated copy as well as I simplified the sections that were shown. This helped to create more hierarchal groupings on the site.

New Our Story Page

For this page, I decided to redesign the entire layout. The focus was to create a style that fit with the professionalism and cleanness of the site and brand. I broke the text into paragraphs rather than through the existing timeline style.

New Custom Clothing

The main focus for this page was on the hierarchy of the information, along with cleaning up the layout of the text. Specifically, I made all text left-aligned, rather than centered and I lined up the check box options on a grid system.

New Below the waist

For the Below the Waist page I focused mainly on redesigning the hover state. I moved the save feature out from the hover state and made it a constant action. I also redesigned the quick view feature so that it resembled what uses expected.

06 Reflect

Retrospective