AXSWear Cover Final.png

AXSWEAR 

Connected Apparel Mobile Application
DISCOVERY · INTERACTION DESIGN · VISUAL DESIGN

01

PROJECT OVERVIEW

Brainstorming

Contextual Inquiry

Survey

Feature Prioritization

Storyboard

Wireframe

Prototype

Logo Design

02

ROLE
  • My Role: Research/ UX / UI Design

  • Team: Collaborated with 5 other students majored in business and engineering.

03

TIME AND TOOLS
  • Duration: 4 Months

  • Time: 2014 (Visual retouch in 2017)

  • Tools: Adobe Illustrator, Photoshop, Qualtrics Survey

1.Background

 

This is a school project done through the "Multidisciplinary Design Program". The goal of this project is to design and implement a mobile application that can scan NFC embedded school apparel. The team worked closely with an entrepreneur who is our "client" to brainstorm and develop survey/market analysis to find out the needs of connected apparel among students. We delivered the minimal valuable product to our client in the end addressing the top asked features. 

Our sponsor determined there was a significant market opportunity for a new wearable product that bridged the emotional connections with the brands we wear to online identities. By exploring potential products using this technology, new use cases and opportunities could be discovered leading to a product that could successfully enter the market.

Concept1.jpg
Concept2.jpg

2. Challenge​

We were approached with the challenge to design and build a marketable consumer retail product using NFC technology and brand apparel. Specifically, we needed to design a mobile application that interacted with NFC tags embedded in clothing and select the features and use cases that would make this application appealing to users. We decided to conduct user research to help us understand our target users' needs.

3. Brainstorm

At the very initial stage, we decided to go wild and generate as many as blue-sky ideas. The purpose is to think out of box and set up a big feature pool for us to narrow down further down the path.

Screen%20Shot%202017-05-05%20at%2012.35_

Brain Dump

My colleague and I came up with 18 ideas and discussed through all of them. 

AXSWear Brainstorm.png

Common Theme

We did affinity mapping exercise to come up with the bigger buckets of possible features.

4. User Research

4.1 Approach

Survey: We came up with a 12-question survey, sent it to students at school via email and flyers. Besides giving participants the optional questions, we also ask open-ended questions to learn their behaviors and views and thoughts on the use of the product. The survey was distributed to around 100 students to account for credible qualitative results.

Interview: Besides the survey method, we also conducted interviews in the contextual inquiry form to learn about students' behavior and habits. During the interview, we would also ask them to think about the ideal interactions and scenarios using the "connected apparel" if they have a magic wand. This provide us the juice for design and quantitative perspective of data.

4.2 Feature Prioritization

After synthesizing the reviewing the statistics of the survey, we consolidated the user research results and opinions from our stakeholder,  and eventually landed on three basic concepts that we wished to pursue in the prototype. Each one contains several small items that we would like to address.

AXSWear Final Concept.png

5. Story Board​

As the beginning of the design phase, we decided to iron out the overall concept of how this would actually work in practice. After assessing the different steps of the process, we created a storyboard to illustrate the scenario. and then mapped out complete interaction flow to create a step by step depiction of the entire process.

Storyboard.png

6. Wireframe​

With the story skeleton in mind, we started to whiteboard the interfaces and flows of the application. The first part we drew was the scan apparel process, as that is our core interaction and the selling point. From there, we expanded scope to include pages such as Home page, Footprints, Rewards, Leaderboard, which addressed the different asks that we collected from the user research, and created a logical path among them.

Wireframe3.jpg
Wireframe5.jpg
AXSWear Interaction Map.png

7. Final Design​

A playful, pleasant and engaging experience.

Home

Apparel

AXSWear_Profile.png
AXSWear_Profile 1.png
AXSWear_Event.png
AXSWear_Footprint.png
AXSWear_Rewards.png
AXSWear_Leaderboard.jpg

Footprint

Reward

Social

Checkin

Achievements

Events

AXSWear_Scan.png
AXSWear_EventTimeline.png
AXSWear_Checkedin.png
AXSWear_CheckinFriend.png

STYLE

GUIDE

AXSWear_StyleGuide.png

8. Afterthoughts

Running the project like a tiny startup is a fun and memorable experience. Different from the normal school project, I get to collaborate with students with all different kinds of backgrounds and get to know how things really work in real world. I realize there are lots of things and places that the designer needs to coordinate and fill in the gaps. For example, I need to collaborate with the business student and our sponsor to uncover the core features as well as work with engineers to create the final prototype. Proper planning is very crucial to make everyone work together in such a situation and not let yourself burn out.

The second takeaway is that sometimes we can not completely rely on the user research results to decide all of the features of a product. For example, our top-voted features are actually "Information", "Offers" and "Media", but after talking to our sponsor, and thinking about our overall storyboard, we found it's hard to fit Media features into a MVP product. We ended up picking the forth voted feature area - "Social" which can complement the other primary features and help tell a more appealing and complete story.