GIFTOPIA

PROJECT 

BRIEF

Giftopia was the primary project I focused on during my time as a student at BrainStation. The challenge was to design a mobile app solving a problem of our choice and take it through the whole design process. These include research, user interviews, experience mapping, user personas, wireframing, prototyping, user testing, and high fidelity mockups. I chose design a solution to improve the current gift giving process. 

Software Used: Sketch, Photoshop, Illustrator, After Effects, InVision

3d-touch-flow-for-semplice3d-touch-flow-for-semplice

I kicked off the project by creating a list of assumptions before turning them into questions to ask during my user interviews. From the interview responses, I created a user persona that represented my target audience. I also looked at current tools within the gift buying space and created an experience map to determine design opportunities that would help create the best possible experience for the user. From there I came up with user stories for each epic/stage of the gift buying journey to determine which features were required to make the app successful with users.

User Interviews:

I assumed people enjoyed the feeling of giving gifts, but tend to dread the process of picking of the best gift to buy their friends within their budget. I also assumed that most people bought their gifts last minute due to procrastination. From there, I turned these assumptions into interview questions to learn the current method people are using to choose and buy gifts for their friends. 

Results from the interviews confirmed that the most frustrating part of buying gifts is coming up with gift ideas that will be appreciated. The lack of confidence from choosing gifts also made people procrastinate and was the reason most people ended up buying gifts last minute, which ends up being generic, unthoughtful gifts.

user-interview-v2-2xuser-interview-v2-2x

"The process of choosing and buying

gifts is stressful and I hate it!" -User

User Persona:

From the interviews I determined my target user would be Sarah Adams, a young professional living in the downtown core. She has many friends and occasions to buy gifts throughout the year. Her main motivations would be to give the best gift among her friends to achieve a higher social status. She is also busy with her job, so she doesn’t have the time to come up with the best gift ideas. She is tech savvy and would be open to trying out new services that would help her select and buy gifts.

user-persona-full-widthuser-persona-full-width

Experience Map:

From the experience map I found that users are most frustrated during the search, purchase and delivery stages of the gift buying journey. This provides the opportunity to improve the gift recommendation, ability to split the cost of the gift with friends, offer gift wrapping services, and allow users to track the delivery of their gift from the app.

experience-map-v4experience-map-v4

Epics and User Stories:

Writing the User Stories helped determine which features were the most important for each stage of the gift buying process.

Onboarding

user-story-onboardinguser-story-onboarding

Search / Filter

user-story-searchfilteruser-story-searchfilter

Browse / Shop

user-story-shopbrowseuser-story-shopbrowse

Product Selection

user-story-product-selectionuser-story-product-selection

Purchase

user-story-purchaseuser-story-purchase

WIREFRAME

SKETCHES

After all the research conducted, I started sketching out wireframes to test out various layouts for the search, filter, results, and product screens. 

sketches-wireframesketches-wireframe

LOW-FI

WIREFRAMES

From the sketches I narrowed down the designs and created Low Fidelity wireframes on Sketch. I then reiterated on these wireframes based on feedback received through user testing. Below are the different iterations of the various screens within the app.

Before I took my wireframes into InVision to prototype a demo for user tests, I drew out the flow for a typical user of my app. User flows within my prototype included: logging in, creating a new gift recipient, setting recipient filter settings, searching for new gift, viewing product details and reviews, adding product to cart, and checking out.

user-interview-v3-2xuser-interview-v3-2x

USER TESTING

I conducted usability testing with five users showing them an InVision prototype with my low fidelity wireframes. From there I created a session outputs document listing validations, improvements and other feedback notes from users. Key takeaways included the language used within the app, size of buttons, and amount of information provided to the user by the app.

Session Output

interview-profileinterview-profile
session-outputsession-output

I wanted Giftopia to have a friendly and modern visual identity that scales well. After exploring script fonts, minimalist fonts, and hybrid fonts, I ended up choosing a font that relates to the ribbons of a gift box. The icon implements the infinity sign as the ribbon around a gift box to symbolize the endless gift possibilities the app has the offer. The sky blue colour paired with the logo provides a sense of happiness while reinforcing the friendly and modern identity.

branding-processbranding-process
logo-400pxlogo-400px

HI-FI

WIREFRAMES

Once the branding and visual identity of the app are completed, I implemented changes to the low fidelity wireframes with feedback received from user testing sessions and created high fidelity wireframes showing how the completed app would appear.

hifi-collection-2x-finalhifi-collection-2x-final

Style Guide / UI Library:

giftopia-style-guide-2xgiftopia-style-guide-2x
main-mockup-smallermain-mockup-smaller

3D TOUCH

ANIMATION:

I decided to take the concept of an ideal gift shopping app further and explore the iPhone’s 3D Touch feature and how it will speed up the user’s shopping experience from the iPhone home screen to checkout. I imagined a use case scenario where the user would lightly tap and hold the Giftopia icon to quickly continue searching for a previous created recipient. On the search results screen, the user would lightly tap and hold any product card to get a quick view of the product, while pressing harder would send the user to the full product details screen. The 3D Touch flow can be scene in the short animation created using Adobe After Effects below.

3d-touch-flow-for-semplice3d-touch-flow-for-semplice

The landing page for Giftopia was designed to be responsive and clearly communicate the benefits of the app to the user. 

landing-page-animation-mockupslanding-page-animation-mockups

INVISION

PROTOTYPE

On the right is the final Giftopia prototype made with InVision. All user feedback and style guide has been implemented. The user flow within the prototype is that of a returning user creating a new recipient, setting up the recipient filters, searching for gifts, adding product to cart, and going through the checkout flow.