Share
Explore

icon picker
UX workshops sponsored by Adobe

Designing a coffee ordering mobile app with Jill DaSilva
Calgary UX Group
Project Description:
Designing a coffee ordering mobile app
Workshop Goal:
Design, prototype, and share a minimum of three mobile screens in Adobe XD that can be placed in a Behance post. Optional broader goal is to create a simple case study for Behance and/or your portfolio.
Suggested three screens:
Coffee menu/listing results screen
Coffee menu item detail screen
Order success screen
Want to go more advanced? Add these suggested screens:
App opening screen
Home page
Search
Slide out menu (overlay)
Error message
Checkout flow with payment
Want to go even more advanced? Add these suggested screens (or those of your choosing):
Profile and settings
Referral code for friends
UX Design depth (You can choose your own adventure):
You will understand the foundational concepts of the UX Design process
You can practice and apply the UX Design process to your designs in between our weekly sessions
Tools needed:
Adobe XD & Creative Cloud
Access to slack group #adobe-ux-workshops ​
https://join.slack.com/t/calgaryux/shared_invite/zt-18kft0cte-HN90N7RXRCSYAok1WWSfPQ
⁠
⁠

Oct 12 - Project Kickoff

Workshop Goals
Design challenge
High-level Overview of UX Design process (This is basically your format for a case study outline ;)
Stakeholder interviews
Research
Competitive/Comparative Analysis
User Research
Surveys
Interviews
Personas
Scenarios
User Flows
Sitemaps (and why I rarely use them anymore…)
Wireframes
Sketching (UI)
Low fidelity (UI)
High fidelity (UI)
Prototyping
Testing
Iteration
Benchmarking/data/metrics
Presentation
What we will practice in this session:
Defining the problem
Defining the persona/s (target market) and scenario
Competitive & Comparative analysis
User flow
Wireframing (sketching your designs)
Ending Q&A and next steps

Between this session and the next (OPTIONAL):
Ask ~3 to 7 people about their coffee buying experience
Do they order via an app or in person?
If an app:
what app do they use?
What do they like/not like about it?
How would they make it better
What do they usually order? [Think about ways to make this experience better and/or more delightful for them.]
Sketch out your wireframes on paper
Perform a competitive analysis


Oct 19 - Wireframing

Opening Q&A
What we will practice in this session:
Wireframing (Low Fidelity)
Wireflow and document setup
Design elements
Images
Icons
Helpful plugins
Fun layout features in XD
Creating components
Ending Q&A and next steps


Oct 26 - Wireframing (High fidelity)

Opening Q&A
What we will practice in this session:
Wireframing (High Fidelity)
Leveraging the assets panel to control the styling of the app
Bring in assets from Creative Cloud Libraries (e.g. Logo from Illustrator, icons, etc)
Stark plugin for accessibility
When and how to user test
Creating a share link for user testing
Intro to Prototyping
Foundational prototyping from screen to the next
Multiple flows
Ending Q&A and next steps

Between this session and the next (OPTIONAL):
User test your design and capture feedback and suggestions
Update your design (if needed)

Nov 2 - Interaction Design + Prototyping Options in XD

Opening Q&A
What we will practice in this session:
Interaction design - deeper dive into prototyping in XD
Scrolling
Dropdowns
Hamburger menu overlay
Video
Lottie animations
Embedding sound
Prototyping with voice
Ending Q&A and next steps

Nov 9 - Sharing your designs

Opening Q&A
What we will practice in this session:
Exporting from XD
Sharing with your team
(Remember sharing for user testing in our last session?)
Designer to designer
Designer to stakeholder
Designer to developer
Sharing to Behance
Embedding prototypes in your portfolio
Presenting your design
Best practices when presenting your work
Ending Q&A and next steps


Nov 23 - Final AMA Session:

Final AMA session
Jill will gladly chat about these topics and more!
Questions regarding Adobe XD
How to get started as a UX Designer
What makes a great UXD Portfolio
Leveraging your community and LinkedIn
Winner announced for a year of Creative Cloud!!!


Additional Resources:

Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.