SUMMARY PROBLEM SOLUTION PROCESS RESULTS CODING CONCLUSION

SUMMARY

Campus is an ecommerce website created to sell customizable hats inspired by travel. The idea came from the founders’ love to explore foreign cultures and share customs with friends and family back home. The website was created with Campus’ brand identity in mind, but also worked towards solving a common dilemma many shoppers had with online shopping.

PROBLEM

Most people can’t travel without purchasing native products. Travellers always want to bring a small piece of the culture or vacation home to share with friends and families. Despite this big market for tourists, most shops consist of small bodegas that sell similar souvenir products on the streets of major cities. This is especially true for apparel, with most clothing and hats relying on bland graphic prints that don’t emulate the culture or experience of the country. Even with the advancement of technology and an increased reliance on online shopping, souvenir websites don’t make this experience pleasant either. Online souvenir stores are difficult to navigate with cluttered information about the city itself, instead of a direct, clear navigation to purchase items.

SOLUTION

Through countless testing, Campus has been created to provide users with a simple UI that makes navigation through the purchase process quick and easy. It provides users with options to access the lookbook to get a better idea of the different locations that have inspired designs and customize the designs to users’ preferences. This allows every hat to be unique and special to the individual. Users can provide feedback and personal photos to be seen by others that share similar travel experiences and inspire new hat designs. This process prioritizes users’ demand and fashion taste and encourages future travel and cultural growth.

THE PROCESS

Being Campus is an ecommerce website selling hats, it was not only important to get a better understanding of users’ purchasing behavior for hats, but also factors users looked for in an online store. Using a user survey, I tested questions associated with:

  • When do users prefer to shop online?
  • When do users prefer to shop in person?
  • When do users normally wear hats?
  • How often do users purchase hats?

These questions were shared through online forums along with social media outlets and resulted in 30 respondents revealing prevalent information about users’ expectations with ecommerce along with creating a brand identity for Campus.

  • 57% of respondents preferred shopping online instead of in- store.
  • 97% of respondents claimed to prefer in-store shopping because they were able to try on articles of clothing.
  • When it came to purchasing specific articles of clothing, 50% preferred to purchase hats online compared to in-store.
  • 67% of respondents claimed to prefer online shopping for last minute, convenient shopping.
  • 67% of respondents claimed to wear hats primarily on vacation (travel, camping, hiking).

These results have proven users require a simple, quick purchasing process when shopping online to promote convenience. Most users have also shown to wear hats during travel, which required a branding that catered towards this image. Considering in- store shopping holds priority compared to online shopping when it comes to trying on apparel, the brand would also require many user generated images to present a realistic view of Campus designs in everyday life.

PERSONAS

Despite these results, to get a better understanding of what specific features were desired and test my intuition on a website composed primarily of user generated images, I met with specific users to get a more detailed account of Campus’ target audience. You can take a closer look at these personas here.

COMPETITIVE ANALYSIS

In order to understand where Campus lied in the market, I took a closer look at some of its competitors. Lids and Zumies provided a similar service as Campus, with strengths in selling a variety of different styles of hats, whereas Campus focused primarily on baseball and safari bucket hats. However, analyzing their user experience and comparing the navigation to users’ survey responses and personas, Lids and Zumies showed a cluttered UI that immediately opened up 2-3 modal screens for deals and newsletter sign up. Lids especially was muddled with vertical and horizontal navigation bars that opened secondary menus. This gave Campus an advantage as an ecommerce website with simple navigation and actionable items in multiple sections of the homepage.

USER FLOWS

Based on user surveys, personas and competitive analysis, I moved on to the next stage and developed a sitemap to plan the layout of Campus’ website:

This sitemap was then refined to create user flows for specific user experiences. User flows helped map out a straightforward homepage with easy accessibility to different product features for new users, but a non-invasive experience for returning users. For this purpose the payment input page was moved towards the end of the purchasing experience for new users, while payment recognition was administered for returning users (with the options to toggle information on and off).

CREATE A BRAND IDENTITY

