R2integrated

Blog

A Look Inside the Windows 8 App Design Process

Anna-Feliza Sy, Graphic Designer

What goes into designing a mobile application? In many ways, the process for app design is similar to web design. But there are also many additional steps and a potential learning curve. Let’s take a look at the process we used to design a retail app to be built in Microsoft Windows 8 which provides insights into:

  • Understanding the technology and rules of Windows 8

  • Incorporating client identity into the design

  • Thinking about user experience and user needs

The Design Task

We were tasked with designing an app that would allow pet store shoppers to quickly schedule a pet grooming appointment. The only requirement we had was that the app had to be built using Windows 8. Otherwise, we were given carte blanche. But for the purposes of design and UX, we decided to focus on the viewpoint of a dog owner.

windows8app2

The App Design Process

After receiving the initial briefing and some possibilities for layouts and UX workflow, we immersed ourselves in the purpose of the app and the user’s wants and needs. Before any actual designing begins, there is always a large portion of time spent strategically thinking and gathering information.

We dove deeply into the pet store’s web presence and learned about the pet grooming process. We asked ourselves: “What information would a pet owner need to give the groomer?,” “How can employees run reports on the data captured?,” “Where will the app be used? On user’s mobile device or at a store kiosk?,” etc. We lived in the world of pet grooming to understand the process, the information, and the experience.

Then we took all those questions and formulated possible ways to design the data entry process. We spoke with pet owners to understand their concerns during the pet grooming process. We spent hours thinking and rethinking possible workflows and took up several feet of whiteboard space conceptualizing the solutions. We also compared our designs with UX patterns for other apps.

photo%201

Conceptualizing the data entry process

 


Our most important goal was to make the app intuitive and efficient. We did not want the user to spend more than a few minutes entering data. This meant editing and eliminating as many data points as possible to give the pet owner what he/she needed for the appointment. We also wanted to ensure we indicated to the user how far along they were in the entry process.

Cognizant of the fact that this was a retail app, we wanted the opportunity for more sales. So we implemented coupons in the appointment summary. There was also the ability for employees to run reports on appointments, groomers, and registered pet owners.

W8 App Design Differentiators

Designing for Windows 8 presents challenges and benefits. Windows 8 has a full list of rules for app design (seen here: http://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh779072.aspx.) Every app must adhere to the typography rules, the interaction guidelines, and dimensions of Windows 8.

The rules are very helpful in creating clean and uniformly-designed Windows apps, but they do pose limitations. Our process had to be reworked to best meet the interaction rules, while still making the app intuitive and efficient. It was also helpful to talk to other designers who had previously created Windows 8 apps, learning from their challenges and getting tips.

Throughout the design process, the designers and engineers communicated regularly to find the best way to layout and build the app. These conversations revealed additional lessons in what we could and could not do in the app design.

From Wireframe Concepts to Design

After many hours of thinking and drawing, we created wireframes in Axure to present the UX workflow and design layout to the client. They had a few requested edits, but most of it remained unchanged. We spent about 10 hours between the brainstorming sessions and the wireframing.

5a_breed_information_a

6b_grooming_customization_b

8b_schedule_your_appointment_-_calendar

We had already done a deep dive into the pet store’s identity, branding, and color palette at the beginning of the process. It was just a matter of executing those details into the design. As part of the design process, we researched what other Windows 8 app designs looked like and compared the store brand with competitors.

The design had to be clean to fit with the Windows 8 aesthetic. We also wanted to use photography to showcase the different kinds of dogs. Overall, we wanted the design to be inviting and fun, making the experience less of a chore.

Once we were ready for design, we used the wireframes as the starting point. We soon realized some layouts did not work as well as planned. As with any wireframe, they were not followed to every detail, but they provided a good base to understand the structure and layout of each screen designed.

We also had to find the individual Windows 8 icons (found in the Segoe UI Symbols library) we wanted to use in the designs. Our time also included searching for the right photography and refining the color palette.

Customer__0010_Breed-Information---Selected

Customer__0021_Grooming-Customization---Trim-Length-Selected

Customer__0030_Scheduling-Screen---Calendar-Flyout

Presenting an App Concept

One of the hardest, but most rewarding parts of the process was presenting the app in PowerPoint in a “Visual Demonstrator (VD).” Each designed screen was placed into PowerPoint and animated as if a user were interacting with the app. It allows the client to imagine what the app would look like for the user.

This was a complex process which included time spent on refining animations and layering various screenshots. However, the final product leaves you with a presentation that looks very realistic and impresses the client.

Tools Used

  • Axure - Wireframing

  • Adobe Photoshop - Designing

  • Microsoft PowerPoint – Presentation

Tips for App Design

  • To develop a useful app, spend time thinking and information gathering before designing.

  • Fully understand the technology the app will be built upon.

  • Immerse yourself in the user experience. Think of what they will need, what they want, and what they expect.

  • Ensure that every interaction is needed and eliminate any unnecessary steps.

Anna-Feliza Sy

About the author: Anna-Feliza Sy

Anna-Feliza Sy has many loves. Among them are graphic design, photography, and proper spelling. Communication is important to her – whether visual or verbal. You can blame that on her journalism, French, and design degrees or her previous stints in television, photography, and marketing. Anna also loves travel and Instagram. She regularly posts photos of her adventures ad nauseam, to which she replies: #sorrynotsorry!

Related Articles

Sign Up for Insights