Eden Bottle Gardens
Eden Bottle Gardens
Eden Bottle Gardens
Creating a mobile Shopping App with specifications.
Creating a mobile Shopping App with specifications.
Creating a mobile Shopping App with specifications.
BACKGROUND: The design student project was to develop a modern shopping app that allows for easy product discovery and user-friendly navigation. Users can rate products and share reviews to help others make informed decisions while enhancing their shopping experience on mobile devices.
BACKGROUND: The design student project was to develop a modern shopping app that allows for easy product discovery and user-friendly navigation. Users can rate products and share reviews to help others make informed decisions while enhancing their shopping experience on mobile devices.
BACKGROUND: The design student project was to develop a modern shopping app that allows for easy product discovery and user-friendly navigation. Users can rate products and share reviews to help others make informed decisions while enhancing their shopping experience on mobile devices.
PROBLEM: Making a mobile Shopping app with a consistent design. This will be based on brand guidelines and predefinied user stories.
PROBLEM: Making a mobile Shopping app with a consistent design. This will be based on brand guidelines and predefinied user stories.
PROBLEM: Making a mobile Shopping app with a consistent design. This will be based on brand guidelines and predefinied user stories.
SOLUTION: Establishing brand guidelines at the outset and applying an user-centered approach to meet the needs of the user.
SOLUTION: Establishing brand guidelines at the outset and applying an user-centered approach to meet user needs.
SOLUTION: Establishing brand guidelines at the outset and applying an user-centered approach to meet the needs of the user.
Brand Guidelines
Brand Guidelines
Defining Brand Guidelines for a consistent design.
Defining Brand Guidelines for a consistent design.
Defining Brand Guidelines for a consistent design.
Quality, Safety, Conservation
E D E N
BOTTLE GARDENS
E D E N
BOTTLE GARDENS
#7EBA61
#393939
#BA61B8
#FFFFFF
Raleway,
RALEWAY
VALUES: Eden Bottle Garden's values are centred on the topics of quality, safety and conservation.
VALUES: Eden Bottle Garden's values are centred on the topics of quality, safety and conservation.
VALUES: Eden Bottle Garden's values are centred on the topics of quality, safety and conservation.
LOGO: A simple name logo in capital letters is intended to create clarity. The colours green and black were chosen as font colour.
LOGO: A simple name logo in capital letters is intended to create clarity. The colours green and black were chosen as font colour.
LOGO: A simple name logo in capital letters is intended to create clarity. The colours green and black were chosen as font colour.
COLOR PALETTE: Fresh colours reflect the natural character and elegance of the product line. The primary colours are green and black, while purple and white serve as accent colours.
COLOR PALETTE: Fresh colours reflect the natural character and elegance of the product line. The primary colours are green and black, while purple and white serve as accent colours.
COLOR PALETTE: Fresh colours reflect the natural character and elegance of the product line. The primary colours are green and black, while purple and white serve as accent colours.
TYPOGRAPHY: The font Raleway has a modern feel, with a touch of elegance, making it a perfect choice for the corporate character.
TYPOGRAPHY: The font Raleway has a modern feel, with a touch of elegance, making it a perfect choice for the corporate character.
TYPOGRAPHY: The font Raleway has a modern feel, with a touch of elegance, making it a perfect choice for the corporate character.
IMAGERY: The high-quality product images display the items on a white background.
IMAGERY: The high-quality product images display the items on a white background.
IMAGERY: The high-quality product images display the items on a white background.
WRITING STYLE: The writing style in Eden Bottle Gardens is easy to understand for the heterogeneous target group. There are no difficult sentences or complicated terms.
WRITING STYLE: The writing style in Eden Bottle Gardens is easy to understand for the heterogeneous target group. There are no difficult sentences or complicated terms.
WRITING STYLE: The writing style in Eden Bottle Gardens is easy to understand for the heterogeneous target group. There are no difficult sentences or complicated terms.
User Stories
User Stories
Designing screens and navigation based on predefined user stories.
Designing screens and navigation based on predefined user stories.
1
“As a new costumer, I want to access the inventory without registering, so that
I can make sure this store has what I’m looking for before creating an account.“
SUCCESS CRITERIA: Entering Home screen without having registered.
“As a new costumer, I want to access the inventory without registering, so that
I can make sure this store has what I’m looking for before creating an account.“
SUCCESS CRITERIA: Entering home screen without having registered.
“As a new costumer, I want to access the inventory without registering, so that I can make sure this store has what I’m looking for before creating an account.“
SUCCESS CRITERIA: Entering home screen without having registered.
2
"As a costumer, I want to see when stock is on sale, so that I can save money.“
SUCCESS CRITERIA: Accessing Home screen with section "On Sale".
"As a costumer, I want to see when stock is on sale, so that I can save money.“
SUCCESS CRITERIA: Accessing Home Screen with a section on sale.
"As a costumer, I want to see when stock is on sale, so that I can save money.“
SUCCESS CRITERIA: Accessing Home Screen with a section on sale.
3
“As a customer, I want to know what other customers say about products
and how they rate them, so that I can better judge if an item is right for me.“
SUCCESS CRITERIA: Accessing Product detail screen with section "Reviews".
“As a customer, I want to know what other customers say about products
and how they rate them, so that I can better judge if an item is right for me.“
SUCCESS CRITERIA: Accessing Product detail screen with section Reviews.
“As a customer, I want to know what other customers say about products and how they rate them, so that I can better judge if an item is right for me.“
SUCCESS CRITERIA: Accessing Product detail screen with section Reviews.
User Flow Diagram
User Flow Diagram
The user flow diagram consists of the three users flows.
The user flow diagram consists of the three users flows.
The user flow diagram consists of the three users flows.
Visual Design
Visual Design
Visual Design
Wireframes
Wireframes
Wireframes
SIGN IN
HOME
ON SALE
PRODUCT DETAILS
REVIEWS
SIGN IN
HOME
ON SALE
PRODUCT DETAILS
REVIEWS
Style Guide
Style Guide
Style Guide
Prototype
Prototype
Prototype
SIGN IN
HOME
ON SALE
PRODUCT DETAILS
REVIEWS
SIGN IN
HOME
ON SALE
PRODUCT DETAILS
REVIEWS
Usability Test
Usability Test
Test criteria
Test criteria
TEST GOALS
TEST GOALS
TEST GOALS
Access the learnability for new users interacting with the navigation.
Observe how new users access the inventory without registering and easily find the needed information.
Access the learnability for new users interacting with the navigation. Observe how new users access the inventory without registering and easily find the needed information.
Access the learnability for new users interacting with the navigation. Observe how new users access the inventory without registering and easily find the needed information.
METHOD
METHOD
METHOD
Remotely moderated usability test.
A link to the prototype was shared. The participants were given three scenario-based tasks to complete using their smartphones.
Remotely moderated usability test. A link to the prototype was shared. The participants were given three scenario-based tasks to complete using their smartphones.
Remotely moderated usability test. A link to the prototype was shared. The participants were given three scenario-based tasks to complete using their smartphones.
METRICS
METRICS
METRICS
Jakob Nielsen Severity scale
0 = Not an usability problem
1 = Cosmetic problem only
2 = Minor usability problem
3 = Major usability problem
4 = Usability catastrophe
Nielsen Severity scale
0 = Not an usability problem
1 = Cosmetic problem only
2 = Minor usability problem
3 = Major usability problem
4 = Usability catastrophe
Nielsen Severity scale
0 = Not an usability problem
1 = Cosmetic problem only
2 = Minor usability problem
3 = Major usability problem
4 = Usability catastrophe
EQUIPMENT
EQUIPMENT
EQUIPMENT
Video conference service Zoom
PCs and personal smartphones
Pen & Paper for notetaking
Video conference
service Zoom
PCs and personal smartphones
Pen & Paper for notetaking
Video conference
service Zoom
PCs and personal smartphones
Pen & Paper for notetaking
PARTICIPANTS
PARTICIPANTS
PARTICIPANTS
3 Participants, Design students
2 females, 1 male
3 Participants,
Design students
2 females, 1 male
3 Participants,
Design students
2 females, 1 male
DURATION
DURATION
DURATION
5-10 minutes/ session
In total approx. 30 minutes
5-10 minutes/ session
In total approx. 30 minutes
5-10 minutes/ session
In total approx. 30 minutes
Scenario-based Tasks
Scenario-based Tasks
SCENARIO 1
SCENARIO 1
SCENARIO 1
You want to access the inventory
without creating an account, so that you can make sure this store has what you want before registering.
Access the learnability for new users interacting with the navigation. Observe how new users access the inventory without registering and easily find the needed information.
You want to access the inventory
without creating an account, so that you can make sure this store has what you want before registering.
SCENARIO 2
SCENARIO 2
SCENARIO 2
You want to make a bargain.
For this reason you want to find goods in the product inventory that are on sale.
Remotely moderated usability test. A link to the prototype was shared. The participants were given three scenario-based tasks to complete using their smartphones.
You want to make a bargain.
For this reason you want to find goods in the product inventory that are on sale.
SCENARIO 3
SCENARIO 3
SCENARIO 3
You feel unsure about an interesting product, for this reason you want to know what other customers say
about this product before you buy it.
Nielsen Severity scale
0 = Not an usability problem
1 = Cosmetic problem only
2 = Minor usability problem
3 = Major usability problem
4 = Usability catastrophe
You feel unsure about an interesting product, for this reason you want to know what other customers say about this product before you buy it.
Usability Test Results
Usability Test Results
User opinions about the Prototype
User opinions about the Prototype
PARTICIPANT 1
PARTICPANT 1
PARTICIPANT 1
“I had no problems completing the tasks, I could very easily find all the information I wanted. I didn't like the lack of login text. It looks like the user is on the sign up screen and not the login screen."
“I had no problems completing the tasks, I could easily find all the information I wanted. I didn't like the lack of login text. It looks like the user is on the sign up screen and not the login screen."
“I had no problems completing the tasks,
I could very easily find all the information I wanted. I didn't like the lack of login text.
It looks like the user is on the sign up screen and not the login screen."
PARTICIPANT 2
PARTICIPANT 2
PARTICIPANT 2
“I was confused about the round plus button on the product cards.
It wasn't clear to me whether this would take me to the product or whether I had already added the product to my shopping cart.“
“I was confused about the round plus button on the product cards. It wasn't clear to me whether this would take me to the product or whether I had already added the product to my shopping cart.“
“I was confused about the round plus button on the product cards. It wasn't clear to me whether this would take me to the product or whether I had already added the product to my shopping cart.“
PARTICIPANT 3
PARTICIPANT 3
PARTICIPANT 3
“The rating stars on the product cards are a little distracting. I think it would be good to not display the rating on the small product cards. Users can find out more later on the product detail page.“
“The rating stars on the product cards are a little distracting. I think it would be good to not display the rating on the small product cards. Users can find out more later on the product detail page.“
“The rating stars on the product cards are a little distracting. I think it would be good to not display the rating on the small product cards. Users can find out more later on the product detail page.“
Evaluation of the Design
Evaluation of the Design
USABILITY ISSUE 1
Severity scale: 3
USABILITY ISSUE 1
Severity scale: 3
USABILITY ISSUE 1
Severity scale: 3
User is not sure if she is on the sign up or on the login screen.
User is not sure if she is on the sign up or on the login screen.
User is not sure if she is on the sign up or on the login screen.
USABILITY ISSUE 2
Severity scale: 2
USABILITY ISSUE 2
Severity scale: 2
USABILITY ISSUE 2
Severity scale: 2
User doesn't know where the round button on the product cards leads to.
User doesn't know where the round button on the product cards leads to.
USABILITY ISSUE 3
Severity scale: 0
USABILITY ISSUE 3
Severity scale: 0
USABILITY ISSUE 3
Severity scale: 0
User finds the rating stars on the product cards distracting.
User finds the rating stars on the product cards distracting.
User finds the rating stars on the product cards distracting.
SOLUTION
SOLUTION
SOLUTION 1
Adding a heading for the login above the input fields on the login screen. For visual hierarchy making the Sign up link a bit smaller.
Adding a heading for the login above the input fields on the login screen. For visual hierarchy making the Sign up link a bit smaller.
Adding a heading for the login above the input fields on the login screen. For visual hierarchy making the Sign up link a bit smaller.
SOLUTION
SOLUTION
SOLUTION 2
Users learn to use the round button to add a product to the cart while tapping the rest of the card area takes them to the product detail screen.
Users learn to use the round button to add a product to the cart while tapping the rest of the card area takes them to the product detail screen.
Users learn to use the round button to add a product to the cart while tapping the rest of the card area takes them to the product detail screen.
SOLUTION
SOLUTION
SOLUTION 3
Not an usability issue. Rating stars on the product cards help users to navigate directly to highly rated products.
Not an usability issue. Rating stars on the product cards help users to navigate directly to highly rated products.
Not an usability issue. Rating stars on the product cards help users to navigate directly to highly rated products.
Final App Design
Final App Design
Wireframes
Wireframes
Wireframes
Thank you!
Thank you!
More projects coming soon.
More projects coming soon.
Thank you!
More projects coming soon.
Need a UX/UI Designer?
I'm a UX/UI Designer who specialises in accessible design.
I create user-centered solutions that make complex workflows simple and engaging.
My designs balance aesthetics with functionality, ensuring digital products work beautifully for everyone.
Design Thinking
User Research
User Flows
User Journey Maps
Persona
Wireframes
Prototyping
Accessibility