USER EXPERIENCE USER DESIGN JOURNAL

Q.1 AIM : Creating New Prototype

THEORY: A mobile app prototype is a preliminary

visual mock-up that looks like a real app, and demonstrates an
app's fundamental design and function but does not contain
working code. A mobile app prototype can be as basic as
sketches on paper or as high-fidelity as a clickable, digital
model that works on your phone.
PROTOTYPE OF MOBILE APPLICATION :

1. LOGIN PAGE
2 . HOME PAGE
3 . PAGE 3
4 . PAGE 4
5 . PAGE 5
6. PAGE 6
7 . PAGE 7
8. PAGE 8
9. PAGE 9
10. PAGE 10
11. PAGE 11
12.PAGE 12
13.PAGE 11

CONCLUSION: THIS PROTOTYPE OF AN MOBILE

APPLICATION SHOWS HOW THE ACTUAL APP
WOULD LOOK LIKE IT GIVES US AN GLIMPSE OF AN
APP NAMED RARE BEAUTY
Q.2 Contextual Enquiry , contextual Analysis, 15 design
principles

1 . Contextual Enquiry :

1. Define Goals:
Clearly articulate the goals of your UED experiment. Identify
specific aspects of the Nykaa app's user experience that you
want to evaluate or improve, such as navigation,
discoverability of features, or overall satisfaction.

2. User Recruitment:
Recruit a diverse group of participants who regularly use the
Nykaa app. Ensure representation across different
demographics, including age, gender, and familiarity with
beauty products. Aim for a sample size that allows you to
capture a variety of perspectives.

3. Create Scenarios:
Develop realistic scenarios that mirror common tasks users
perform within the Nykaa app. For example, scenarios could
include searching for a specific product, adding items to a
wishlist, or navigating through different sections of the app.
4. Contextual Interviews:
Conduct contextual interviews with participants while they
use the Nykaa app in their natural environment. Observe their
interactions, take note of their actions, and ask open-ended
questions about their experiences, preferences, and any
challenges they encounter.

5. Gather Qualitative Data:

Capture qualitative data through various means, such as audio
or video recordings, notes, and photos. Pay attention to users'
emotions, gestures, and verbal feedback. Document their
journey through the app and identify pain points or moments
of delight.
2. Contextual Analysis
1. User Engagement:
Observation:Evaluate how users engage with the Nykaa app
in their natural environment.
Metrics:Measure the frequency and duration of app usage,
identifying peak times and user patterns.
Insights:Understand what motivates users to interact with
the app, and identify any factors influencing their
engagement.

2. Navigation and Information Architecture:

Observation:Observe how easily users navigate through
different sections of the app.
Metrics:Track the number of clicks, navigation paths, and
time taken to complete tasks.
Insights:Identify areas of confusion, discoverability issues,
or bottlenecks in the navigation flow.

3. Search and Discovery:

Observation:Analyze how users search for products and
discover new items within the app.
Metrics: Assess the effectiveness of the search function and
track the success rate of product discovery.
Insights: Understand user preferences, common search
queries, and potential enhancements for product
recommendations.
4. Transaction Flow:
Observation: Follow users as they go through the process of
adding items to the cart, reviewing, and completing
transactions.
Metrics: Monitor the checkout process, identify drop-off
points, and measure the time taken to complete a purchase.
Insights: Uncover any usability issues, barriers to
completing transactions, and opportunities to streamline the
purchasing journey.

5.Visual Design and Aesthetics:

Observation:Evaluate users' reactions to the visual elements
of the app, including colors, fonts, and imagery.
Metrics: Collect feedback on the overall visual appeal and
clarity of design elements.
Insights: Understand the impact of visual design on user
perception and satisfaction.
 Evaluate on the basis of 15 Design Principles:

1 . Alignment:
Alignment refers to the arrangement of elements in a
design. A well-aligned design enhances readability and
visual appeal. Check if Nykaa maintains consistent
alignment across its interface, ensuring that elements
are appropriately positioned.

2 . Hierarchy:
Hierarchy involves organizing elements based on their
importance. Evaluate whether Nykaa effectively
communicates hierarchy through font size, color, or
placement to guide users through the interface and
prioritize information.

3 .Contrast:
Contrast is about creating visual interest by
emphasizing differences. Assess whether Nykaa uses
contrast in color, size, and style to highlight important
elements and create a visually engaging experience.
 4 .Repetition:
Repetition involves using consistent design elements
throughout the interface. Evaluate if Nykaa maintains a
cohesive look by repeating styles, colors, or icons,
providing a unified and recognizable design.

5 .Proximity:
Proximity deals with grouping related elements
together. Check if Nykaa effectively uses proximity to
organize information, making it clear which elements
are related and enhancing the overall user experience.

6 . Balance:
Balance ensures that visual elements are distributed
harmoniously. Evaluate if Nykaa achieves a sense of
balance in its design, preventing one side of the
interface from feeling overloaded compared to the
other.

7 . Color:
Color is a powerful tool for conveying emotions and
guiding user attention. Assess how Nykaa uses color to
create a visually appealing and cohesive brand identity
while considering accessibility and readability.
8. Space:
Space, or white space, is crucial for preventing visual
clutter and enhancing legibility. Evaluate if Nykaa
effectively uses space to allow elements to breathe and
create a clean and organized layout.

9. Emphasis:
Emphasis involves highlighting key elements to guide
user focus. Check if Nykaa effectively uses emphasis
through color, size, or contrast to draw attention to
important calls-to-action or information.

10 .Proportion:
Proportion ensures that elements have the right size in
relation to each other. Evaluate whether Nykaa
maintains proportional relationships between different
design elements for a visually balanced interface.

