Wireframing Challenge: Starbuck’s App

For the second challenge of the UX/UI Design Ironhack Pre-work , I had to create a wireframe from an app that I liked and prototype it.

Let’s remember what is wireframing exactly:

Wireframes are used early in the development process to establish the basic structure of a page before visual design and content is added. Wireframing is a way to design a website service at the structural level.

I looked for designs that were in accordance with what I consider effective but simple, on the other hand, I decided to look for references of apps with outstanding interface designs. I chose the Starbuck’s app, since is a international brand that everyone can relate to, also I enjoy their customer experience on site!

I chose to do a flow of new user inside the app. From my experience I like the enrollment process to be quick and easy so I can start enjoying from their features.

The challenge

Your task is to create a wireframe version of the user flow of the chosen app based on screenshots or high-fidelity prototype screens of such app. Your final product should be a simple 5 screens’ interactive prototype built in the tool of your choice

Captures used

• First view: When you arrive on the app, you can see first the resume of the main features, but need to login or sing up in order to purchase or save elements.
• Login: In this view you can see the formulary for users who already own an account, also the redirect button to sign up.
• Sign up: Here you can fill the form with your information and create your account in case you don’t own one already.
• Take away: You can have a preview of the items you can pre order and just collect them at the store avoiding hectic lines of people, but you can only access full view if logged in.
• Coffee List: The full coffee menu in your phone, also can go back to the first view and explore other options.

I used Figma as my prototype and wireframing tool, since is one of the most used now a days.

Wireframes

Since this app has a minimalistic design, was perfect for me to start getting familiarize with Figma and the concepts explained in the theory.

Wireframes elements

We were also asked to inventory the UI elements in this app, in this case they were:

• Buttons
• Images
• Scrolling
• Icon button
• Text fields
• List boxes
• Image Carousel

Key learnings

Prototype Image

• Definitely, in order to understand the user’s journey within the app deeper, I must implement longer processes, which is where you can observe both the things that work correctly and identify those that have the opportunity for improvement.
• I understood that once I become familiar with the tool kit that they provided us, I will be able to get more out of it since it took me a long time to find elements that I wanted to implement.
• Reflection: When designing it is important to take into consideration the business perspective so that our proposals or analyzes go hand in hand with the goals of the platform to ensure user experience.

Last but not least: Prototype

Here you can take a look on the prototype I build.

I am sure that there are many things that I can continue to improve, I would like to know what you think I can continue to improve, leave me your comments!