The most difficult aspect of brand identity for Campus was creating a logo that was representative of its purpose as a product inspired by travel, but also keeping it simple to be distinguishable across different sizes. I looked at many simple, yet striking logos used by popular clothing brands for inspiration. Nike and Adidas are both well known brands with logos that are easily identifiable.

I took note of both of these powerful companies’ use of negative space and simple design to create a series of possible logos for Campus:

At this point, I was satisfied with the use of mountains to portray travel or new discoveries. As simple and direct this design was for Campus’ purpose and brand, it received feedback as resembling Patagonia or REI. In order to distinguish the company as its own identity, I continued to draft different versions of this design.

Although all these iterations emulated travel and created a brand identity that stood unique in design, I went with my original intuition in keeping the logo effective, but simple. The final logo emphasized travel and worked well with negative colors and sizing.

Choosing the color palette for Campus was the next step in brand identity. Considering the website would be heavily dependent on user images for its aesthetics, I decided to choose black and white as my primary and supporting colors to avoid clutter on the page.

LOW FIDELITY WIREFRAMES

Choosing to go for a clean aesthetic using white and black, early stages of wireframing focused on the layout of product images on the homepage and lookbook. I looked at different websites that spread images across their UI, such as instagram, and tested images with matching dimensions and different sizes. It was also at this early stage the interaction of screens to access different features was tested. Users would require the option to access the store to purchase pre made items or customize an entirely new hat. To create an easy interaction between these two features, initial wireframes tested different ways to integrate the features into one screen.

HIGH FIDELITY WIREFRAMES

Using these low fidelity wireframes as my foundation, I created mockups through Illustrator and Sketch including product images to create a testable prototype for Campus. The end result tested different iterations containing different images, layouts, and sizes.

TESTING #1: A/B TESTING FOR CAMPUS HOMEPAGE

In order to portray travel, Design A used professional images of locations Campus’ founders have visited. The image was placed in the hero section of the homepage and tested to see if users immediately understood the purpose of the website. Initial respondents have associated Campus with a vacation booking site from the first 3 seconds of viewing the homepage. Upon navigating through the site and reading the headers and text in each section, users were finally able to understand its purpose as an ecommerce site for hats. However, this usability test posed a couple problems with this initial design. The hero image needed to encompass travel, but also include product placement. Since the website depends heavily on images, it overshadowed the text explaining different features of Campus and further confused users in this initial stage. To solve these problems, future design iterations increased sizes for headers and used empty spaces within images to place text on product information and remove unnecessary spacing.
Design B was well received by users with Campus’ primary goal in mind. The lookbook section meshes together user images neatly without looking monotonous and texts draw focus to them as much as the images present on the site.

TESTING #2: A/B TESTING FOR SHOPPING PAGE

The second test focused on the usability of the purchase screen. Both iterations performed well in displaying the different features available for customizing hats. However, users have displayed less flexibility when interacting with Design A compared to B. The numbers helped in defining steps, but individuals interacting with Design A went through the customization steps once, while those interacting with Design B pressed the different features multiple times.

RESULTS

The prototype created from the final mockups was sent to users through social media outlets and usabilityhub.com for testing. The results showed a clear understanding of Campus’ purpose and users were able to navigate through different features of the product with ease. Most importantly, every user was able to complete tasks, such as adding items to cart, checking out and accessing Campus’ lookbook. You can check out Campus' interactive prototype here.

CODING

Based on these results, I used HTML and CSS to develop the mockups into a responsive site and submit pages for integration into product launch. This portion of the project has helped me work on my frontend development skills and ultimately taught me to become a stronger designer with an understanding of how to bring my designs to life. The product currently has two working pages (homepage and lookbook).

CONCLUSION

This experience has ultimately helped me become more confident as a well-rounded designer. Coming from a research background, analyzing user feedback and integrating them into mockups has been straight-forward, but coding has always been a weakness to improve on. Using HTML, CSS and JavaScript to bring my work to life has helped me become more confident in approaching code and grow as a designer. These skills will help me become a more realistic designer and always consider how different layouts created in wireframing can be developed in code.

GET IN TOUCH

Want to talk about UX? Or have any questions?
Send me a message.