Atown Reimagined

A beloved local shop in the heart of Texas gets an updated redesign for their e-commerce website—built for clarity, community, and digital ease. Scroll to see how I redesigned the experience from the ground up while maintaining the essence of Austin in this conceptual project.

BACKSTORY

Austin's Favorite Gift Shop

Atown is one of those magical Austin shops where every corner holds something new — quirky gifts, local art, and the unmistakable spirit of the city. But their website didn’t reflect that experience: it felt flat, confusing to navigate, and disconnected from the store’s charm. I saw an opportunity to redesign it from the ground up, creating a digital space that felt just as vibrant, intuitive, and full of discovery as walking through the shop itself.

TIMELINE

2 week sprint

TEAM

Tiana Olivo

TOOLS

Figma

Illustrator

Procreate

Google Suite

Adobe Express

RESPONSIBILITIES

UX Design

Branding & Identity

Project Management

Website Development

LISTEN + LEARN

Revealing the Gaps

I recruited 4 participants from my personal social media account, who shop locally for gifts then gave them simple tasks to complete on Atown's current site including browsing for a gift and checking out.

Lost in Translation

Shoppers failed to narrow down the search for Austin-themed gifts (rather than locally-made)

Too Many Choices

A navigation bar of 10+ categories left shoppers feeling overwhelmed.

Filtering Fell Short

Limited filter options made it hard for shoppers to find what they were looking for.

Guiding Atown to Success

Shoppers completed their tasks, but not without friction. The site’s navigation was inconsistent, some pages were empty, and filters weren’t useful — all of which led to confusion and drop-off.

Atown needed a full redesign: clearer navigation, smarter filters, and a visual identity that matched its in-store charm. I set out to explore how similar brands were solving these same problems online.

Crafting a Competitive Edge

I chose three distinct companies for comparison: Anthropologie for its upscale variety, Hallmark for its traditional gift-shop model, and Austin Gift Company for its curated, locally inspired site that closely aligns with Atown.

What do they have that Atown doesn't?

  • A carefully crafted logo and branding

  • Catered shopping experience for specific gift budgets, preferences, occasions, and/or recipients

  • Organized and intuitive shopping experience, making it easier to explore options

  • Stylish and inviting user interface

  • Hours & location

THE PROBLEM?

From Insight to Action

It wasn’t surprising to hear shoppers were confused — the cracks were visible from the first click. But just how deep did the usability issues go? I set out to find out if a few tweaks could fix things… or if Atown needed a complete rethink.

Shoppers need a seamless way to find and purchase the best Austin-themed gifts that align with their preferences, budgets, and occasions, without feeling overwhelmed or uncertain during the process.

IMAGINATION STATION

IMAGINATION STATION

IMAGINATION STATION

Drafting the Journey

Listed below are the 3 main points I wanted to address according to shopper's needs with potential solutions for each one. I then sketched a few basic screens to start illustrating how this could come into play.

Make it easier to locate specific products on site

  • reorganize the nav menu

  • incorporate filters by category

  • change the way search results appear

Find better ways of informing users

  • cater to the preferences of gift recipients

  • create a clearer sense of what the store is about through branding

  • include store hours & location

Help users feel more connected to the store

  • improve hierarchy, especially for "About" section

  • use consistent branding to create a better experience

  • display local brands first

From Sketches to Strategy

My ideal solution combined most of my sketches into a multi-navigational system, inspired by Anthropologie's website. Research showed shoppers approach searches differently—some use the search bar, others browse headings, and some rely on filters. To accommodate diverse user behaviors, I focused on organizing information clearly and accessibly, starting with a user flow for browsing products.

Home Page

This wireflow demonstrates the multiple options you can use to find the right product.

Home Page: This wireflow demonstrates the multiple options you can use to find the right product.

Click on the button that targets specific preferences, or click "Austin Gifts" on the nav bar to see all the options.

Product Page: The sidebar on the left displays specific filters under the main category to refine the search.

No matter the page, the user has multiple ways of narrowing down all the various options to find the perfect gift.

