Using the existing screen for the ‘Call’ tab in the Hiya iOS app and mockup a proposal for a more visually appealing design using the existing content and features.
My main reference for information was Hiya's current iOS app design and the user research they had done, which concluded that most people were confused about how to look up phone numbers from the dial pad screen, or they were unsure what the functionality was for.
What are Hiya's competitor apps doing? Is their interface easier to use, or harder to use? What are their failing and succeeding points? What are the visual strengths and weakness of the current Hiya design, and is there any way I can make the current design better by saving space on the screen, or reorganizing the structure of the dial screen?
I also research both iOS and Android user interfaces before I begin sketching to see what dial pads are used in the operating system. The reason being that I want the dial pad design to be functionally familiar and easy to use (no learning curve).
I then research different user interface designs for dial pads and assess how functional they are. Do they allow the user to look up contacts without opening their contacts? How is information laid out on the screen? Could there be more real estate in the design if things were placed differently (more efficiently - i.e. a horizontal scroll for contacts as opposed to a vertical scroll which takes up more space.)
Taking the user experience data Hiya gave me and my own research into account, I now have a high-level idea of what needs the design needs to accomplish in order to meet the needs of the user as well improve the architecture/design of the dial screen.
I need to:
During this phase I sketched out concepts on paper, getting through a lot of ideas fairly quickly...what worked and what wouldn't work, while still keeping in mind the user feedback I received above as well as my own personal research. At this point I was only thinking about structure and the best way to display functionality.
After creating my initial sketches, I picked the strongest screens I'd drawn and using Sketch turned them into lo-fi wireframes. Again, the point of this was mostly just to block out areas of information and hierarchy.
Now that I have my basic wireframes created, I move on to creating a high-fidelity prototype. At this stage I pick a color palette, user photos, and flesh out the entire design using my wireframes as a guide.
I also created an alternate version of the dial screen with the user's home or cell phone listed next to their name in the event that the contact has two numbers (home and cell).
The client was happy with initial design. They gave me some additional clarification as to how the dial pad screen was currently functioning after the initial design was presented that would warrant a few tweaks to the screen I'd created. Overall Hiya were very happy with my visual design and direction, there were just a few tweaks that needed to account for different functionality that I wasn't aware of in the initial brief.
Ideally I would like to look at the overall architecture of the entire Hiya iOS app and reassess what needs to be there. I think there is some functionality that could be questioned, such as: is the need for a dial pad necessary, or is it just confusing users? Would it make more sense to add all the functionality to the Identify page and nix the dial page altogether? Of course this was more of a high-level look at the app, and so while I'm happy with my design, I know I am somewhat limited to the brief I was given. In future meetings, I would want to bring up harder questions about the overall structure of the app.