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
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
PRIMARY
PRIMARY
Name: Jake
Age: 23
Occupation: Tech
Support
Name: Jake
Age: 23
Occupation: Tech
Support
Name: Jake
Age: 23
Occupation:
Tech Support
SECONDARY
Name: Blaire
Age: 19
Occupation: IAD
Student
Name: Blaire
Age: 19
Occupation: IAD
Student
Name: Blaire
Age: 19
Occupation: IAD
Student
SUPPLEMENTARY
SUPPORTING
Name: Wayne
Age: 37
Occupation:
Architect
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
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!
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.
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