TwinDow is a drive-through convenience store that aims at age 25-49 busy suburban moms. Users order the staples they need from their TwinDow application and drive through the store to pick up the order. TwinDow helps users shop faster and get staples they need without leaving their car so that they could have more family time.
Users will be reserving their orders on the app, and then the app will generate a QR code. Users drive through the store; they will be charged by scanning the QR code at the window and pick up the order.
The branding design for this project started from zero because TwinDow is a start-up company without any branding. It's somehow challenging because we didn't have any design language or assets that we could use. On the other hand, it's also fun because we could maximize our creativity in this project.
After the kickoff meeting with our client, we concluded that he is relatively open to ideas for designing TwinDow’s interface. He emphasized that the app should be clear and intuitive, while the service provided by TwinDow should be essential and efficient. We used his vision to explore different avenues of clean, effective design.
Client
" I want users to be able to open the app, and immediately shop"
" Less is more, less options and less functions"
We researched some relevant competitors such as Instacart, Starbucks, 7 Now, Walgreens, Amazon Go, and goPuff. We absorbed the things they did well and avoided the things that were holding them back.
Based on the research and the analysis, we summed up the design principles that work the best for the brand.
To help users to speed up their shopping process and keep their focus on the products, TwinDow should maintain a simple and minimalistic design and color scheme.
To create an integrative process that will allow users to collaborate closely with one another. TwinDow aims to connect people within their network, where they can easily share and customize their experience together.
While we will strive to keep our design minimal, we hope to incorporate small moments of delight throughout the design.
I used the design principle to guide my direction to explore the style and feeling the app should bring to its users. I used blue and yellow as my color palette aimed to convey excitement and friendly feeling to the users.
I got the initial wireframes from our UX team. Then I did an evaluation before I got into design, aiming to find issues that needed to be improved so that our users can have an even better experience when they use the final product.
One of the big things I changed was the “Add to Order” feature. On the original wireframes, when the user clicked on “Add to Order”, a list of choices were pulled up from the bottom. It was visually cluttered and also looked like it would link the user to a different screen.
I improved that by changing it to trigger a pop-out modal window. The user can add the item into whichever list they want. It’s more intuitive.
I moved forward to the high fidelity screen design with my design directions and the evaluated wireframes. I kept my principles in mind, the color palette and design in my final design was simple and friendly. I created some animations throughout the app so the users can have some moments of delight while using the app to make this experience memorable to them.
Flow:
-User opens the app
-Wants to create a new shopping list
-Share the list with someone
-List is created
Flow:
-User is viewing the product
-Checks related items
-Decides to get the item immediately
-QR code generated (Ready for pickup)
Flow:
-User is viewing the product
-Wants to add it to the list with other items
-Views the list after adding the item
Flow:
-User is viewing the list
-Wants to share this list with someone
-Searches and adds the person
-Now the list shows that it is shared with 1 other person
Flow:
-User is busy, so she/he wants the other person in the list to pick up the order
-The other person gets a notification on their phone, he/she clicks accept
-Both of them see the QR code is generated
-After order is pickup, both see that the order is completed
To help further promote the mobile app as well as to contribute a strong branding. I designed a marketing site for TwinDow. The website was aiming to let users learn about the app and encourage them to download and give it a try. Inheriting the design principles from the app, the marketing site also has a clean color and design, along with some fun and intimate detail.
I brainstormed with a lot of concepts, and I finally used the concept of a shopping bag with a window on it.
By thinking about TwinDow as a phone app, I needed the logo to be more simple and easy to memorize for users, so I simplify it from three-dimension into two-dimension.
Form 1
When it is used in digital, it will maintain a shopping bag and a window.
Form 2
When it is used in print products like business cards, the window will open and a QR code will appear, and this QR code will lead the users to the marketing website to further promote the app.
I tested with my final prototype with some users and gathered very positive feedback. Users all really enjoyed the micro-interactions and the color in the app. They thought it was fun and somehow encouraged them to explore more with the app. However, some details needed more affordance and hierarchy.
Working with TwinDow was an enjoyable experience. I had learned a lot from it. It taught me empathy. I enjoyed creating small moments for users by making micro-interactions, but I learned that when there were too many micro-interactions, it easily distracted users. I also really liked the logo design process, because it pushed me to think creatively. I liked my three-dimension shopping bag logo at the first, but when I simplified it into two-dimensions, I had an “Aha!” moment because I realized that I learn “less is more” from this project, which could apply to a lot of my future design work.
