UX/UI design for Title Nine, a women’s athletic apparel brand.
Dec. 2017 – Jul. 2019
Title Nine
ROLE
Visual + UX/UI Designer
PROJECTS
Product Display Page Re-Design
Saved Credit Card Feature
TOOLS USED
Photoshop, InVision, Jira, Zeplin
TEAM
Visual + UX/UI Designer, Marketing Manager, Art Director
Title Nine
Dec. 2017 – Jul. 2019
UX/UI design for Title Nine, a women’s athletic apparel brand.
ROLE
Visual + UX/UI Designer
PROJECTS
Product Display Page Re-Design
Saved Credit Card Feature
TOOLS USED
Photoshop, InVision, Jira, Zeplin
TEAM
Visual + UX/UI Designer,
Marketing Manager, Art Director
eCommerce Product Page Re-design: Process
eCommerce Product Page Re-design: Process
- Integrate with new branding.
- Easy-to-find product details.
- Create a hierarchy among information by minimizing and consolidating certain sections and text.
Identifying Updates: What can be improved?
GOALS:
After discussing improvements with the Art Director and eCommerce team, the next step was to wireframe and bring the designs to life. The designs were presented to the team via InVision. I went through a few rounds of review and iterations before landing on the final design. The design below is the first version I created with the updated improvements noted.
Wireframing + Iterating: Early Stages of Design
The final design showcases the initial goals of the project: applying new branding, creating hierarchy of information, consolidating copy, and ultimately; creating a clean and functional design. With the final design reviewed and approved by the team, the last step was to upload the designs into Zeplin and send it to our third-party developers. I was also involved in the communication process (via Jira) with our third-party project manager and developers in successfully getting the newly designed page built, tested, and launched.
Final Design + Testing: Last Stretch
- Integrate with new branding.
- Easy-to-find product details.
- Create a hierarchy among information by minimizing and consolidating certain sections and text.
Identifying Updates:
What can be improved?
GOALS:
After discussing improvements with the Art Director and eCommerce team, the next step was to wireframe and bring the designs to life. The designs were presented to the team via InVision.
I went through a few rounds of review and iterations before landing on the final design. The design below is the first version I created with the updated improvements noted.
I went through a few rounds of review and iterations before landing on the final design. The design below is the first version I created with the updated improvements noted.
Wireframing + Iterating:
Early Stages of Design
Saved Credit Card Feature: Process
The final design showcases the initial goals of the project: applying new branding, creating hierarchy of information, consolidating copy, and ultimately; creating a clean and functional design. With the final design reviewed and approved by the team, the last step was to upload the designs into Zeplin and send it to our third-party developers. I was also involved in the communication process (via Jira) with our third-party project manager and developers in successfully getting the newly designed page built, tested, and launched.
Final Design + Testing:
Last Stretch
The next step involved reviewing the project needs/guidelines with the Art Director and eCommerce team, and wireframing the design. After a quick turnaround of reviews, feedback, and iterations, I created a high-fidelity design, which I sent to our third-party developers (via Zeplin) for building.
Features & Function: Multiple credit cards can be saved to a customer’s account. They can easily choose their default payment of choice, update credit card info, add and delete credit cards.
Features & Function: Multiple credit cards can be saved to a customer’s account. They can easily choose their default payment of choice, update credit card info, add and delete credit cards.
Wireframing + Design
The final step in this project was to test the features on multiple devices and breakpoints to ensure proper function. I communicated any issues I encountered to our developers (via Jira). After the issues were addressed in the testing phase, the feature was successfully launched on the site.
The final designs of the saved credit card feature for desktop and mobile are below.
The final designs of the saved credit card feature for desktop and mobile are below.
Testing + Launch
With the new implementation of tokenization - the process of substituting sensitive data (credit card numbers) with unique identification symbols (tokens) that retain all the essential information about the data without compromising its security), Title Nine has the ability to safely offer registered customers the option of saving their credit card information to their Title Nine account for easier future checkout.
Identifying the Need
GOAL: The mission for this project was to add a saved credit card feature to the eCommerce site
Saved Credit Card Feature: Process
With the new implementation of tokenization - the process of substituting sensitive data (credit card numbers) with unique identification symbols (tokens) that retain all the essential information about the data without compromising its security), Title Nine has the ability to safely offer registered customers the option of saving their credit card information to their Title Nine account for easier future checkout.
Identifying the Need
GOAL: THE MISSION FOR THIS PROJECT WAS TO ADD A SAVED CREDIT CARD FEATURE TO THE ECOMMERCE SITE
The next step involved reviewing the project needs/guidelines with the Art Director and eCommerce team, and wireframing the design. After a quick turnaround of reviews, feedback, and iterations, I created a high-fidelity design, which I sent to our third-party developers (via Zeplin) for building.
Features & Function: Multiple credit cards can be saved to a customer’s account. They can easily choose their default payment of choice, update credit card info, add and delete credit cards.
Features & Function: Multiple credit cards can be saved to a customer’s account. They can easily choose their default payment of choice, update credit card info, add and delete credit cards.
Wireframing + Design
The final step in this project was to test the features on multiple devices and breakpoints to ensure proper function. I communicated any issues I encountered to our developers (via Jira). After the issues were addressed in the testing phase, the feature was successfully launched on the site.
The final designs of the saved credit card feature for desktop and mobile are below.
The final designs of the saved credit card feature for desktop and mobile are below.
Testing + Launch
