Mobile Application Sprints

Leading up to the Fourth of July in Washington DC, energy was high throughout the city. While the design team was mainly focused on timely issues, we were also looking ahead to design a new mobile application.I came on board during the middle of the process, after they had discussed initial requirements and created very rough wireframes, but there were still a few more steps to get through. The first was to create high fidelity mockups to use when pitching the new application to the founders. Our process for making these mockups was to have two applications sprints: one for the on-boarding process and one for a potential newsfeed design.

Having interned at a creative company before, I had heard the terms used in agile development like “sprint” and “scrum” but I hadn’t done sprints exactly like these. Generally, a sprint requires that a specific task be completed and ready to review in a short amount of time. How our sprint worked was to define specific design requirements and then have each creative member design a possible mockup in a short set timeframe. Important resources I used for this process were Keynote, Appealing and Mobile Patterns. Keynote was used for the actual creation of the mockups and, having never owned a Mac, this was my first time using it. The difference between Keynote and PowerPoint (and the reason it was our program of choice) is the magic move feature. This allows you to animate the mockup to mimic how the transitions would look after development. Appealing was used as inspiration for these animations because it provided examples of transitions that people have used in design. Mobile Patterns was used for general inspiration concerning mockup design to show the different ways common mobile app features have been designed.

Screen Shot 2016-06-30 at 5.20.43 PM
Screenshot of Appealing – Used for transition inspiration

Challenge

There were two different app sprints that we went through for design development. The first was the on-boarding process which involved how to create an account and create a personalized news feed. The second was to design the actual news feed with filter options. For both of these sprints, we were given only an hour and a half to create the mockups from scratch. The only thing we were provided with ahead of time were styled buttons, form elements and Android/iOS standard features. The limited time frame would be the biggest challenge, but learning how to use Keynote magic move and creating clean designs quickly would also be tough.

Approach

My process for these two sprints varied slightly as I learned from the first one and made changes to my process for the second. I realized after my first try that I should have looked at more inspiration for the animations and mockups. My first sprint design was very standard and did not push the envelope in terms of design and aesthetics. I also learned that I should go for quality over quantity. I tried to achieve all of the requirements in the first sprint rather than doing a bit less and having better looking designs. When designing, I also had a tendency to get caught up in insignificant details which is not ideal when working on a very short deadline. For my second sprint, I took more time looking at inspiration and made sure that each slide looked well formatted before moving onto the next. I also cut out the features that could be designed later. The biggest challenge for the second sprint was conceptualizing how the sorting and filtering features would work for the news feed.

Results

Overall both of my sprint mockups were helpful for the team in deciding where we wanted to go with the designs. Small things like including a “skip” button or a “select all” feature are the key take-aways we were hoping to find from these sprints. While the actual app will not look like my designs, it will borrow from their ideas and the challenges they overcome.

Sprint #1

Sprint #2

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s