Home

Click on the button that targets specific preferences, or…

Home

…click "Austin Gifts" to see every option.

Product Listing

The sidebar menu displays filters under each category to refine the search.

Product Listing

No matter the page, the shopper has multiple ways of narrowing down options.

Browse with Ease

Added a “Browse By” sidebar to keep navigation clear, organized, and easy to explore by category.

Navigation Overload

Atown’s website has a navigation menu packed with 15 titles, so many that they can’t all fit on the screen. Additional categories were tucked away under a “More Links” tab, which shoppers found confusing and inconvenient — making it harder to find what they needed and adding to their sense of overwhelm.

Atown’s website has a navigation menu packed with 15 titles, so many that they can’t all fit on the screen. The extras get tucked away under a "More Links" heading, but instead of being helpful, it left users scratching their heads. During testing, they found the hidden links more confusing than convenient, making it harder to find what they needed.

That's when I determined the need for a good ol' fashioned card sort.

The Card Sort

  • 4 participants, recruited through social media

  • Goal: to determine how users categorize the miscellaneous items that Atown offers

  • Tough to categorize items such as magnets and playing cards fell into the category: "El Arroyo"

New Features, New Discoveries

New Features, New Discoveries

It was in the second round of usability testing that I got to witness first-hand my newly designed website, albeit with no color or images, it went quite well. I used the same tasks as the first round including browsing for an Austin-themed gift and checking out.

It was in the second round of usability testing that I got to witness first-hand my newly designed website, albeit with no color or images, it went quite well. I used the same tasks as the first round including browsing for an Austin-themed gift and checking out.

4/4 users

  • completed the tasks in under 10 minutes with no errors

  • used the "Browse by" filters to refine their search

3/4 users

  • scrolled down to look at the "Local Brands" section

  • expected to receive feedback after adding an item to cart

2/4 users

  • scanned the entire homepage before making a decision

  • immediately clicked on the feature "Shop T-shirts"

A Shopper’s Journey Refined

In round two, navigation felt smoother, but shoppers wanted clearer cart feedback. I added a confirmation overlay and refined the Austin-focused filters, which shoppers loved. With usability on track, I shifted focus to strengthening the site’s branding for a more cohesive experience.

VISUALIZING THE SOLUTION

VISUALIZING THE SOLUTION

VISUALIZING THE SOLUTION

Painting the Town

Honestly, I loved that Atown didn’t have a set brand — it gave me room to play with color and build a visual style that captured their fun, playful vibe. I’d still recommend they invest in a proper logo to boost their identity and stand out. For now, I pulled inspiration from their storefront sign and used the bold, youthful colors (celadon, mustard, sky blue) with handwritten fonts to bring that eclectic charm to life.

My goal: make it feel like you’re already inside the shop — even if you’re just browsing from your couch.

Shades of Inclusivity

To ensure an accessible and vibrant experience for all users, I tested various color combinations for optimal contrast. Of course, black on white provided the best readability, making it perfect for small and large text blocks. Buttons received a touch of black on blue, balancing style and clarity, while white on dark green stood out beautifully in the footer. For a subtle pop, I used red on green and yellow sparingly, reserved for larger text elements.

This thoughtful approach allowed me to create a colorful website that’s not only visually appealing but truly inclusive.

Before & After

Homepage

Original Website

  • Unrelated color scheme

  • Carousel that accidentally displays a "slideshow" instructional pop-up & lacks relative information

New Design

  • Cohesive color scheme & clear logo

  • Cover page displays local art

  • Immediately features popular item shortcuts

Navigation Menu

Original Website

  • Displays a plethora of navigation titles

  • Additional titles are grouped in "More Links"

  • Lack of consistency in the titles

New Design

  • Titles narrowed down to the 7 most important

  • "Austin Gifts" separates items that are Austin-related vs. Austin-made

  • "About Us" & the subcategories are moved up from the footer to display hierarchy

  • Added "Sell Your Brand Here" to give local artisans an easy way to contact Atown

