Case Study:
Case Study:
Tokyo Ikebana App Design
Tokyo Ikebana App Design
Embedded Files
The product
The product
Tokyo Ikebana is a regional florist located in Tokyo, Japan. Tokyo Ikebana strives to provide fresh flowers and traditional Japanese Ikebana workshops to local residents, online customers, and international tourists. The florist needs a tool to help order products and register for workshops efficiently.
Project Overview
Project Overview
The problem
The problem
Busy residents and tourists lack time to wait in line at stores to pay for floral products and workshops.
The goal
The goal
Design an app to allows users to easily order products and workshops for pick-up, delivery, and participation.
My role
My role
UX researcher and designer. Using Figma to design the app from concept to delivery.
Responsibilities
Responsibilities
Empathizing with users, defining problems, ideating solutions, designing paper and digital wireframes, creating low and high-fidelity prototypes, conducting usability studies, accounting for accessibility, and iterating in the design.
Understanding the User
Understanding the User
Summary
Summary
I conducted foundational research and created empathy maps to understand users’ needs.
The primary user groups identified were local residents and international tourists who lacked time to wait in line at stores to purchase products and register for workshops.
Research also revealed that online orders are increasing from different regions of Japan and other countries. Customers have challenges ordering online.
User Pain Points
User Pain Points
Time:
Time:
Local residents and international tourists are too busy to wait in line after working at their jobs or visiting exhibitions.
Accessibility:
Accessibility:
The platform for ordering products and registering workshops are not equipped for international users and people with disabilities.
Group Order :
Group Order :
Taking too much time to order, receive, and register for groups.
Problem Statement and Persona 1
Problem Statement and Persona 1
Noriko is a busy working adult who needs easy and fast ordering options because she has no time to wait in line at stores to purchase products or register for workshops.
Problem Statement and Persona 2
Problem Statement and Persona 2
Hinata is a tour guide who needs simple and quick ways to place group orders and register workshops efficiently for his tours.
User Journey Map 1
User Journey Map 1
Mapping Noriko’s user journey revealed how easy it would be for users to place orders on a dedicated Tokyo Ikebana app.
User Journey Map 2
User Journey Map 2
Hinata’s User Journey Map showed how easy it would be to make group orders on the Tokyo Ikebana app.
Competitive Audit
Competitive Audit
An audit of four competitors’ products and services includes general information about competitors, and User Experience on competitors’ websites and apps in first impressions, interaction, visual design, and content.
Competitive Audit Report
Competitive Audit Report
A competitive audit report provided direction on gaps and opportunities to address with the app design.
Starting the Design
Starting the Design
User Flow
User Flow
A clear and simple path of the interaction process to complete ordering from start to finish by users with the app.
Storyboards
Storyboards
Using storyboarding as a tool to visualize potential solutions to problems the user is facing and help me work through the flow of the experience.
Big picture storyboard helps to get stakeholders to support my ideas and close-up storyboard was used in the design process.
Paper Wireframes
Paper Wireframes
Taking the time to draft iterations of each screen for the app on paper ensured that the elements that made it to digital wireframes would be well-suited to address users' pain points. For the home screen, I prioritized a quick and easy ordering process to help users save time.
The red stars shown below were used to mark the elements of each sketch that would be used in the initial digital wireframes.
Digital Wireframes 1
Digital Wireframes 1
As the initial design phase continued, I iterated the app design according to feedback and findings from the user research.
I designed 2 options for users to make group orders under the hamburger menu and menu bar.
Digital Wireframes 2
Digital Wireframes 2
Easy navigation was a key user need to address in the design in addition to equipping the app to work with assistive technologies
Low-fidelity Prototype
Low-fidelity Prototype
I created a low-fidelity prototype by using the completed set of digital wireframes. The primary user flows I connected were making individual and group orders, so the prototype could be used in a usability study. Please view the low-fidelity prototype for Tokyo Ikebana app.
Conducting UX Research and Test Early Concepts
Conducting UX Research and Test Early Concepts
Plan the Usability Study
Plan the Usability Study
The elements of my UX research plan include Introduction, research questions, KPIs, Methodology, participants, and the script.
Note taking during the Usability Study
Note taking during the Usability Study
I used note-taking spreadsheets to take notes on 5 participants during the usability studies. The spreadsheets were categorized by task, click path, observations, quotes from participants, and task completion rating.
Usability Study Findings
Usability Study Findings
I conducted two rounds of usability studies, then used affinity diagrams to synthesize and organize data into groups with common themes or relationships.
Findings from the first study helped guide design from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.
Affinity Diagram
Affinity Diagram
Round 1 findings
Round 1 findings
Users need hints to understand icons.
Checkout process needs "final review" to see tax before submitting.
Users need a hint of swiping-up to see more content.
Round 2 findings
Round 2 findings
Users need clear steps to guide them before making group orders.
Users want filters and deals when shopping on apps
Refining the Design
Refining the Design
Mockups 1
Mockups 1
Early design did not have cues on icons. I added labels under each icon to be clear to users. I also added accessibility tools under the hamburger menu.
Mockups 2
Mockups 2
The second usability study revealed that users need clear steps to guide them before making group orders.
I added an additional screen of the steps which can be accessed from an icon under the hamburger menu.
Key Mockups
Key Mockups
High-fidelity Prototype
High-fidelity Prototype
The final high-fidelity prototype presented straightforward user flows for making individual and group orders to checkout. It also meets users’ needs for pickup and delivery options. Please view the high-fidelity prototype for Tokyo Ikebana app.
Accessibility Considerations
Accessibility Considerations
Use “Language Translation” tool for international users
Use “Text Size Format” and “Room-in and -out” for users with presbyopia and low vision users
Provides access to vision-impaired users by adding alt-text to images for screen readers
Use icons to help make navigation easier
Going Forward
Going Forward
Takeaways
Takeaways
Impact:
Impact:
The app makes users feel like Tokyo Ikebana really thinks about how to meet their needs.
One quote from peer feedback:“The app made it so easy to make orders! I would definitely use this app to send flowers to my friends in Tokyo and have Ikebana workshop when I visit Tokyo.”
What I learned:
What I learned:
While designing the Tokyo Ikebana app, I learned that the first ideas are only the beginning of the process. Usability studies and peer feedback influenced each iteration of the app’s design.
Next Steps
Next Steps
Conduct another round of usability studies to validate whether the pain points users have experienced are effectively addressed
Conduct more user research to determine any new areas of need
Page updated
Google Sites
Report abuse