User Research and Analysis
User Stories and User Flow
In emphasizing with our users in the TryOn project, we have focused on three high priorities based on the diverse needs of our users who are online shoppers. To incorporate those needs, we created an easy to learn user flow that simplify the tasks users will have to complete.
Inspiration and Sketches
Inspo from Dribbble
Finding inspiration help us to stay on top of design and extended reality industry trends while brainstorming innovative ideas that will improve the overall functionality and design aesthetics of our app.
Wireframes and Prototypes
Low-Fidelity Wireframes
In conceptualizing the wireframes and prototypes for the TryOn project, we have focused on assumed functionality based on the diverse needs of our clientele in creative industries. Here's an overview of the basic structure and layout decisions:
Onboarding
Loading Screen
Functionality: Temporary indicator to inform user that the app is loading or initializing.
Onboarding Scroll-through
Functionality: Improves user experience and drives business growth with in-app guidance on how to use the app.
Popular Stores
Functionality: Analyzes and ranks data from current users to create a generated selection of most visited stores for easy view and returning users.
Categories
Functionality: Groups related things together for efficient searching and selecting of apparel.
Search Bar
Functionality: Allows users to quickly find items not immediately visible on the current screen.
Popular Items
Functionality: Analyzes and ranks data from current users to create a generated selection of most viewed items for the selected store or category for easy viewing.
Favorites
Functionality: Gathers users favorited items of any selected store for easy selection, revisiting, and purchasing of apparel.
Pull Down to AR View
Functionality: Easy interaction to pull down when users require access to the augmented reality view of selected apparel.
Camera View
Functionality: To view user with applied selected apparel in augmented reality.
Recommendation banner
Functionality: To suggest recommended fit and styles based on measurement data collected by camera view.
High-Fidelity Prototype
These wireframes and prototypes, centered around discovered functionality, aim to create an intuitive and user-friendly app experience. The design decisions prioritize the diverse needs of TryOn potential users, addressing the identified user problem by providing simple and easy to use interactions for our user to virtually try on apparel.
Visual Design Concepts
Style Tile and Components
Color Palette
- Black (#000000)
- Rationale: Black exudes sophistication and timelessness. This color choice signifies trust, stability, and professionalism, establishing confidence in users regarding the financial services provided by Creatives Accountant.
- Forest Green (#095121)
- Rationale: Forest green represents growth and balance. By incorporating this color (#095121), the design conveys Creatives Accountant's commitment to supporting the financial growth of its clients, fostering a sense of stability and prosperity.
- Beige (#CFC2A1)
- Rationale: Beige is a warm and approachable color. This color choice adds a touch of friendliness and approachability to the palette, creating a welcoming atmosphere for users interacting with Creatives Accountant.
- Light Gray (#E5E5E5)
- Rationale: Light gray serves as a neutral background, contributing to a clean and modern aesthetic. This color ensures optimal readability and a visually cohesive design across the website.
- White (#FFFFFF)
- Rationale: White symbolizes clarity and simplicity. It is used strategically to enhance readability, create a clean backdrop for content, and maintain an overall professional and polished appearance.
Typography
- Poppins Bold 64 pt
- Rationale: The use of Poppins Bold at 64 pt is strategic for impactful headings and key statements, such as the tagline in the hero section on the homepage. This font choice communicates a sense of authority and establishes a strong visual hierarchy, immediately capturing the attention of users. The bold weight at this size ensures readability even from a distance, making it ideal for prominent headers.
- Poppins Regular 24 pt
- Rationale: Poppins Regular at 24 pt is employed for subheadings, services overviews, and other critical pieces of information. The regular weight strikes a balance between professionalism and approachability, contributing to a clean and modern aesthetic. This size ensures legibility, making it suitable for conveying detailed but concise information without overwhelming the user.
- Poppins Regular 16 pt
- Rationale: Poppins Regular at 24 pt is employed for subheadings, services overviews, and other critical pieces of information. The regular weight strikes a balance between professionalism and approachability, contributing to a clean and modern aesthetic. This size ensures legibility, making it suitable for conveying detailed but concise information without overwhelming the user.
Iconography and Imagery
- Icons: Bold Line Icons with Rounded Corners
- Rationale: The choice of bold line icons with rounded corners contributes to a modern and sleek visual language. These icons are designed to be clear, easily recognizable, and align with the overall design's emphasis on simplicity and professionalism. The rounded corners add a touch of softness, maintaining a friendly and approachable tone, which is crucial in addressing financial topics that can be perceived as complex.
- Anticipated Impact: Users encountering these icons will experience visual continuity and coherence throughout the website. The bold lines ensure visibility and clarity, while the rounded corners create a harmonious and balanced appearance, reinforcing the project's commitment to a user-friendly and accessible design.
- Images: Clean Balanced Business Stock Images
- Rationale: The use of clean and balanced business stock images complements the professionalism of the brand. These images showcase diverse business settings, reflecting stability, collaboration, and financial success. By selecting images that evoke a sense of order and harmony, the design aligns with Creatives Accountant's commitment to providing reliable and organized financial services.
- Anticipated Impact: Users encountering these images will subconsciously associate the depicted scenarios with the values of stability and success. The clean and balanced compositions reinforce the idea that Creatives Accountant is a trusted partner in maintaining financial order and promoting prosperity for its clients.
- Contributions to Design Consistency:
- The cohesive use of bold line icons and clean balanced business stock images throughout the website contributes to a consistent and unified visual identity. This consistency ensures that users have a seamless and visually engaging experience across different sections of the Creatives Accountant platform.
- Reinforcement of Brand Values:
- The careful selection of icons and images serves to reinforce key brand values, such as trust, clarity, and professionalism. Users encountering these visual elements will perceive Creatives Accountant as an approachable yet highly reliable source for their financial needs.
Design Iterations
Hi-fi Wireframes and Iterations
Throughout the iterative design process for the TryOn project, several key changes were implemented based on valuable user feedback and a commitment to refining the user experience. Here are the noteworthy iterations made during the design journey:
Navigation Refinement:
Change: Initially, the navigation structure underwent revisions to streamline user pathways.
Home Screen App How-to:
Change: An in-app guidance link to first time or recurring users added to the top right corner of the home screen.
Color Contrast Optimization:
Change: Fine-tuning of color contrast across the application.
Interactive Element Iterations:
Change: Iterations on interactive elements, including search field and AR view.
Visual Hierarchy Clarification:
Change: Adjustments to visual hierarchy, particularly in service descriptions and feature sections.
Accessibility
Accessibility Considerations (Basic)
In the development of the TryOn project, ensuring a generally accessible design has been a fundamental priority. The following outlines the basic steps taken to guarantee accessibility for all users:
Accessibility Guidelines Adherence:
Action: Strict adherence to established accessibility guidelines, including WCAG (Web Content Accessibility Guidelines).
Color Contrast Ratios:
Action: Regular assessment and adjustments to color contrast ratios throughout the design.
Accessible Search and Inputs:
Action: Designing search bar with clear labels, error messages, and ensuring accessible input fields.
Readable Font Choices and Sizes:
Action: Selection of readable fonts and careful adjustment of font sizes for optimal readability.
Final Design Showcase
Conclusion
Project Recap
The UX design for TryOn app project ensures a user-friendly and accessible experience. Notable achievements include a visually unified design, strong brand trust, and a user-centric approach. Clear communication, engaging UI design, and functionality consistency anticipate increased user satisfaction and broader accessibility.
Next Steps (Planned)
Next steps for the TryOn app involve user testing to refine UX, followed by a phased rollout. Future enhancements may include personalized settings, expanded available stores and product access, and AI-driven insights. Continuous user feedback will drive iterative improvements for an evolving, user-focused retail platform.
Acknowledgments (Future)
A heartfelt thank you to the dedicated team and stakeholders involved in the TryOn project. Your commitment and contributions are invaluable, shaping a user-friendly AR retail platform. Together, we anticipate continued success and positive impact. Gratitude for your ongoing support and collaboration.
