[Reactive User Interfaces] Midterm – Address Book Design



Competitive Analysis: Here

Ideation Records: Here

Development Records: Here

Github Repo: Here

NOTE!!!: When opening the app in the browser, please select the mobile device as Galaxy S5, since the app is designed specifically for 360 pixels as the width.

Progress after Wednesday:

  • Animations on the expansion bar and filter modal with CSS transition and applying className according to this.props.show (originally I used display: block/none controlled by this.props.show)
  • Divider line (<svg>&<line/>)to draw divides the name list to make it feel more clickable
  •  “x” in the filter-echo (the chips before the people list when the filter has been implemented)
  • fix the lowerCase() bug


My Thinking:

Before starting the project right away, I asked myself a lot of questions regarding users, requirements, etc. How should I balance between client requirements(Rune’s) and user needs?

I asked myself:


  • Who will use the address book?
  • For what?
  • In which context?
  • What is the user story?


  • Why the user needs filter feature that is by country?
  • Why is the actual address needed?
  • Why ascending and descending matter? Again, in which story they will be used?


  • What common rules I should follow so that my design will not freak the users out.
    Be familiar to users.
  • What other feature that can add delightful moments to my potential users?



Then I started to conduct researches, including competitive analysis and user researches(ask).


With this question, I started with some research. I went through the common address book apps or apps that have address book features, including iPhone built-in address book, Samsung S8 built-in address book, Linkedin connections page, Facebook friends page, covva, sync.me, etc.

The link to the competitive analysis: here.


 I recognized some key findings


After ideation and asking the actual potential users, I defined my target user group:

Administrator/Registrar officers in big international university/colleges. 

They will need the features to see candidates’ and students’ address so that they know where to send important documents like offer letters. They face candidates or students from all over the world, so filter feature of “country” is important.  (However, I still could not figure out why sorting the list ascending and descending matters.)



Here is the step of the actual design and development


I have a lot of features that I wanted to implement. However, I know I should have the priority on the features that must have, should have, and can have. MVP is the thinking here.




Competitive Analysis: Here

Ideation Records: Here

Development RecordsHere

Github Repo: Here


Material Design Icons

Material Design Guidelines


Leave a Reply