hwkr_project-heading-cover
hwkr_app_Searching Page
hwkr_app_Place Bid Page
Duration
Jun.2020 - Aug.2020
Company
About
hwkr.inc
hwkr is an online card trading market that provides a transparent and trustworthy community for players to share, track and trade their card collections.
Position
UI/UX Designer
Responsibilities
The "hwkr" App was going to launch soon, and besides the UX/UI design of it, the brand also lacked a brand style guide to deliver the brand voice, and to draw the target user group. As the only designer in the company, my task was to explore styles that could be potentially developed as the brand style guide and also design the iOS App and other marketing materials consistently.
Results
- Worked closely with the CEO to develop an iOS UI system for “hwkr” App with the target user groups in mind;
- Designed the “hwkr” UI language to represent the brand identity and guide the design of other materials;
- Designed a new logo trademark and social media posters that are consistent with the brand design language. 
Competitive Analysis
UX/UI Design
Branding Design
Competitive Analysis
process
To get a thorough understanding in the area of online card trading business and about recent trending features on relevant platforms, I took a close look at some key players in the space.
The competitors I looked into can be divided to two categories, one is card trading platforms and the other is social eCommerce platforms.
I first researched on the overview, information architecture and app/web features on each platform respectively, and then came up with a sheet with features and brands to analyze what are the trending elements on these platforms, as a reference of decision making during hwkr App design.
Similar as sneaker market, the value of cards and funkos always fluctuates according to customer demands, and due to the nature of collectibles, there’s a lot of transaction depending on reselling between customers in card trading market.  Thus, we are hugely inspired by StockX, “an online marketplace and clothing reseller, primarily of sneakers”, who has a transparent information system that allows customers to track the rapidly changing values of items, and depop, “a peer-to-peer social shopping app”, where sharing and socializing becomes the premise of a thriving resellers’ market.
Proposition
StockX is the world’s first stock market for things – a live ‘bid/ask’ marketplace. Buyers place bids, sellers place asks and when a bid and ask meet, the transaction happens automatically. It facilitates the processes of buyers finding the item they want, especially rare ones, and sellers finding the appropriate buyers to be in a safe and efficient way.
  • Anonymity
  • Transparency
  • Authenticity
Offer
A live data system to provide transparent market price for each item;
Work as the third party between buyers and sellers to create a trustworthy and safe environment for trading.
Business Model
Buyers place a Bid or hit Buy Now to purchase immediately at the lowest Ask;
Sellers place an ask or hit Sell Now to sell immediately at the highest bid;
Once accepted, the item gets shipped to stockX for verification;
Buyers need to pay extra fees to stockX for authentication and processing, sellers will be deducted in the amount of money they receive too.
Strength
Real time market data of each item;
12 month sales information;
Expert verification to assure the quality and
authenticity;
Sort items by season/released year to make the discovery experience easier;
Follow a product and get notified when price changes；
Account portfolio to manage one’s collection and track values.
Weakness
There’s some arguments about the authentication of sneakers.
Quality control needs to be upgraded.
Customers reported receiving damaged products.
Inefficient customer service.
High service fees.
Proposition
Depop is the fashion marketplace app where the next generation come to discover unique items. With a global community buying, selling and connecting to make fashion more inclusive, diverse and less wasteful.
  • Creative
  • Unique
  • Inspiring
Offer
A community for users to share their fashion ideas, contribute to the extending life-cycle of clothes, and make friends.
Business Model
The shopping experience is as simple as other traditional m-commerce platforms, users press Buy to purchase any items they want.
The biggest difference lies at the openness of the community that enables everyone to communicate and share freely like on a social media app.
Strength
Social feed that allows liking, saving, and commenting;
A robust and public profile for every user;
See reviews of the seller and items have been sold;
Socializing like following and messaging is made of more importance than other e-commerce platforms;
Filter items according to wanted size:
Making the shopping experience easier.
Weakness
Lack of seller protection；
Insufficient control in in-app bullying;
Inefficient customer service;
Customers are confused about how the app works, like some of them don't know how to update order status after they ship them.
Falsely delete users' accounts.
UX/UI Design
Persona
Information Architecture
Explore the Style
Brand Voice
Playful
Friendly
Fun
Joyous
Secure
Professional
Efficient
Trustworthy
Neighborly
Creative
Cool
Smart
Moodboard
UI Design
Onboarding/Main Pages
"hwkr" primary blue and logo
Provide different options for users on the “Sign-in” page.
Requirements for inputs are provided
Progress indicator to inform the steps needed
Use the three branding colors in the signing up process
There are two sections on the Homepage: Market and Feed
Products displayed on the Homepage are “Most Favorited”, “Lowest Ask”, and “Highest Bid”, “Sealed Packs” and “Latest Sets”.
“Feed” shows latest “Bids” and “Asks”.
Users can buy through “New Ask” or sell through “New Bid”.
Users can search for single items and "Collections" from the Search Page.
"Collections" means users' collection, and by tapping on individual "Collections", users will be led to other users' page.
Public profile shows what are listed for sale or are wanted from the user.
The page is consistent with user's profile page and
Onboarding/Main Pages
Product page shows the version of item, recent sales, price chart, and product details.
We think the prices and history sale range are helpful for users in making decisions, so they're put above product details.
Layout for "Details" varies according to product type.
Users can customize the Price Chart by filter the configures.
Maximum price chart of three versions.
Users need to configure the version before Buy/Bid. The process is the same as "Customize Chart".
Users will be able to choose between "Buy" directly from existing Ask or "Bid" a price.
Total price is calculated after the Input.
Users can sell by "Ask" at an expected price or "Sell" directly to an existing Bid.
The main difference between selling and purchasing flow is that users need to upload pictures of the item they sell.
Different from buying, selling doesn't have to set  "Bid Duration", and instead of confirming shipping address, users confirm the billing address.
Style Guide
Color Palette
Primary/Secondary
BLUE
3c92f1
GREEN
30ba78
YELLOW
ffac0c
RED
d74343
Greys
BLACK
181818
DARK 
GREY
626668
GREY
b8bdc0
LIGHT 
GREY
f9f9f9
Gradient
BLUE
GRADIENT
GREEN
GRADIENT
YELLOW
GRADIENT
Typography
Typeface
Lato
Regular
Lato
Regular
Lato
Fonts
Type Size
Sizes
Weight
Line Height
Spacing
H1 Headline
Lato
16
Bold
18
0
H2 Headline
Lato
15
Bold
17
0
H3 Headline
Lato
14
Bold
16
0
Body Large
Lato
14
Regular
16
0
Body Default
Lato
12
Regular
14
0
Body Small
Lato
11
Regular
12
0
Caption Default
Lato
11
Regular
12
0
Overline Default
Lato
11
Regular
12
1 px
Icons
UI Elements
Branding Design
Logo Iteration
First Round of exploration
Second round of iteration
We wanted to go for a simpler symbol that is memorable and representative of our product.
We later went with the design that represents more of "collection" and "tracker".
We made the final round of iteration based on the two symbol chosen, and adjusted the details.
Poster Design
Card of the Day Posters
give away posters
right arrow
Last
Paper Plane
Next
Mocha Delites Service Redesign
right arrow
IntroductionCompetitive AnalysisUX/UI DesignBranding Design