Documenting Your Design Process9 min read

Documenting Your Design Process9 min read 150 150 mfaizan

My experience attending a design document workshop — UX Conference 2020

Photo by UX Indonesia on Unsplash

Introduction

The redesign was a part of an exciting workshop on documenting your design by Arsalan Iqbal — Product designer @careem. The meeting kickstarted with a quick introduction by each attendee. Then Arsalan took us on an informative ride about the why and how important it is for designers to document their experiences.

Sprint Sheet on Figma & it’s world-famous timer from Microsoft 🙂
Courtesy: Arsalan Khatri article on medium

Arsalan then shared his wisdom with us on how he & his team members collaborate on dropbox paper app to write their interesting design documentations. How the feature-based discussion happens and how a particular solution was acquired. The whole trail of conversations is documented.

Some key learning from the presentation session

“Design Documentation is not a one person’s job, it’s a collective effort, and every one involves creating an awesome design document.”

“Design Documentation is an intensive process and is a log of activities conducted.”

“Design Documentations is also a record of all the different transitions a certain feature takes to reach its final state.”

Then we got the treasure of exciting links regarding the importance of documenting your design.

  1. https://uxdesign.cc/just-write-why-product-designers-should-write-and-how-to-get-started-672cb3294d6d
  2. https://webflow.com/blog/4-reasons-designers-should-write https://www.helpscout.com/helpu/help-document-design-tips/
  3. https://blog.marvelapp.com/writing-useful-designers/
  4. https://medium.com/swlh/should-designers-write-9eb45f074382

After the presentation concluded, we got involved in a short design sprint and had to document the entire process. All the attendees got divided into five breakup groups, each having 4–5 members each. We all were assigned the same task of rethinking the design of a messenger app. We had to analyze the issues and suggest improvements to it and later present our thought process.

Here are some screenshots for the problem statement, documentation structure, and the outcomes expected.

The problem statement.

So here it begins …

Based on the above guidelines, I will be sharing my experience and my group activities of design and documentation.

Note: So, from here onwards, this article will only discuss our process and the activities that we performed to achieve the desired solution.

Title: Chappie Messenger App

Purpose / Project scope

Analysis of the current app design and update it to a usable human-centered, and visually appealing solution.

Team intro

  1. Mohammad Faizan Atiq: UX & UI designer working in the UAE
  2. Asim Riaz: UX Designer
  3. Muhammad Usman Javed: IT manager

Challenge & Problem

The task was to look at the current app design and try to find out the problem in the current interface and then later produce a redesign solution of the app, wireframe thou. Our team was Team C, and we founded these issues with the design.

We got the task to redesign the above chat UI screen

The app requires a complete facelift in terms of usability & heuristics. Here are a few problems that we discovered.

  • Layout and placement of UI elements are incorrect.
  • The logo is covering up the maximum portion of the screen of the space.
  • The home screen has unnecessary items that are displayed on, like the app version and deployment versions.
  • Irrelevant Icons used. e.g., the gearbox icon is used for all the buttons.
  • Button spacing and placements need to be rework.
  • Colors and typography used are unconventional and don’t reflect with the app.
  • Information is scattered all over the screen.
  • Chat listing design is very unorthodox and poor in terms of gestalts six principles.

Competitor research

As this was time-based exercise, so had to be quick. We quickly hopped onto our phones and on web browsers to search for similar UI patterns. Our primary target was to look for solutions to the problems discovered in the last exercise.

As per the brief users are accustomed to using apps like WhatsApp and Facebook messenger, we decided to start with these very applications, followed by some more popular ones having a similar scope.

  1. WhatsApp.
  2. Facebook Messenger.
  3. Snapchat.
  4. Instagram Messages.
  5. ToTok messenger.

1. WhatsApp

  • The app is common among every age group and yet popular with its simplistic layout.
  • They have native experience for each platform, i.e., iOS or Android.
  • The listing of chat is consistent and gives off required and relevant information in one shot.
  • The home screen doesn’t have any branding assets like logos, lockups, wordmark.
UI of Facebook Messenger

2. Facebook Messenger

  • The layout is based on Facebook’s design system and is a very modern & minimalistic looking.
  • It has a prominent search bar that helps to search chat instantly.
User Interface of Facebook Messenger

3. Totok Messenger

  • Clean and modern design.
  • ‘Add New User’ has different options. The way this app handle is by giving a drop-down picker, and this provides a better opportunity to add multiple choices in a drop-down menu such as used.
  • New Chat
  • Add friends
  • Scan QR code
  • & more
ToTok’s Drop-down menu to select various options

Common patterns & personal discoveries

We discovered that the maximum of the apps was following similar UI patterns i.e.

  1. Chat listing.
  2. Profile Image, Name of Chat or group, date of last received message.
  3. Start a new chat from the top right corner of the app interface.
  4. Native Interface guidelines i.e., IOS and Android

Inspiration

We took all the major takeaways from the competitor’s analysis and searched for these current trends and patterns. The primary requirements were to look for something unusual than the regular direct messaging interfaces.


Proposed solution

It’s time to get to the real work and bring all the knowledge and wisdom to paper

illustrations: Pablo Stanley

A 10-minute task to consolidate all the sketches from each member and finalize on a final design solution and then present it.

We presented our design to the facilitator (Arsalan) and the rest of the groups.

Learnings & Conclusion

It was fun being part of this workshop learned a lot from Arsalan. The first time attending an online design sprint and later documenting the process was enlighting. I must say, for me, collaboration between team members was the takeaway. Each tool we used was focused on collaborative efforts, Whether it was zoom’s breakout groups, Google Drive, or Figma’s collaborative design frames.

Talking about tools,

Figma is the new buzz word for design tools in the industry I was reluctant to use this tool at first but later loved its collaborative workspace.

Dropbox Paper and I can say I love writing on this tool. Although all of the collaboration was on Google Drive, I was more attracted to the structure and visual appeal of Careem’s discussion document. Arsalan showed us sample documentation from Careem, and that was on Dropbox paper, and I loved its simplistic representation. I tried it with a short article, and I lovedit more. The thing I loved most about Dropbox paper is that it does most of the heavy lifting for us in terms of visual style and makes us feel like we are writing an article or a blog while I can focus on the content.

Relevant links or Tools:

  1. Pencil & paper — quick sketching
  2. Figma — Prototyping tool
  3. Dropbox Paper — Documentation
  4. Google Drive — documentation
  5. Zoom meeting.

Thanks for reading & appreciating