The Intangible Economy Mockup-1

MY ROLE

UX Designer, Web Developer. Best practice research, Google Analytics and Adwords research, persona creation, userlytics testing, user flows, wireframing, prototyping, and client presentations.

PROJECT SUMMARY

The Intangible Economy is a startup boutique firm specializing in business consultancy, personal and professional training programs, and services. This project seeks to design and implement an effective, responsive web presence and selling tool that works on desktops, tablets, and phones. In addition, this website needs to provide key engagement metrics and pass the threshold for obtaining the companies trademark.

PROJECT CHALLENGES

Since this was a blank canvas website design, my task was to ensure that the site’s initial structure utilized key metrics and responsive front and back end design. In addition, I was tasked with making sure that the areas of the site that displayed the different course offerings were distinguishable on site. One of the main challenges was that the clients’ offerings were not currently sold online, so there was a need for an eCommerce component of the site as well as an eCommerce app. Since this particular client had little experience with the technical aspects of web development, they leaned heavily on me to provide an initial direction and comprehensive design solution for the site. Another of the challenges of this project was the trademark aspect of this site design. Since they were getting a trademark, the site and its design elements needed to comply with that process.

THE SOLUTION

This project was a comprehensive one. The site’s trademark requirements were my first points of emphasis. Once I determined the parameters for the trademark application and what needed to be present on the site to comply with it, I began creating the wireframes. Since this is a responsive site, I created wireframes and prototypes for desktop, tablet, and phone versions.

TIE MAIN WIREFRAME
Low Fidelity (Hand Drawn) Desktop Wireframe
TIE IPAD WIREFRAMES
Low Fidelity (Hand Drawn) Tablet Wireframe

Due to the trademark constraints, the client decided to do two versions/phases of the site: one pre trademark and the other post trademark. For the trademark version of the site, I decided to use color to differentiate the program offerings. This strategy allowed the brand to distinguish between the different programs, and it also allowed the product pages to have different looks per program.

TIE PROGRAM PAGE IPAD
Product Page

In addition to the design, there was a decision made to set up personas to assist with identifying the target audience and help with Ad targeting and user click habits. Since I generally try to keep refactoring to a minimum, I decided to address some analytic targeting aspects upfront. We did some user testing with a small group of previous clients to get a loose framework for the site’s user-centered direction. Through prototyping and testing, there was a decision to remove the images used on the site in favor of the colored approach. This decision allowed me to focus more on the usability and layout of the site.

Hamburger Nav IPAD
Mobile Navigation (iPad)

I wanted to nail down the site’s navigation, program selection area, and e-commerce elements for this design phase. I decided to go with a corner hamburger navigation with an overlaid menu that slid out from the right for the mobile menu navigation. This approach allowed the menu to take up as little space as possible while still providing the end-user with ease of navigation.

RESULTS

The phase-based nature of this project provided for a bit of design debt, and most of the additional features and changes moved to the second phase of the site. For the most part, the site shaped up nicely. The client obtained their trademark, and we are currently working on the second phase of the design. Subscribe to the blog to stay tuned for additional updates on this project!

Project success metrics, reflections, next steps etc. will be posted after second phase.

DRT Footer Logo