UX/UI Prototypes
Dreamland
As the final assignment of the UI/UX Prototyping Tools: AdobeXD course that I took at BCIT, we were asked to create a tablet application that would feature our own work. For this, I went ahead and created an e-commerce site that sold prints of my digital art. The prototype below follows a user’s journey to browse my artwork, purchase a piece, and submit a contact form to collaborate on a project. Key steps in this project included:
Defining a user story and background
Building a project map
Creating a low-fidelity and an interactive high-fidelity prototype with a design block
Phase 1
THEME
Art e-commerce website.
USER STORY
A musician is contacting an artist to collaborate with to create the album artwork for their new song.
BACKGROUND
Wes Nguyen is a 30-year-old musician and composer who is preparing to release his next EP. He has come across an artist on Instagram and is interested in getting a commission piece made for his next album cover. He goes to her website to see if she has more art pieces or additional information about her availability for hire. Eventually, he fills out a contact us form to inquire about connecting on this opportunity.
Phase 2
With the concept in mind, I began mapping out the pages that would be required for this user task. Building out this project map help me focus on the user journey and really understand the flow between pages.
Phase 3
Low Fidelity Prototype
Using the project map as a guideline, I began building out each page as a low-fidelity prototype in AdobeXD. Using placeholders, I utilized global navigations, repeat functions, and defining components to create consistency in the look and feel.
Design System
An additional step in this project was to create a design system where I defined key elements that were crucial to branding or would be repeated regularly. For example, the logo, brand colours, textures, and fonts are important to the brand identity of the application. Explicitly writing these out helped build the hi-fi mockup a lot faster. Listing out the card look and buttons gives consistency to repeated items on the site. These, along with global navigations and social links, were all defined as components in XD, making it easy to duplicate and keep the same when building the final form.
High Fidelity Prototype
In the end, I created an interactive high-fidelity prototype in AdobeXD that features my own digital artwork.
The first screen users see is an introductory page which requires a verbal cue to trigger. As artificial intelligence and virtual assistances grow in popularity in our day to days, I felt it was a unique way to incorporate this feature. Of course, I have also provided an alternative to this, perhaps uncommon action, and allowed users to swipe left to open the application as well.
Upon entering the site, there are three main actions a user can take - view my art, learn about me, or contact me. Clicking on the about tab, the user lands on an introduction to the artist. The call to action on this page is to connect via social media or contact me. If the user clicks on “let’s talk”, they are redirected to the contact page and are greeted with a form. Here they can enter inquiries and receive a thank you page upon successful submission. Moving to the “art” tab, users get a gallery collection of my artwork pieces, which opens a product page when clicked on. From here, they follow a traditional e-commerce path by filling in contact, shipping, and billing info and get a confirmation page once placing the order.
