Overview of the
Wisket came to us to help them solve an increasing issue within the retail economy. The world of e-commerce offers instant access to limitless possibilities of online retailers and yet consumers unable to commit to purchases. Instead of making purchases right away shoppers are favoriting items, adding them to carts, or manually saving things for later.
Current technology optimizes the shopping experience within a retailer’s individual platform. But when it comes to shopping around and looking at products from multiple retailers the experience is subpar. Wisket saw the opportunity to provide shoppers an eCommerce solution to save any purchasable item online into one platform.
I worked closely with the Wisket team to develop an ideal app that would take away the nuisances of online shopping. We wanted to streamline everything from the sign up process, to making a purchase.
Trust the
Starting with our first phase,
We put together a discovery strategy to help validate our hypothesis, organize our due diligence, and set goals for research deliverables to the client.
I kicked off Discovery by interviewing our client to better understand their goals and objectives. After our interview, I conducted a survey to gain user insight. I used SurveyMonkey to create the questionnaire and received 92 responses.
Results
In addition to understanding our users, we also needed to understand where Wisket’s competitive position was. Using a matrix, we were able to analyze, compare, and contrast 15 different competitive and comparative apps.
Results
We narrowed down the top 6 competitors with the top 5 features/functionalities our users desired based on their survey responses. From this, we were able to call out our strongest and weakest competitors.
In order to understand and evaluate Wisket's competitive position, we needed to identify their strengths, weaknesses, opportunities, and threats. Using internal and external data that I gathered from the above, I was able to organize these insights into their proper categories.
Key SWOT to keep in mind:
I gathered all the answers and observations from the survey data and compiled them into a empathy map. I took note on key patterns and grouped them by color using Figma Jam.
Based on user research and empathy map, I developed three user-types: a primary, secondary, and tertiary user. I referred to them throughout the project for empathy and to better understand who we are designing for.All three of the users possess different habits, needs, and pain points. This allowed me to build better user flows based on their goals and frustrations.
I created a scenario for each of our user types who have different goals and objectives while using this app.
According to our primary user, we identified two features that our competitors lacked:
Our research showed that some of the competitor apps don’t send any reminders/notify their users of their saved items(similar to cart abandonment reminders). This is a great opportunity for us to utilize our cart feature with that extra function to help meet our users’ needs while continuously driving their engagement.
Another unique selling point is displaying the total cost from multiple retailers. A common need from our users is to stay under budget. Currently, our competitors don’t have this simple feature. By displaying the total cost of all items from various retailers, it will allow Wisket to differentiate themselves from the competition.
A list of features was built based off of the initial requirements, needs identified from the user research, and review of the competitive and comparative products. To identify the MVP, we evaluated each feature value vs level of effort to build in order to prioritize them into Must, Should, Could and Won’t-Haves.
We also created a high level app map to display our vision in terms of infrastructure. We made sure to keep this super intuitive and straightforward with everything accessible and containing the least amount of taps and gestures.
Must Have Features
App Map
Let’s structure these findings into
While creating these wireframes, I also built a prototype to convey my design decisions, instigate conversations with the stakeholder, and generate ideas between our internal team while they tested. We kept open communication between us and the client at all times. Some had access to the Figma file so I went the extra step to connect CTA’s to their corresponding screens with Autoflow. This really helped with communicating feedback from all sides.
Wireframe Prototype
Findings:
Challenges:
Solutions:
Before anything else, we needed to identify Wisket’s
Wisket was super fresh and new with no style or brand guidelines. Before I could start designing the Wisket app, we had to identify their brand. I worked closely with our client and creative director on this project to ensure the branding resonated with the client’s mission and goals. Our aim was to keep it clean, fun, and have it appeal to all user-types since a large amount of retail apps tend to lean more towards the female users vs the male.
Brand Archetype:
The Creator - These brands value originality and talent, and they invite everyone to participate realizing their vision.
Typography:
We chose font types that unifies the brand and promote recognition of and familiarity with marketing communications.
Color Palette:
We created a few palette options for the client and with a few iterations, we land on four primary colors.
The logo:
We decided to incorporate a feature from the word “Wisket” meaning “basket” in British English, and added in a weave to the ‘W’. Our client loved the simplicity and play on the word.
Getting back on track into
After iterations on our wireframes, I completed the final screens with Figma and prototyped the designs for A/B testing and our technical engineers. I focused on a clean and simple design while maintaining the playful aspect of the brand.
Design Prototype
Showcasing the Wisket app through a new
Wisket also tasked us with designing, building, and launching their marketing website. For design, I used Figma and for development, I used Webflow. Our goal was to attract potential users and educate them on Wisket’s best features. We kept the energy of the brand throughout the site and added a QR code to desktop displays for easier access to download the app.
Shopwisket.com
Essential
After we finished design with final approval from our client, we handed it off to our engineering team. The majority of our product managers had their hands full with other projects so I assisted in the QA process of the development. This entire app relies on data scraping so we decided to use Diffbot to scrape product information.
Development Insights:
Solutions:
Overall, we felt really great about the app and user experience. While waiting for final deployment and approval from the client, we created assets for the app store as well as notification badges.
