top of page
NASCA. PERU
Searching for Traces in the Desert
NASCA. PERU
Searching for Traces in the Desert
Tiziana Bucher
Let's bring your ideas to life.
With graphic and UX design.
Improving a feature for the E-commerce site of Costco
UX Case Study
NASCA
at Museum Rietberg
NASCA
at Museum Rietberg
NASCA
at Museum Rietberg
TIZIANA BUCHER
Designer
TIZIANA BUCHER
Designer
TIZIANA BUCHER
Designer
TIZIANA BUCHER
Designer
OVERVIEW
This was my first group project for the UX Design Immersive course at General Assembly. Together in a team of four, we improved in two weeks a feature for an e-commerce store. In our first meeting, everyone throws ideas into the round. Suddenly, we crossed Costco's site. 
With 2.4 stars ranking in the apple store. That's an excellent base for improvements, so we went for it.
Problem
By correcting their labelling system, and bringing consistency in typography, color, buttons, and improving navigation issues, we will enhance Costcos's site a lot. Based on the userflow of the navigation system and landing page, I will show you in this case study, the process our team went through.
Solution
We aim to improve their grocery section as a priority.
Observing Costco's current website, I realized that aligning the typography, colours, and buttons would have a huge impact. Currently, the grocery section is cluttered and confusing. Rather than keep this section hidden on the landing page, we placed it at the top of the page, redesign the navigation, and altered the information architecture.
In this case study, I will demonstrate the improvements to the grocery section through the landing page and navigation.
Tools
Canva
Google Drive
Whimsicle
Google Documents
Figma
Photoshop
My responsibilities
Research, interviewing, affinity mapping, ideating, sketching, wireframing, prototyping, presenting
Discover 
& Research
The main goal is to understand Costco as a brand and its marketing strategies for its products in-store and online. In addition, identify and understand user pain points and frustrations during their shopping experience in the mobile and desktop platform.
Landing page analyzation
Problems
-
Un-consistent in use with colour and buttons.
-
Not consistent in typography, they use Arial, Helvetica Neue, Roboto, S&S Amberosa sans, and customized fonts, e.g. the logo with Frutiger as a base.
-
It looks they have a grid, but they don't use it.
-
Bad Spacing.
-
Confusing labelling system.
-
Even the look of the same buttons “Renew your Membership” varies on different sites.
Change
-
Making the online grocery section more prominent on the landing page makes it easier for users to access it.
-
Change the navigation in the drop-down menu and search bar.
-
Change the IA for online grocery.
-
Relable sections for more clearity.
Affinity Diagram
Each of us interviewed a Costco user. Now we already faced our first challenge. It wasn’t easy to find users they’re buying from Costco online. Some of them didn’t even know they have an app.
With the data we collected in the interviews and the bad reviews from apple’s app store, we created an affinity diagram. It helped us to define difficulties from users.
Findings
-
Difficulty finding features.
-
Ugly and unorganized site.
-
Users prefer in-store shopping.
-
Users don't know Costco has an app.
-
App has many bugs.
What are they buying?
Item Availability
How they shop
Price Discrepancies
Shopping experience
Recommendation
User complete the task?
Competitive Analysis
With some more research into competitors, I found out that all our competitors are putting money into their E-Commerce site. For example, our main competitor Walmart has a much more extensive assortment and invests over a billion dollars in their online grocery shop.
​
Could this be a strategy for Costco? Having such a bad online experience, people give up and prefer to go directly to the store and buy more stuff.
Usability
Testing
With another round of interviews and user testing, we gained new insights into the user experience. Made testings with wireframes, wrote down Costcos problem statement and Hypothesis. With it, we sketched out our improvements.
Hypothesis
Landing page redesign
By implementing an improved information architecture, building a consistent and organized navigation system, we can meet our users' expectations better and lead them to the items they need, enabling them to complete more purchases.
After we went this far with our research process, we started to sketch the mobile site; we used the “Iterate sketching method” for it. All of us brainstormed over new labelling- and the navigation systems on the landing page. We choose our favourite solutions. When my group members attend more user interviews, I started to wireframe our sketches in grey-scale.
A/B Testing
With the two best wireframes, we made A/B testing. We asked our users which home page they preferred and which button they would press first to get to the grocery page. I also put the test on my Instagram. We got 31 users. 67% chose screen B. for the landing page. With these insights, we know now which direction we will take for the home screen. Now we could focus on designing the navigation system.
67%
Preferred the Grocery Button (Screen B)
32%
25%
Preferred the Grocery Banner (Page A)
Noticed the carrot instacart Icon (Screen B)
Solution
Here I will be talking about our solutions. I will show our improvement on Costco's e-commerce grocery store on their Navigation system and their landing page.
Navigation System
With clear Labeling, we brought the ten steps to get the fresh food into your checkout down into half.
1
10
1
5
Final Prototype
Please have a look how our imrovements to the navigation and grocrey store from Costco, will look in the app and the desktop version
Takeaway 
& learnings
Through interviews and tests, I learned a lot about e-commerce users. In this project, I realized that my preference lies more in design and prototyping. I really enjoyed learning more about Figma and got excited when my team members saw my efforts and compliment my skills.
THANKS
FOR
WATCHING!
bottom of page