Kickoff

In this project, we took a goal-directed design approach that proved to be quite effective in our design efforts. We found qualitative research methods to be the most useful, consisting of a kickoff meeting, literature review, competitive analysis, stakeholder interviews, and most important our persona hypothesis construction. We started out by asking ourselves some initial key questions.

"What is the product and who is it for?"

"What do our primary users need most?"

"Which users are the most important to the business?"

"What challenges could we face moving forward?"

"Who do we see as our biggest competitors?"

"What literature should we review to familiarize ourselves?"

We found data from our SME interview to be the most effective understandings we garnered. We then used an affinity diagram to separate the data into groups of tasks which were further categorized by high level goals for improvement in efficiency, process, depth, and familiarity. Recognizing the conflicts of interest from each audience allowed us to focus on shaping user goals and how those goals would in-turn also affect the business' goals.

Meet the Users

SECONDARY

Jake loves when customers or others ask about his keyboard because he gets to share with them everything about his unique build. Mechmarjet allows him to express his creativity through the app with other keyboard enthusiasts as well as find cool parts and good deals.

Blaire is a university student who enjoys solving complex problems through design. She wants her workstation to reflect her design values, providing a unique design and functionality that won't prohibit her from working on her school work.

When Wayne isn't at work, he is firstly a family man. He loves spending time with his children and spouse and keeping them happy. He needs a way to purchase a keyboard part that his son has been wanting for a long time without getting lost during the purchasing process.

Competitive Analysis

Preparing the Journey

We constructed a user flow of what a basic start to finish journey looks like while purchasing an item. This helps us in understanding ways users can interact with the product, as well as allowing us to see navigation through user goals.

Wireflow

After sketching out some p&p wireframes and thinking through the preliminary flow, we reviewed what was nessecary, unessecary , and what areas needed improvement. We poured a lot of our time into this step to make sure we had the finishing touches on the underlying UX before moving onto the visuals.

Iteration

After creating our prototype from low fidelity wireframes, our team prepared a 16 question survey for participants to fill out before we began conducting a usability test. We asked 16 different participants to run through different scenarios in our prototype in hopes of garnering enough feedback to use for our next set of design iterations.

Not secure.

We found that most users who were looking to purchase a relatively pricey item did not find the security they normall would with a "certifed seller" icon or label.

Too many taps.

In the buy screen of an item, users were having to tap more than once in order to add an item to their cart or to checkout. This glaring issue should not be in any shopping application.

Trending?

Having the initial home and trending screens share numerous similarities resulted in the majority of users being confused as to which screen they were actually on.

No Dropdowns.

We want the buying process to be quick and simple. While dropdowns are a familiar interaction for most, they're a lazy solution to a complex issue; plus, they're boring!

CHALLENGE 1

Eliminating Barriers

A key factor when trying to gain a userbase is to create a splash screen void of conflict. If the user wishes to browse the items within the app before creating an account, they might be more inclined to create one later on. Along with the login and register options, the "continue as guest" option allows for that users to browse the app without an account.

CHALLENGE 2

A Familiar Experience

While Mechmarket's primary audience is intended to be keyboard enthusiasts, those outside of the keyboard arena need to be able to use the app as well. With recognizable iconography, intuitive gestures, and a linear purchase process, we feel that Mechmarket has achieved just that.

CHALLENGE 3

Staying Focused

The UI consists of a neutral, two-toned black and white color scheme with the exception of green signifiers. Using color sparingly throughout the application's interface, it allows for the items to be the focus point during user engagement.

CHALLENGE 4

Quick, Simple, & Secure

With payment method and shipping specifics being accessible within a single screen, it doesn't allow for the user to second guess their purchase after the review screen. This design allows for minimal screen usage and a quicker checkout.

Style Guide

Combining incredibly vivid colors to create Mechmarket's signature gradient came from wanting to express to users just how creative the keyboard hobby can be. The splash screen feels warm and welcoming enough to draw the user further in. It's also the only place where it's applicable to use this much color considering our colorful product selection within the app.

Takeaways

As a mechanical keyboard enthusiast, Mechmarket is an idea that is near and dear to my heart. I wanted to communicate the importance expressing yourself through different creative outlets. This was my first time using the goal-directed design process , and I can definitely see it being useful in future projects. The idea of honing in on the persona hypothesis creation to help further the goals of not only the user, but the business is a step that I had taken for granted up until now. I learned that if you design for exclusively the business' goals, it will most likely fail; this seems to be especially true in shopping apps.

Special thanks to Ted Davis for creating the slick motion comps

Be sure to checkout the process for Mechmarket's creation below!

Interested in working together? I'd love to hear from you.

TWITTER →,  INSTAGRAM →,  LINKEDIN  →,  BEHANCE →,

JOSHGLUCAS@GMAIL.COM

© 2022 Joshua Lucas