11. Rhythm:
Rhythm creates a sense of movement and consistency.
Assess if Nykaa establishes a rhythmic flow in its
design, guiding users through the interface in a logical
and intuitive manner.
12. Pattern:
Pattern involves using repetitive elements to create
visual interest. Evaluate if Nykaa incorporates patterns
in its design, contributing to a cohesive and
aesthetically pleasing user experience.

13. Movement:
Movement guides users through the interface and
directs attention. Assess if Nykaa effectively uses
movement, such as animations or transitions, to
enhance user engagement without causing distraction.

14 .Variety:
Variety ensures that the design remains interesting and
engaging. Evaluate if Nykaa incorporates a variety of
elements, such as different font styles or image types, to
maintain user interest.

15. Unity:
Unity involves creating a cohesive and consistent
design. Assess whether Nykaa achieves unity across its
interface, presenting a seamless and integrated user
experience.
16 .Lines:
Lines contribute to the structure and organization of a
design. Evaluate if Nykaa uses lines effectively to guide
the user's eye, create visual separation, or convey a
sense of movement.

17. Shapes:
Shapes play a role in creating visual interest and
recognition. Check if Nykaa uses shapes effectively in
its design, whether in buttons, icons, or overall layout,
to enhance the user experience.

3. AIM : UX Design for Website

Aim: Description of Website
Site Map:

1. Home:
- Welcome message and brand introduction
- Featured products and promotions

2. Shop:
- Categories for makeup, skincare, and accessories
- Product listings with images, names, and prices
- Filter and sorting options

3. Collections:
- Themed product collections
- Visual displays of curated sets

4. About Us:
- Rare Beauty's story, mission, and values
- Founder's message and team information
5. Blog:
- Makeup tutorials, beauty tips, and product reviews
- Engaging multimedia content

6. Contact Us:
- Customer support information
- Contact form and social media links

7. Account:
- User login and registration
- Order history and tracking
- Personalized recommendations

Wireframes:

1. Homepage:
- Hero section with a featured product
- Navigation bar for quick access to Shop,
Collections, and more
- Call-to-action buttons for promotions
2. Product Listing:
- Grid layout with product images and brief
descriptions
- Filters for category, price range, and product type
- Sorting options for relevance, popularity, and price

3. Product Details:
- Larger product image, detailed description, and
pricing
- Add to cart button and related product suggestions
- Customer reviews and ratings

4. Checkout:
- Cart summary, itemized list, and total
- Shipping information and payment options
- Order confirmation and tracking details

5. Blog Post:
- Featured image and title
- Author details, publication date, and category
- Read more, share, and comment options
Screens:

1. Home Screen:
- Rotating banners featuring new collections and
promotions
- Quick access to featured products

2. Product Detail Screen:

- High-resolution images with zoom functionality
- Detailed product information and specifications
- Add to cart and view related products

3. Account Dashboard:
- Profile information, order history, and saved items
- Personalized recommendations and promotions

Screen Transitions:

1. Home to Product Listing:

- Clicking on a featured product transitions to the
relevant category in the Shop section.
2. Product Listing to Product Detail:
- Clicking on a product in the listing takes the user to
the detailed product page.

3. Adding Item to Cart:

- Smooth animation or transition to confirm the
addition of an item to the shopping cart.

Setting Properties:

1. User Preferences:
- Allow users to set preferences for notifications,
language, and currency.

2. Accessibility Settings:
- Provide options for adjusting font size, color
contrast, and other accessibility features.

Ordering Screen:

1. Checkout Process:
 - Step-by-step ordering process with clear indicators
of progress.

2. Payment Options:
- Multiple payment methods, including credit cards,
PayPal, and other secure options.

Adding Actions and Triggers:

1. Add to Cart:
- Triggered by clicking the "Add to Cart" button on
product detail pages.

2. Login/Logout:
- Actions initiated by users to log in or log out of their
accounts.

Header and Footer:

1. Header:
- Logo and site navigation
- Search bar and shopping cart icon
 - Account options and language preferences

2. Footer:
- Quick links to important pages (About Us, Blog,
Contact)
- Social media links and sharing options
- Privacy policy, terms of service, and copyright
information
Rare Beauty Website Description (Hypothetical):

Homepage:
The Rare Beauty homepage likely features a clean and
visually appealing design. It may include a prominent
hero section showcasing new or featured products,
along with captivating images or videos that reflect the
brand's aesthetic. The navigation bar at the top typically
includes links to key sections like "Shop,"
"Collections," "About Us," "Blog," and "Contact."

Shop Section:
The "Shop" section likely provides users with a user-
friendly interface for browsing and purchasing Rare
Beauty products. Products may be categorized by type
(makeup, skincare, accessories) and further
subcategorized for easy navigation. Each product listing
likely includes high-quality images, detailed
descriptions, and prices. Users may have the option to
filter and sort products based on various criteria.
Collections:
A dedicated "Collections" section may showcase
themed product sets or curated selections. This area
allows users to explore products grouped together based
on specific themes, seasons, or collaborations. It adds
an element of storytelling to the brand and encourages
users to discover complementary products.

About Us:
The "About Us" page likely shares the brand's story,
mission, and values. It may include information about
the founder, the inspiration behind Rare Beauty, and the
brand's commitment to inclusivity and empowerment.
This section aims to connect with users on a more
personal level and build brand loyalty.

Account:
The "Account" section allows users to create accounts,
log in, and manage their profiles. It may include
features such as order history, tracking information, and
personalized product recommendations based on user
preferences and purchase history.

Design Aesthetics:
Given that Rare Beauty is associated with Selena
Gomez and emphasizes inclusivity and natural beauty,
the website's design is likely to be clean, modern, and
inclusive. Expect a well-thought-out color scheme,
high-quality visuals, and an overall aesthetic that aligns
with the brand's ethos.

4. AIM: UX EVALUTION
+