UX/UI Designer
4 Week
User research • Wireframes • High Fidelity Prototype • Landing Page
This was my first project into the Designation UI design program. At the beginning of the program everyone has to go trough the Design Essentials (D.E.) phase. After this phase we decide which track to pursue: UX or UI. Like most people I thought I knew what UX was. Going through the program painted the picture quite clear; UX is about research. I chose UI not because I wasn’t interested in UX but because I’ve alway been a very visual person. I was a little disappointed when I found out I had to pick a track in the program. Now that I’ve finished the program I can see why it’s structured that way. The prompt for this project was named Winkel and were grouped into a team of three designers. As a team we had to decide if we were going to design for Winkel— the local farmer’s produce shopping app. Or Winkel— the fashion shopping app. My team decided on the local farmer’s app. We worked on the UX deliverables which were:
- Competitive analysis
- User interviews
- Problem statement
- User persona
- 6-8-5 exercise
- Wireframes
- Test plan and a test results report
For the UI deliverables we had to create moodboards, style tiles, design a logo for the app. Also apply the branding from the selected style tile to make high fidelity mockups. Finishing with an InVision prototype for user-testing.
We created the user persona after studying the client brief and completing the competitive analysis . We used this to recruit our interviewees. This artifact allowed us to propose some features we thought user would want. This features needed to be validated in the user test phase.
These are the very first sketches of the app. The point of the exercise is to quickly explore layout concepts and ideas in quick manner. Doing so lets us try different layouts without going into too much details. Which would be time consuming and might end up being discarded.
For the first set of sketches we have the log in screen and the main page. This were the early layouts ideas for this screens. The login screen has the standard fields for email and password. Also buttons for logging in or signing up. Users also have the choice of going straight to shopping and provide those details later. This was strategic as requiring users to sign up for a service they don’t know if they’ll get any value can be a deterrent. This allow user to invest time in the app and if when they add items to the cart you've converted them into customers.
This sketches were use to create a prototype using Marvel to test usability.
In its first version the home screen (left image, second sketch) was divided into two section. The first one is the “featured” section where items are promoted. And the second section is for the produce. They were divided into two columns left for fruits and right for vegetables. Here the layout is pretty standard although the final version ended up different.
In this sketch we have the search screen and how it would display the result of a given user search. it displays images of the products on the left and any informational text can be on the right.
To make the app wireframes I had to define the flow of the app. Though not shown here there’re three different flows in the prototype. The first one is going into the search and searching for a product. The second is adding a item from the fruit and vegetables section. Finally going through the checkout process. Once the sketches got made into wireframes I mocked up the splash screen. I also made two versions of the product list screen (first two images in the second row).
After finishing the wireframes we moved onto the branding aspect of the project. Over a week or two we developed the app’s look and feel— logo included. Here are some of the exploration sketches for the logo. I ended up choosing two logos, one of them shared between two style tiles.
Before we got started on the logo we were given the option to rename the app. So I went with “Wink”, with the tag line being “Shopping in the Wink of an eye.” Using the word wink to replace the word blink as a reference to things happening quick. During the user research phase I heard from users that they wanted to do their shopping quick — so convenience and speed were a priority.
Organic Market style tile — like the name implies this style tile borrows from this type of markets. This type of business pushes the ideas and values of the previous style tiles. They sell products that are organic and often local. The products are presented in a clean way but not over-sanitized. The main brown color is from the background image and matched with other colors from the color wheel. Using the complementary matching color system. Something I learned studying color theory in the program.
I decided to move forward with the Organic Market concept for the high fidelity mockups. As mentioned in the previous section this style tile carries some of the concepts from the previous two style tiles. I used images that evokes this type of markets in the onboarding/log in process. As well for the products by choosing images of the produce clumped together.
To make the app wireframes I had to define the flow of the app. Though not shown here there’re three different flows in the prototype. The first one is going into the search and searching for a product. The second is adding a item from the fruit and vegetables section. Finally going through the checkout process. Once the sketches got made into wireframes I mocked up the splash screen. I also made two versions of the product list screen (first two images in the second row).
I decided to move forward with the Organic Market concept for the high fidelity mockups. As mentioned in the previous section this style tile carries some of the concepts from the previous two style tiles. I used images that evokes this type of markets in the on-boarding/log in process. As well for the products by choosing images of the produce clumped together.