UX/UI Prototypes
Orange You Glad
While studying part-time at BCIT, I took a class called UI/UX Prototyping Tools: Adobe XD. In this class, we were tasked with three assignments to build beautiful prototypes on various devices. Orange you Glad was my first assignment, where I created a mobile application for ordering custom flowers. This project was broken down into three phases:
User story and background
User flowchart and lo-fi prototype
Hi-fi live prototype
Phase 1
To start off this assignment, I first had to come up with a theme for the app, a user story, and a background of the user.
THEME
Ordering custom flowers
USER STORY
A young man is looking to browse and order a custom bouquet of flowers for his girlfriend’s graduation gift.
BACKGROUND
David Lee is a 25-year-old science graduate from UBC. This spring, his girlfriend of 3 years will be graduating from her university bachelor’s program. David wants to buy special graduation flowers to congratulate his girlfriend and put a smile on her face. He will be out of town for work on the day of her convocation, and therefore needs it delivered to her house on the morning of. He is looking for something grand and memorable rather than plain traditional flowers. David has heard of this flower shop, called Orange You Glad, from his friends and has seen its ads on Instagram. He specifically wants a pink soap flower bouquet that is fancy enough for graduation. He goes to Orange You Glad’s mobile app to order a custom bouquet to be delivered to his girlfriend early in the morning. He will prepay on a credit card and will take advantage of the Mother’s Day promotion code: “10OFF4MOM” for 10% off his order.
Phase 2
Next in the process was to build out a user flowchart that would help me lay out the steps “David” would go through in order to complete his final task. In this step, I considered what buttons he would need to click on and what decisions he would have to make along the way. The types of data inputs were also noted in the chart.
From there, I put the chart to the test, and drew out an lo-fi prototype to visualize the final user experience.
Phase 3
The last step of this assignment was to translate this low-fidelity prototype into a live hi-fi prototype and artboards through user actions. I created my company logo in Adobe Illustrator and imported it into Adobe XD, where I continued to build out the rest of the app. Images were sourced from Unsplash, and all were recorded in this creative source list.
Prototype walkthrough
Starting with a timed introduction screen, the user would be entered into the app and met with a home screen with feature items. Clicking on “soap” in the top navigation bar, they would be brought to a product-specific page. Here, they would refine the filters to pull out items that specifically match “graduation” and “pink”. Choosing “Soft Pink Roses - Graduation” from the four provided options, the user would add to their cart, and begin their checkout process by clicking on the shopping basket icon in the top right corner. This aligns with user expectations and makes it a seamless flow. Going through the checkout process, the user would be prompted with various fields that bring up keyboard and calendar overlays. When finally placing the order, the user lands on a thank you page with an order confirmation, providing assurance the task is complete and the next steps via email.
