Back

Back

Back

[Case 02]

Oh Shirt Yeah: Designing a responsive website

Responsive Web Design

Revamping the order flow of a custom apparel business.

Creating clarity for customers and ease of use for the business.

[Project Overview]

This project hit close to home. As my former employee of 7 years, I was well aware of the challenges of creating an ordering system that would reduce friction for customers. With all the variables of custom apparel: style, brand, color, size, there is a lot of data to parse through.

In doing so, I had to remove my personal biases given my history with the business, and go straight to customers of Oh Shirt Yeah, as well as of other apparel companies to gain insights.

The fact of the matter is, shirts can be a messy business. My goal was to help clean that up.

[Type]

Responsive Web Design

[My Role]

Product Designer

[Platforms]

Web Design

[Timeline]

6 Weeks

View Final Prototype

View Final Prototype

View Final Prototype

[Process]

[01] User Research

Went directly to the source, speaking with OSY customers and stakeholders to understand the problem.

Identified the most common pain points and where an improved design could pick up the slack for new customers.

Compared web pages of popular apparel companies to find what works and what could be re-worked.

[01] User Research

Went directly to the source, speaking with OSY customers and stakeholders to understand the problem.

Identified the most common pain points and where an improved design could pick up the slack for new customers.

Compared web pages of popular apparel companies to find what works and what could be re-worked.

[01] User Research

Went directly to the source, speaking with OSY customers and stakeholders to understand the problem.

Identified the most common pain points and where an improved design could pick up the slack for new customers.

Compared web pages of popular apparel companies to find what works and what could be re-worked.

[02] Insights

Users biggest issue was not being able to tell where they were at in the ordering process.

Users highlighted the need for consistent updates and a portal where they could check up on their order.

Stakeholders pointed out that they currently rely on several different tools to organize orders, so an organizational system would be helpful.

[02] Insights

Users biggest issue was not being able to tell where they were at in the ordering process.

Users highlighted the need for consistent updates and a portal where they could check up on their order.

Stakeholders pointed out that they currently rely on several different tools to organize orders, so an organizational system would be helpful.

[02] Insights

Users biggest issue was not being able to tell where they were at in the ordering process.

Users highlighted the need for consistent updates and a portal where they could check up on their order.

Stakeholders pointed out that they currently rely on several different tools to organize orders, so an organizational system would be helpful.

[03 Design Solution]

Focused on one main flow: The ordering flow from login til submission

Ideated upon multiple different order flow layouts with low-fidelity wireframes to find the most effective.

Re-designed the home page to push users straight to the ordering portal.

[03 Design Solution]

Focused on one main flow: The ordering flow from login til submission

Ideated upon multiple different order flow layouts with low-fidelity wireframes to find the most effective.

Re-designed the home page to push users straight to the ordering portal.

[03 Design Solution]

Focused on one main flow: The ordering flow from login til submission

Ideated upon multiple different order flow layouts with low-fidelity wireframes to find the most effective.

Re-designed the home page to push users straight to the ordering portal.

[04] Testing & Iteration

Landed on an accordion style order flow where each section collapses as you fill it out.

Gathered feedback through remote testing and found that users were a bit overwhelmed.

Updated the flow design to show only what needs to be seen in the moment.

[04] Testing & Iteration

Landed on an accordion style order flow where each section collapses as you fill it out.

Gathered feedback through remote testing and found that users were a bit overwhelmed.

Updated the flow design to show only what needs to be seen in the moment.

[04] Testing & Iteration

Landed on an accordion style order flow where each section collapses as you fill it out.

Gathered feedback through remote testing and found that users were a bit overwhelmed.

Updated the flow design to show only what needs to be seen in the moment.

[Persona]

The Casual Customizer

Marketing Manager

This persona is an individual who needs to place a small custom apparel order, whether it be for a family reunion, work event, bachelor party, or a kids sports team. They generally don’t know much about custom apparel, design, or ordering. This persona requires a bit more hand holding. They usually have a vision in mind of what they’d like, but need the business to help them realize that vision.

[Goal]

Turn their idea into a reality

Complete their task as soon as possible

Gain an understanding of how to order in the future

[Frustrations]

Confusing processes

Lack of updates

They may be technologically challenged

[Affinity Mapping]

[Affinity Mapping]

[Affinity Mapping]

[User Flow]

[User Flow]

[User Flow]

[Design System]

[Design System]

[Design System]

[Low-Fidelity Wireframes]

[Outcomes]

Satisfied business owner with development of the site in progress
User testing participants reported feeling more confident navigating the site.
The final design was not only more usable, but more representative of the company itself.

[Final Mockups]

View Final Prototype

View Final Prototype

View Final Prototype

[Key Learnings]

If it's broken, start over

There wasn't much to go off of initially, so it worked best to start from scratch.

If it's broken, start over

There wasn't much to go off of initially, so it worked best to start from scratch.

If it's broken, start over

There wasn't much to go off of initially, so it worked best to start from scratch.

Iterate, iterate, iterate

Chances are, I didn't get it right the first time. User testing and iterations made sure I was aware of that.

Iterate, iterate, iterate

Chances are, I didn't get it right the first time. User testing and iterations made sure I was aware of that.

Iterate, iterate, iterate

Chances are, I didn't get it right the first time. User testing and iterations made sure I was aware of that.

Less is more, especially for ordering

Users are already uncomfortable ordering apparel, let's make the ordering part as simple as possible.

Less is more, especially for ordering

Users are already uncomfortable ordering apparel, let's make the ordering part as simple as possible.

Less is more, especially for ordering

Users are already uncomfortable ordering apparel, let's make the ordering part as simple as possible.

[What's Next]

As we progress with building a new Oh Shirt Yeah site, my plan would be to make the home page a little bit more aesthetically pleasing, in order to catch the eye and draw users to the order flow.

Select this text to see the highlight effect