E-Commerce Microsite

One of my first projects while a student at General Assembly was creating an e-commerce holiday microsite. I was given a local sporting goods shop as a brand to design for, and created a digital experience that enables holiday shoppers to quickly view a selection of products based off their relationship with the person they are buying for. 

Privately owned since 1908, Paragon Sports has been the benchmark of quality for all types of sporting equipment and gear. They take pride in showcasing products from brands you know and love as well as unique brands that you may not be familiar with yet. Their mission is to provide a unique and fulfilling shopping experience to every customer, every time, by setting the standard in customer service and quality product.

With a curated gifting experience featuring a collection of 100 hand-selected products, Paragon can bring its in-store personality to a broader audience. I focused on adapting the unique in-store experience of shopping at Paragon in this microsite. Shoppers will be guided through the site as if they were shopping with an expert from Paragon’s staff.

Competitive Analysis 

This year 43% of holiday gift spending will happen online. Smaller retailers like Paragon need creative digital strategies to compete against large e-commerce companies during the holidays.

Without any differentiating factors, Paragon’s existing site doesn’t stand out from the competition, and my goal was to create a unique shopping experience to leverage the competitive edge that Paragon has (but fails to communicate digitally).

Screen Shot 2015-04-08 at 2.51.45 PM

Screen Shot 2015-04-08 at 2.52.06 PM

User Flow

For this project, we were given three personas to design for. I chose “John” as my primary user, and worked through flows and scenarios in which he was shopping for his young daughter.

Screen Shot 2015-04-08 at 2.59.14 PM

Wireframes and User Testing

Starting with sketching and low-fidelity wireframes, I tested and refined the initial designs based off user feedback from testing sessions with classmates.

Screen Shot 2015-04-08 at 2.59.04 PM

Prototype

I created a low-fidelity protoype with Omnigraffle + Invision. View it here!

Screen Shot 2015-04-08 at 3.33.10 PM

The deliverable for the project was the low-fidelity mockup, but since then I’ve been playing with a responsive design using Hype. I’m familiar with Axure and InVision, but Hype is new to me and it’s been fun to play around with the beta version.

responsive

Om Finder | Fitness App

Busy professionals have trouble finding and signing up for quality fitness classes that are near their home or work, and need information about classes and payment all in one place. Om Finder 2.0 helps users find, book and pay for fitness classes nearby, discover new instructors, and get rewarded for all the hard work.

Timeline: 10 Days

Team:  Alivia Duran & Melanie Wider

What I Did: User Research, Competitive Analysis, User Flows, High-Fidelity Wireframes, User Testing, Invision Prototype 

GALogo Student Project at General Assembly


Survey

Our initial survey was designed to explore workout habits, class attendance, incentives to exercise and general needs when trying to stay active.

Screen Shot 2015-04-03 at 2.19.47 PM

Key Findings

  • Users like variety in their workouts and book classes ahead of time
  • Users need extensive but concise information especially relating to class size and instructors
  • iPhone was the platform of choice to book classes and check schedules
Interviews and Affinity Mapping

By hearing real life experiences about users’ workout habits we identified behavioral trends and current issues that users face when scheduling workouts on-the-go.

Screen Shot 2015-04-03 at 2.25.49 PM

Personas

Screen Shot 2015-04-03 at 2.46.52 PM Screen Shot 2015-04-03 at 2.22.00 PM

Existing Om Finder App

Om Finder is a free app is designed to help iOS users locate yoga studios, classes, and instructors in Canada, the U.S., and around the world. Data is sourced through an API provided by Mindbody, but class and instructor information isn’t up to date.

Issues with current app:

  • No incentive to reserve through Om Finder
  • No curation of classes. Dependent on breadth of listings
  • Users can can reserve a spot, but not pay ahead of time
  • Only offers yoga classes
  • Find a friend function doesn’t work

Screen Shot 2015-04-03 at 2.30.03 PM

Competitive Research 

We also looked at other similar products, what they did well, and what we wanted to improve on.

Screen Shot 2015-04-03 at 2.30.22 PM We found extensive but overwhelming class offerings which make quality class discovery difficult, and a lack of incentive to actually use the site/app to discover or book classes.

Prioritizing Features

With the three personas we developed after our interviews, we started identifying features. We ranked them from essential to “nice to have” for the user, and then from low to high design and technical effort.

Screen Shot 2015-04-03 at 2.31.39 PM

Using the prioritized list of features and insights from interviews we refined the core functions needed for our minimum viable product.

MVP Key Features

  • Discover new classes
  • Book and pay for classes
  • Feature trusted instructors
  • Incentivize workouts

Screen Shot 2015-04-03 at 2.31.45 PM

Sketching UI

To rapidly explore ideas for initial designs, my favorite tools are a Sharpie and my notebook! Before starting digital wireframes, we explored what the screens could look like on paper.

Screen Shot 2015-04-03 at 2.33.34 PM

User Testing 

After sketching flows and exploring our initial ideas, we created wireframes and tested them with users to validate our designs.

Screen Shot 2015-04-03 at 2.34.41 PM

Wireframes

Annotated screen flow for sign in and checkout flow.

Screen Shot 2015-04-03 at 2.35.33 PM