Get the Latest Kicks You Want
City Sports lets you find the latest sneakers and win a chance to purchase special releases.
Roles
UX, Visual Design, Branding & Identity
Tools
Sketch, Figma, Invision, Adobe Illustrator
Duration
6 weeks
Deliverables
User survey, user personas, competitive analysis, user stories & flows, sketches, wireframes, user testings, visual design and brand & identity, prototype
Overview
City Sports is a retailer of sneakers and urban fashion in Chicagoland for over 35 years. City Sports’ customers are passionate about sneakers so they line up or try to reserve their spots to purchase special sneaker releases. City Sports mobile app reaches more customers by providing special releases calendar, raffle entries, and notification setup.
Problem
Retail market needs to find new ways to attract customers in order to compete with online shopping. Many retailers have their own mobile apps to reach more customers and provide more convenience in shopping experience.
1. Customers at City Sports do not have an easy access to the latest special release sneaker informaton (release dates, availability of sneakers at stores, making reservation for special release sneakers), finding the nearest store location unless customers call the stores, and notifications on sales or any other offers. Customers complain about having a wide reach of making reservation for special releases, especially.
2. City Sports’ current website (https://chicagocitysports.com) doesn’t reflect the retail stores and lacks brand idenity. Morever, there is no mobile app while competitors like Foot Locker, Nike, and Urban Outffiters already have their own.
Solution
City Sports mobile app allows users find their needs in special releases and check availability on products on both online and retail stores. The mobile app provides users time saving and ease of access to product which make shopping experience more convenient with clear brand identity.
Process
Research
Competitive Analysis
To better understand the eCommerce app for fashion and specifically for sneakers, I researched and analyzed competitors like Nike SNKRS, Foot Locker, and Urban Outfitters. In order to differentiate City Sports from competitors, it was necessary to have a specific focus and approach.
Nike manufactures sneakers therefore the app offers more products, informs users better with the key releases, deeper engagement with users through product stories. Moreover, entering the draw for the key releases appeals to sneakerheads.
Foot Locker specializes in shoes along with apparel, the most similar business model to City Sports. Foot Locker carries wide range of sneakers and has member exclusive features such as members-only offers and deals.
Urban Outfitters is a retailer of fashion, beauty, and lifestyle products. The variety of products attracts bigger market, but it can be overwhelming at the same time. The app features community oriented curation of content, in which users can share products and get help on deciding on their purchase.
User Survey
Survey questions focus on understanding users’ behaviors and attitude toward online shopping and how eCommerce app affect their shopping experience. For example, questions discover what users like about online shopping, how useful eCommerce app is, how eCommerce app is more convenient than websites. And, survey questions users to share what the issues there are with the current City Sports’ website and what users expect to see in the mobile app.
65% Convenience is the key importance in online shopping
87% wants to know info on upcoming "hot" sneakers
70% thinks using eCommerce app is easier and time saving than website
63.6% says eCommerce app provides more engagement on products
User Personas
User surveys provided what users want from City Sports mobile app. To gain a deeper understanding of users, I conducted 3 user interviews.
Luc
Student
24/ Chicago, IL/ Male
"Fashion Forward"
Motivation
Luc is well aware of fashion trends and often discusses or shares about them with his friends. He follows websites like, "Hypebeast," to learn latest news.
He likes to take pictures of his fashion items and post them on his social media. Luc uses mobile app and goes to stores to find something that interests him.
Goals
- To get updates on notices on new arrivals
- Want to know when there is sale or any offers
Frustrations
- Retail store and online are not seamless, not the same on available products
Jay
IT
26/ Chicago, IL/ Male
"Time-saving Driven"
Motivation
Jay spends a lot of time for his work and mostly works from home. He doesn't have much time to go to stores to shop even with his remote working option.
He prefers online shopping as he can save time to visit stores. Therefoere, he uses his free time to meet/catch up with his friends.
Goals
- Easily browse products and navigate to get desired information
- Want to see content curation personalized or tailored for user
Frustrations
- Hard to know actual fit of products
- Lack of reviews on products when deciding a purchase
Dan
Marketing Manager
30/ Chicago, IL/ Male
"Sneakerhead"
Motivation
Dan is not particularly into fashion, but he likes to collect sneakers. Therefore, he is on constant watch of release dates of Jordan Retros.
On release day, it is a big deal to reserve a spot to purchase the shoes whether it is onine or retail. He prefers to shop at retail stores because there's no need to wait for shipping and he can look at shoes in person before purchasing them.
Goals
- Want to see launch calendar for special releases
- Reserve a spot for special releases
- Check stock availability both online and stores
Frustrations
- Special release is hard to purchase due to high traffic and app gets laggy
- Not able to check what stores carry special releases
Strategy
User Stories & Flows
From research and interviews, I complied user stories and prioritized then turned into user flows that highlight features of the product. User flows showcase how users would interact with the product and perform tasks.
Wireframes
Wireframes were created in sketches, then in low-fidelity to test out the idea. Using Sketch, I created low-fidelity wireframes with a clickable feature.
I discovered that users wanted more focus on sneakers because kids section and lifestyle section, which is an attempt for integration of website and mobile app, didn't matter to them. Users wanted the app to reflect the retail stores more.
Brand & Identity
Branding & Logo Design
The brand, City Sports, has been in the market for more than 30 years. It is already well recognized business among customers in Chicago. Therefore, keeping the name is a wiser choice, and creating a new brand identity is necessary.
Therefore, I started to brainstorm to portray the symbols and imagery of sneakers and sneakerhead culture. Sports, the part of brand, implies active and positive image to customers. I conceptualized the logo with its initials, CS, and eventually led to inspiration from shoelaces.
Colors
City Sports' new brand represents itself to appeal to sneaker culture. People line up and try to reserve a spot to purchase sneakers that they want. Sunset orange represents the energy and passion for sneakers, onyx and white balance out the intensity of high energy of sunset orange.
Lato
Lato provides a harmonious and warm structured feeling as body texts which helps users to sense stability when reading the text.
Visual Design
High Fidelity Prototype
With wireframes testing and branding, I created a high fidelity mockup in Figma and converted it to a clickable prototype.
User Testing
There were another user testings for hi-fi prototypes. From these testings, I identified the needs to focus more on special releases, special release calendar icon, and pulling information when entering raffle.
Icon
Although "sneaker icon" for new sneaker releases was appreciated, "calendar icon" would be more straightforward and easier to understanding
Wording, placement, and carousel
In order to clarify what "New Releases" is, "Special Releases" is used. And, by providing dates, users can perceive the information on homepage and looping helps users to expect more upcoming sneakers.
Images for Men and Women sections
It is easier to understand using male and female model images to indicate these are "Men" and "Women" sections. And, texts in the original design get lost compared to buttons.
Conclusion
City Sports was a project that I was eager to work on. As a former employee at City Sports, I was already aware of some pain points for customers. Also as Marketing Specialist, I felt the need of more efficient brand marketing and better engagement with customers.
I was glad that I tested out my ideas and received feedback from users on earlier stages of the development. As it is a minimal viable product, the current product doesn't go deeper into some of the important tasks, for example, shopping experience overall. If I were to have a budget and time, I would test out competitors' shopping experience in order to compare and maybe come up with a better solution. I would add more functionality to customer service experience for taking care or orders and refine store-avilablity feature in detail.
Another great discovery is that customer (users) wanted a more simplified and focused product. As an eCommerce app of existing retailer, I thought seamless integration of all business product was important. However, for City Sports, it was necessary to differentiate it from other businesses. And lastly, the launch of mobile app is already great for customers.
I would be happy to see if the mobile app makes it to come alive as it goes beyond MVP through refinement.