Overview
Concept : An online marketing app which specializes in vegan products
Client: Student Project at CareerFoundry
Platform: Mobile & Desktop application
Duration: 1 month
Role: UI Designer | Visual Designer | Illustrator | Project Lead
Methods: UX- Project Proposal | Define Guiding Principles | User Stories | User Requirements | User Flow Diagram | A/B Testing | Style Guide | User Testing | Feedbacks | Iterations | User Testing Round 2 UI- Iconography | Style Guide | Responsive Design | Low Fidelity Wireframes | Mid Fidelity Wireframes | High Fidelity Wireframes
Skills: Visual Design | UI/UX Design | Preference Testing | Prototype | Mockups | Animation
Tools: Sketch | Invision App | Adobe Photoshop | Principle | MarvelApp | OmniGraffle
Context
This project was a part of 6 months UI design certification course at CareerFoundry. I was tasked to create an app for an online store with a deep emphasis on building a brand. My idea behind this concept was to create a convenient shopping experience specializing in vegan products.
Challenge
With plethora of options available out there dominating the online marketing scene, my challenge was to create a product that delivers a seamless user experience and streamlines the process for users who are looking for shopping vegan produce and groceries at one place.
Research
1) Competitive analysis:
I researched two competitors: Vegan Essentials and Billion Vegans and divided my findings into three categories
1) What they offer: Lot of vegan options based on diet preferences, Easy shipping
2) What they lack: Advanced filter search, Product Reviews
3) What opportunities could be available: To make weekly shopping easy, give some incentive so customers would keep coming back to shop regularly
2) User Research:
I conducted a user research by interviewing 6-7 people who follow a vegan lifestyle to find out what their needs and frustrations are while shopping. What do they look for. Here is a breakdown of their responses.
3) User Scenarios & Opportunities:
So for this project we were provided with few user scenarios and asked to choose any 4 of them. But I decided to implement a user mapping method and incorporated the scenarios in it to better understand my users, what their requirements are, what steps they would take to achieve that and what design opportunities this would generate. This proved to be a very helpful tool since it helped me to come up with some new features for my app.
2) Key Flows:
Then I created a key flow for each user scenario. Below is an example of the first user scenario- As a returning customer I want to be able to save items that I cannot buy to a wishlist so that I can purchase them later.
3) Key Features:
Next I derived key features for this app based on the findings from user research and user journey mapping.
Ideate
1) User Flow:
Once I had key flows for all 4 user scenarios I combined them it into one unified user flow diagram.
Ideate
1) Low - fi wiremfames:
Once I had a clear idea of how my user flow will work, it was time to develop the low fidelity wireframes to build a structure from screen to screen and identify any problems in the flow. Here is a snapshot of few screens:
Ideate
2) Mid - fi wiremfames:
Then I digitized the wireframes in Sketch. At this point I added icons, buttons and all other details.
User Testing
Scenario based prototype testing:
Next I created a prototype in Invision and performed a user testing on 3-4 participants. The goal was to identify any problems in the user flow before moving on to high fidelity wireframes. I used a scenarios based prototype method where the users were given scenarios to complete certain tasks and then I recorded their answers and categorized them based on their priority- low, high, critical and preferential and then proposed the solutions and revised the screens.
Creating a Brand
Brand development is a key to success of any project. Your brand should have a loud, clear and consistent message to appeal to users. So for this project we were asked to take a following approach towards building the brand:
Brand Name:
Our brand stands for We (We the People) + Vegans = Wegans!
We welcome anyone and everyone, people from all walks of life and backgrounds who are interested in vegan products and sustainable living.
Guiding Principles:
We are on a mission to make our planet sustainable for generations to come by using ONLY plant-based products. We pride ourselves as one of the largest vegan marketplace, and carry around 150+ brands from all around the world including many home based suppliers. Veganism is a lifestyle & we want to make it easier for you! Whether you need weekly supplies of groceries, home delivery, home care products, apparel, all under one roof! We pride ourselves for our values and guiding principles that drives the force of this brand forward.
Logo Design:
Our brand stands for We + Vegans = Wegans! The “w” in the logo depicts “we the people” & the right end extends as a leaf to symbolize vegan. Below I have included some sketches I made and steps how the logo evolved, the idea started with a free form and later I incorporated that in the letter W. I also created few guidelines about the logo usage.
Style Guide:
I choose green, black and white as my primary colors, since I wanted to keep it simple but connect it to the message, that is vegan lifestyle so green was the most natural choice. I created all the icons and illustrations from scratch in Sketch and Adobe Illustrator.
Final UI:
I applied the the style guide to all the mid fidelity screens.
1) Optional Sign Up:
They can browse the app without having to sign up or they can sign in using their Email or username and password.
2) Advanced Filter Search:
Users can use advanced filters to narrow down their search to specific products based on categories such as source, diet preference, brands etc.
3) Add Multiple Items in Cart:
Users can add multiple items at once in their shopping cart, a notification will indicate you that the items have been added and you can keep browsing more products.
4) Easy Checkouts:
Users have multiple payment options like Visa , MasterCard, Debit card or gift card, so that they can choose the option that best suits them
5) Wishlist and Shopping Lists:
Users can save items they like to a wishlist & create a new shopping list or save items to an existing one, which can be then used for recurring orders. They can be viewed under profile.
6) How Shopping Lists Work:
Below is a process how users can add items to a new or existing shopping list.
Preference Testing:
I conducted a preference test through usabilityhub.com, total 30 users participated. 90% users chose option 02 with the little icons.
Responsive Design
I created a responsive design for landing page to suit for desktop and tablet devices. I created low fi wireframes and then developed into mid fi and high fidelity designs in Sketch.
Mockup Animation
I created a a mockup animation for “add to cart” and “checkout process” using Principle app. Please click on below link to view.
Prototype
Please click on the button below to view prototype created in Invision for this app.