The Client
TwinDow, a mobile convenient store app
TwinDow is a mobile application looking to be at the forefront of the mobile convenient store experience. Their aim is to offer users a curated list of staple products that can be ordered and picked up at certain drive-thru locations. Founder, Antonio Romera, was focused on our team designing a prototype that would help save time for users.
The Problem
Finding design solutions to create the most efficient user experience by developing a simple, yet memorable visual identity for a startup in a newer market.
Our Solution
Developing a new logo, designing a high fidelity prototype for a user flow of a return user, and creating a marketing website to promote the product’s features.
Our Tools
Sketch, Principle, Adobe Creative Suite, InVision, Google Suite, Keynote
The Timeline
5 weeks
My Responsibilities
Design Strategy
User Interviews
Logo Design
Moodboards
Style Tiles
Desirability Testing
Wireframes and Prototypes
Usability Testing
Client Interactions
Annotated Screens
Style Guide
Our Approach
To learn more about TwinDow our team held an initial call with Antonio to gain a better understanding of his vision for the product. He provided us with some initial ideas he had but was fairly open to our various visual concepts. His vision was for the mobile app to look and feel simple, intuitive, and easy to use.
We worked together to find design opportunities after researching several competitors
We then met with the UX team as they handed off the assets that they had previously worked on. We reviewed the wireframes they had created to better understand the user flow. Also, we were introduced to the persona and bit of their story:
Rachel is a working suburban mother, who sometimes delegate shopping to partner.
In order to have a better understanding of the market we looked into the websites of competitors to evaluate their visual branding. What we found was that having too many elements on screen was overwhelming. The easiest apps to navigate were minimal and clean, and the most enjoyable experiences included fun and friendly details.
We worked together to find design opportunities after researching several competitors
Seeing these opportunities our team were able to come up with 3 Design Principles to guide our designs:
Essential - We want the overall design to be clean and minimal where the content and elements are given enough space to live within each screen. The purpose being that this will make navigation easier.
Personal - We want the design to connect with users so that they have a warm and welcoming experience throughout the app. The overall tone should be friendly.
Memorable - We want to include moments of delight in the design, where users are encouraged and affirmed throughout their experience.
Design Solutions
Taking the assets from the UX team, our team evaluated the wireframes. We implemented some changes and built out new wireframes. Some changes involved iterating on modal popups and changing some text information to improve the visual hierarchy. Our goal for this was for the information to be clearer and easier to understand for users.
Evaluated and iterated wireframes
Style Explorations
Our first round of testing focused on desirability testing several moodboards and style tiles we created with users that best aligned with our persona. Users were asked their thoughts on each design and whether they aligned with the design principles we set out for ourselves as a team. During testing, users gave some positive feedback but also shared about some areas of improvement. Users were positive towards how clean and minimal my style explorations were but felt some were too simple. The moodboard and style tile that tested the most positively felt modern, creative, and users felt the color choice was strong.
This moodboard received the most positive feedback from users.
Users enjoyed the color choices for this style tile and felt it was both modern and creative.
Logo Design
A big part of creating a visual identity was designing a logo for the new brand. I first started by exploring several paths sketching close to 100 different concepts. Some concepts were inspired by the persona, Rachel, exploring themes around the idea of family and the home. Other concepts looked into the TwinDow name and what the drive thru locations could look like. I eventually moved forward with a handful of designs that I then digitized.
Some initial logo sketches exploring pantry and glass window concepts.
Realization
Before moving towards creating mockups, I was feeling stuck with my designs. As I worked on designing a logo based off the style tile I chose, I realized that I was not designing for the user in mind but rather myself. I was conducting some quick A/B testing on logo iterations when a user commented about how my logos did not seem to fit the brand. This feedback was incredibly helpful in informing my designs moving forward. I transitioned to softer, brighter colors with more friendly, rounded edges for the logo.
The final logo went through several progressions eventually moving to friendlier, softer, brighter look.
Initial Prototype
Moving forward I created high fidelity screens from the wireframes to implement into a prototype. The prototype focused on a user flow of a return user adding an item to a previously created shopping checklist that can then be shared with fellow TwinDow members.
User Testing
When interviewing users our team conducted usability tests and also gathered feedback on the ease of finishing tasks, navigation, and the overall enjoyability of their experience. The majority of users responded positively to my prototype and said they’d be willing to use the product.
Final Steps
Before presenting and handing off our final assets to our client, we implemented some small design changes based from our user testing. In my final iteration I mainly focused on making affordances clearer by adjusting color contrast and making icons more evident so that it would be easier for users to identify navigable elements.
Our team created, along with a final prototype, some microinteractions as an example of a memorable moment of delight we aimed to achieve from our design principles. We also put together annotated screens and a style guide to inform future designers and engineers on the specifics of our designs.
Lastly we created a high fidelity mockup of a marketing site promoting the brand. The marketing site presented the unique features of the app, as well as ways the product can be downloaded. The goal for the site being a way to introduce new users to the TwinDow experience.
The Marketing Site showing features and a brief look into the TwinDow experience.
Reflections
I was very fortunate to be able to work on this project and with my fellow designers. We leaned on one another’s strengths to collaborate efficiently in putting together our design solutions. Our teamwork allowed us to present the best possible designs and outcome for our work. By working hand in hand with one another, I feel we learned a great deal and grew so much as designers.