iphone x mockup ux ui design hong kong

Designing an MVP — From Wireframe to Mockup (Sans Sugar Part 2)

History is made of accidents and the history of technology is no exception. Many beloved services and digital products began as side projects that became moonshots and spin-offs. Fog Creek spun off Trello while Basecamp replaced its parent company, 37 Signals, (which also spun off Know Your Company). More recently, Unsplash was acquired by Dribble and split from Crew. The beauty of these side projects is they began as practical solutions for a problem that the development team could relate to without being weighed down by business models.

What gives our developers the greatest satisfaction is seeing others use our products — even better when it’s our fellows. It’s one of the reasons our company gives team members the freedom to do research and build Playground products in addition to client projects. We want to build tools for ourselves.

On the other hand, side projects can’t take too much time since we have client work. The MVP approach in one or two month sprints from ideation to prototype is a great way to think about a product holistically. A developer is always working on a side project part-time, so the goal with the MVP is to have a complete, usable product for ourselves. Our projects have included our open-source IoT company door lock that everyone uses daily, products like MockUPhone and MakeAppIcon that help other freelancers and developers, and Spentable, Apple’s Best New App of 2016. With Sans Sugar, we are documenting our process to help other developers.

This piece covers the design, style and art direction of the Sans Sugar app that finishes with a mockup. Development preparation can happen in parallel to mockup designs so that technical implications and limitations can be factored into UI/UX designs.

After A Wireframe

wireframe iterations mvp design thinking
Simplify. Focus on user flow and main feature before moving to mockups.

Stages of Design

Good design involves as much planning and research as it does actually creating visuals. But the key to good design is having a clear process. Below is our process for design:

  1. User Story: Capturing what a user would do in a product.
  2. Wireframes: Showing the screens for the apps to capture features previously discussed and the user flow — saves a lot of time when talking to a designer
  3. Style & Art Direction: visual identity, look or “feel” of a product
  4. UI Elements & States: interface components and designing for different states users encounter in an app
  5. Mockups & Prototypes

What you don’t need for an MVP” covers defining the problem, researching similar apps, and the first 3 version of our wireframes. This piece covers the remaining design work until the mockup and prototype phase.

For client projects, our sales team helps capture user stories and the designers to create the wireframes. However, since Oursky encourages T-shaped knowledge, many of our developers can read and create wireframes. For Sans Sugar, our lead developer was also the project manager (PM), so he created the user story and wireframes to speed up the design process.

Design considerations that later get reflected in mockups are outlined below.

Things to give a designer to create a mockup

Projects have designated project managers, developers, and designers. For internal side projects, our PMs prepare the wireframes and brief the designer so they can dive right into mockups. For our design clients, our design team will also prepare the wireframe where appropriate.

After understanding the purpose and features of the app, the designer will think about the style and art direction when creating a visual identity. Will the approach be a flat design? Does the app have specific colour branding? By the time designers start doing mockups, they should already have the following (whether created by themselves or provided by collaborators):

  • Project brief explaining what the product is meant to do and user background (i.e. designing for the elderly or colour blind)
  • A wireframe — usually they create these for clients
  • Brand guidelines and requirements if applicable so the designer can factor this in early on
  • Example web / mobile designs you like (Dribbble is a great place to start for inspiration)

We also suggest:

  • Giving designers creative space and understanding that the designs you have given are references.
  • Following Apple’s Human Interface Guidelines and also designing for the iPhone X for iOS-first MVPs like ours. Apple’s guidelines provide clear principles behind the UI/UX, such as how to approach data entry rather than just choosing drop down menus as opposed to radio buttons arbitrarily. Android apps can check Google’s Material Design materials.

Design V1

iPhone x UI design mockup
Our V1 iPhone X mockup for Sans Sugar

The above is the first set of mockups from our designer. Our one request for design was that the UI looked more native to reduce the amount of frontend coding for visuals and styling. The designer took this into consideration with the third row of mockups, which are mostly white and looks similar to Apple’s native UI.

Our designer used a gradient animator to play around with colours to make the app stand up visually while maintaining simplicity. We also adhered to Apple’s recommendations for the new iPhone X UI with the notch (check out other iPhone X UX/UI design tips here).

Notice also that we added in different figures for the various amounts of sugar. These visual details can be fun to design and add character to an app, but always consider how they will actually be incorporated. In our case, these pictures of a heart, dog, and robot could be created as static images that load or as dynamic blocks based on an algorithm that assembles them together. (We ended up designing them as image assets to save development time, but more on that later.)

Having designer and developers working closely together allows us to have discussions about feasibility and execution early on so there are no major mistakes after development starts.

After our team agreed on the general design direction, our designer could create the remaining pages and fine tune details. In version 2, our designer added states to complete the design and we’ll discuss the importance below.

Design V2: Adding all the details

UI design mockup empty state side project MVP
Adding pages for various states is good UI design practice even for rapid prototyping.

UI Elements
When designing your UI, try to be consistent and predictable in your choice of interface elements. Requests for “detail” changes can make a huge impact on how intuitive the app’s UX is. Try to use elements that consumers are used to and have predictable behaviours to aid task completion, efficiency, and satisfaction.

Interface elements can include:

  • Input Controls: e.g. buttons, dropdown lists, checkboxes, text fields, etc.
  • Navigational Components: e.g. icons, pagination, slider, breadcrumb
  • Informational Components: e.g. icons, notifications, message boxes, etc.
  • Containers: e.g. accordion

States
We are creating whole products rather than isolated pages, so the design phase is also good for adding in previously missed states in the wireframe period (e.g. empty states, incorrect / error states, or completed states). Check this piece about the 9 user interface states.

Because we used Sketch for our mockups, we can also export slices that are more convenient for our developers to use to create the front-end of the app.

image slices front end developer sketch
Oursky’s PMs and developers know how to do image slicing too.

Where appropriate, our design team also creates style guides to give developers and future designers reference for consistency.

Designing ahead

MVP development rapid prototyping
Our awesome designer started thinking about the Apple Watch design for later development stages.

Even though we aren’t making the Apple Watch app yet, it is a logical next step if the MVP does well. Our designer took the extra step to start playing around with the Apple Watch designs.

Next up, we’ll explain the research and prep work that developers can do to design a good app architecture.

This is Part 2 of our iOS MVP design and development series for our side project, Sans Sugar, a simple tracker for your daily sugar intake. Check out Part 1: what you don’t need for an MVP.

sugar intake tracker design
The upcoming app logo!

*If you found this piece helpful, give us some claps or follow the Oursky Medium Publication for more startup/entrepreneurship/project management/app dev/design hacks! *👏

😻 At Oursky we’re all about helping brands and entrepreneurs make their ideas happen. Get in touch if you’re looking for a partner to help build your next digital product.

Leave a Reply

%d bloggers like this: