Giftopia

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.

Research

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.

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.

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

Search / Filter

Browse / Shop

Product Selection

Purchase

Wireframe Sketching

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

Low-Fidelity 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.

User Flows

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.

Usability 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.

Usability testing results

Branding

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.

High-Fidelity 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.

Style Guide / UI Library:

Quick Action: 3D Touch Feature

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.

Landing Page

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

Interested in working together? Get in touch!

Email: richardli@richardlidesign.com
LinkedIn: linkedin.com/in/richardlidesign
Resume: view/download