Covvvver

PROJECT: Mechmarket

PROJECT: 

Mechmarket

PROJECT: Mechmarket

Project: Mechmarket

 ROLE: Team Lead, Visuals, Interaction

ROLE:

Team Lead, Visuals, Interaction

Role: Team Lead, Visuals, Interaction

DURATION: June 2018 (3 weeks)

DURATION:

June 2018 (3 weeks)

Duration: June 2018 (3 weeks)

Project Vision

Project Vision

Challenges

Challenges

Mechmarket is an international shopping app for keyboard enthusiasts alike. For this project, we decided to use a goal-directed design method which revolves around focusing on our persona creation and goals. The MVP for this product was developed as a mobile based application rather than being web-based to showcase our mobile design skillset.

Mechmarket is an international shopping app for keyboard enthusiasts alike. For this project, we decided to use a goal-directed design method which revolves around focusing on our persona creation and goals. The MVP for this product was developed as a mobile based application rather than being web-based to showcase our mobile design skillset.

 1)  Eliminate barrier to entry on application startup

2)  Design a cohesive interface for familiar and unfamilar users

3)  Create a minimalistic UI while keeping products as the focus

4)  Provide a seamless & linear purchasing experience

 1)  Design a cohesive interface for the familiar and unfamiliar user

2)  Provide a seamless & linear purchasing process

3)  Create a minimalistic UI while keeping products as the focus

4)  Design a market without being it oversaturated

 1)  Eliminate barrier to entry on application startup

2)  Design a choesive interface for familiar and

unfamilar users

3)  Create a minimalistic UI while keeping products

as the focus

4)  Provide a seamless & linear purchasing

experience

Splash compressed

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.

live version

Meet the Users

Jake

PRIMARY

Name: Jake

Age: 23

Occupation: Tech Support

Name: Jake

Age: 23

Occupation: Tech

Support

Blaire

SECONDARY

Name: Blaire

Age: 19

Occupation: IAD Student

Name: Blaire

Age: 19

Occupation: IAD

Student

Wayne

SUPPLEMENTARY 

Name: Wayne

Age: 37

Occupation: Architect

Name: Wayne

Age: 37

Occupation:

Architect

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

We looked at several potential competing companies, and although none compete directly with Mechmarket, they can still infringe on the business' revenue & popularity. Mechmarket has the opportunity to capitalize on this by bringing products from each company to create a one-stop shop without oversaturating the user's selection.

The majority of the features between competitiors were very similar, however the main differences that we noticed were:

– Easily Accessible vs Hardly Accessible

– Too Many Screens vs Simplified Interaction

– Bright / Distracting Interface vs Minimalistic Interface

– Specialization of Products

We looked a several potential competing companies, and although non compete directly with Mechmarket, they can still infringe on the business' revenue & popularity. Mechmarket has the opportunity to capitalize on this bringing products from each company to create a one-stop shop without oversaturating the user's selection.

The majority of the features between competitiors were very similar, however the main differences that we noticed were:

– Easily Accessible vs Hard Accessibility

– Too Many Screens vs Simplified Interaction

– Bright / Distracting Interface vs

Minimalistic Interface

– Specialization of Products

Competition

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.

Flow
kek

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.

f

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.

Unsafe

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.

finger

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.

Flame

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.

dropdownn

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!

old new
new old two

                                                     Old Buy Screen                                                                                      New Buy Screen

                                                     Old                                                                                       New

                                Old                                               New 

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.

Style Guide

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!

REACH OUT TO ME!

joshglucas@gmail.com

Searching for a designer that shows passion in their work? Interested in working together? I'd love to hear from you!

© 2018 Joshua Lucas