Explore

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

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.