New Design

  • Titles narrowed down to the 7 most important

  • "Austin Gifts" separates items that are Austin-related vs. Austin-made

  • "About Us" & the subcategories are moved up from the footer to display hierarchy & give context to the shop's offerings

  • Added "Sell Your Brand Here" to give local artisans an easy way to contact Atown

Local Brands Feature

Original Website

  • These brands are displayed at the very bottom of the page even though it's a large part of the shop's offerings

  • Logos are all different sizes & unaligned

New Design

  • Displayed closer to the top of the page

  • Increased number of brands & created cards for each brand to have consistency with size and alignment

  • Moved "Illuminidol" from navigation menu to brands feature

Browse by Category

  • Brand new feature that allows easy access to all categories within a specific title from the navigation menu

Product Listing Page

Original Website

  • Font size, images, & buttons are large and non-responsive to page size

  • Additional images of product are bigger than the first & stacked vertically; must scroll down to see them all

  • Colors missing from thumbnail

New Design

  • Main image is the largest; additional images displayed below & replace the large image when clicked

  • All product info is displayed in viewport, no need to continuously scroll down to see everything

Footer

Original Website

  • Footer is so large that you need to scroll to see all of it

  • "About Us" is linked here

  • The color is unrelated to the shop's brand

  • Entire site is missing shop address, operating hours, & shop photo

New Design

  • Moved "Best of Austin" seal from floating in the middle of the homepage to the footer so it shows up on every page

  • Included shop hours & address

  • Added a photo of the storefront & a map to make Atown easy to find

FINAL THOUGHTS

Please Exit Through the Gift Shop

And with that, a new gift shop website was born — playful, intuitive, and full of Austin charm.

This project truly put my organization skills to the test, and honestly, I loved it. Taking scattered ideas, messy menus, and user feedback, then bringing it all together into something clear and cohesive — that’s my kind of fun.

The card sort was especially eye-opening, revealing how users naturally group and navigate information. It reminded me how much I thrive on the process: every phase building on the last, turning chaos into clarity.

Up next: refining the prototype, applying feedback, and running one last round of testing to make sure the final experience feels as seamless as it should.

And with that, a new gift shop website was born.

I'm fascinated by the diverse research and ideation methods that drive creative problem-solving. The card sort, in particular, offered a rare glimpse into users' thought processes, helping me truly understand how they think and feel. These methods are powerful tools for building empathy, making the entire journey so much more meaningful.

Every phase—discover, define, design, and deliver—flows seamlessly, creating a holistic design approach I hadn’t fully appreciated before. It’s incredible how each step builds on the last, forming a cohesive and insightful process.

As I wrap up this project, my next steps include refining the high-fidelity prototype, integrating user feedback, and conducting a third round of usability testing to ensure the solutions I've developed genuinely enhance the user experience. To see the final iteration, please click the button below.

And with that, a new gift shop website was born.

I'm fascinated by the diverse research and ideation methods that drive creative problem-solving. The card sort, in particular, offered a rare glimpse into users' thought processes, helping me truly understand how they think and feel. These methods are powerful tools for building empathy, making the entire journey so much more meaningful.

Every phase—discover, define, design, and deliver—flows seamlessly, creating a holistic design approach I hadn’t fully appreciated before. It’s incredible how each step builds on the last, forming a cohesive and insightful process.

As I wrap up this project, my next steps include refining the high-fidelity prototype, integrating user feedback, and conducting a third round of usability testing to ensure the solutions I've developed genuinely enhance the user experience. To see the final iteration, please click the button below.

PRESENTATION DECK

Click the Pic

Designed using Google Slides

Curious about what we can create together?

Let's bring something extraordinary to life!

2025 Tiana Qlivo

Curious about what we can create together?

Let's bring something extraordinary to life!

2025 Tiana Qlivo

Curious about what we can create together?

Let's bring something extraordinary to life!

2025 Tiana Qlivo

Curious about what we can create together?

Let's bring something extraordinary to life!

2025 Tiana Qlivo