Switch

by Posted on

Curating The Idea

The word ‘communications’, in the world of technology, can be construed in many different ways. As displayed in my previous blog posts, a few examples of communications websites are:

  • A product (e.g. phone, earpiece, broadband)
  • A comparison website
  • SIM cards/phone contracts
  • Graphic communications company

As a result, the scope of fictitious companies to design for was very wide.

After analysing each communications theme against which examples of the digital design toolkit I want to include, I have chosen to create a device comparison website. I believe this to be the most versatile choice because the psychology behind human comparison is an interesting subject that is yet to be explored from this angle.

The Social Comparison Theory

The social comparison theory was devised in 1945 by psychologist Leon Festinger. His theory proposes that humans compare themselves to others in either an upward or downward fashion. When people make judgments about themselves and the situations they may find themselves in, they either compare it to someone who is in a better position to them and strive towards this or look at things in a more downward way and think “at least I’m not as bad as them”. The example used by Kendra Cherry for an article on Very Well Mind is that of a girl in high school band practice. She starts to show her musical skills, in this case with a clarinet and notices the capabilities of others in her class. She sees the students who are more skilled than herself and thinks “I wish I could be that good”. This naturally drives her to improve her practice. On the other hand, she sees students who are not as expert as herself and thinks “I may not be as good as others, but I’m better than some.”

This theory made me think in depth about how we compare our possessions, in this case, our technological devices, with others in the market. Thus, birthed the idea for Switch. A comparison site for users to view their current device in comparison to those better/more expensive and those lower grade/cheaper.

Digital Design Toolkit

For this particular exercise, we were asked to choose three main subjects to focus on as a reflection of the work carried out in the unit. I chose visual hierarchy, search UI/IA and personality in design. I started brainstorming ideas by jotting down some key aspects that I thought were the most important for each. I find this technique easier to sketch out with pen and paper because I can get my ideas down quickly and efficiently. I also have the freedom to draw accompanying illustrations and/or diagrams to remind myself at a later date of any spontaneous, yet undefined ideas.

Visual Hierarchy

When designing for the visual hierarchy of my prototype screens, I considered:

  • Designing a logo to be featured as a small icon on the page. The logo will reflect the ethos of the brand but not be too big as to not distract users.
  • The main, largest call-to-action will be the device input.
  • Grouping of information and overlapping will be prominent in the main comparison page.
  • Each page will utilise empty space to practice minimalism and simplicity, especially around the main search bar to draw attention.
  • Small and simple menu options will be used in the top bar.
  • A smaller general search bar will be featured a the top right-hand side of the page.

Search UI/IA

There are a few different ways I wanted to display the search UI, such as:

  1. The main search input follows an autocomplete design pattern with controlled vocabularies and thesauri. For the main search input on the first page, the user will start to type the make and/or model of their current device and the search mechanism will attempt to finish the word. For example, if the user starts to type ‘Ap’ the program will suggest ‘ple’ from a database of predetermined makes and models. It doesn’t matter which (the make or the model) the user types first because pattern matching is incorporated too. The interface design for this will be a simple text box with a lightly coloured statement reading “What device do you currently own?”
  2. The secondary search mechanism is also on the homepage to give the user a smaller scope if they aren’t sure of the name from their immediate memory. This is in the form of two drop-down menus. One will include makes such as Apple, Huawei and Samsung, and the user will need to select this first to be able to give the second option scope. If the user selects Apple, the second drop-down box will include items relating to that brand.
  3. The advanced search option on the main comparison page will be a configurator. It will include meticulously thought-out options for the user to select their exact criteria. These will include elements like checkboxes and sliders, for example, yes/no options such as whether the device has fingerprint scanning, this will be displayed with a checkbox however the price range can feature a slider so the user is able to set their own guidelines and have more control. When the user is viewing a device in the comparison search, there will be an option to import the criteria of said into the advanced search category to view similar options.

The Creation of Switch

To create a functioning prototype of Switch, I started by using Adobe XD. Due to the positive relationship I had with the software in the last task, I wanted to extend this skillset and create something new. I was working for a few hours until I realised I wasn’t achieving the desired effect. With XD I was able to create beautiful, static pages that could all be linked to each other with elegant transitions, but could not add functionality to one page itself. For example, drop-down menus are not a direct, functional design option. I kept having to find workarounds and this wasn’t ideal for what I wanted to achieve in this instance. In turn, I decided to revisit the industry standard, Axure and I’m pleased I did so. Axure was able to offer me a much wider set of functionality options in a drag-and-drop interface. Thus, meaning I had more time to conceptualise ideas.

Using Axure to bring my ideas to life was a fun and enjoyable task.  My first iteration, ready for my presentation to my peers, included four screenshots. The link to the published prototype is here.

Feedback

The feedback session from my peers was, as always, was an insightful exercise. I enjoy receiving constructive criticism to be able to further my practice. Sometimes I find myself staring at my design for too long and feeling a sense of frustration because I can’t think of how to solve my own problems so it is nice to have other creative minds to bounce ideas off. I think it is healthy and important, especially at this stage of my educational career, to take up the opportunity to ask people at roughly the same level as me. It’s nice to receive praise for tasks accomplished well and given advice on how to improve.

General Feedback

  • Including a mental mode is good because this considers the users’ perspective and mental state when using the service.
  • Having a narrative for the user to interact with is good.
  • My peers were not sure if the colour scheme was entirely appropriate.
  • I could have picked from a lot of different user journeys to wire-frame but it was agreed that this was the best one for the task I had set for myself
  • Someone asked “why would people want to go for a cheaper option?”. I answered this by explaining that they may want a cheaper version. Someone added to this dialogue by suggesting that the user could possibly trade theirs in for another model.

Homepage

  • Change the logo to include white arrows. This will contrast better with the dark menu bar.
  • In the prototype, the main call-to-action input should show how the search query works. Maybe it will be a case of removing “Please enter your current device’s make and model” and replacing this with an example of “Ap” in darker text and “pple”.
  • Am I assuming that the user will know what device they have? What if the user doesn’t know what device they have?
  • In regard to the two search options doing essentially the same thing, does the second actually offer an easier option? Is the selection option too small? This would be a perfect opportunity for A/B testing.
  • The menu system that Axure provides isn’t appropriate for this prototype and I should just include text menu options.
  • The general search bar should be at the bottom as to not distract from the main search input.

Confirmation page

  • I should choose a selection of the most important specifications to include for the phone. Top 5, maybe.

Comparison page

  • Replace the plus and minus icons with left and right arrows.
  • This will make room for the bottom slider to be replaced with the ‘Compare’ button.
  • Add a bar to the right that displays devices that have been added to the comparison list.
  • The ‘Advanced Search’ bar should be mocked up. People were interested to see how I envisioned this.

Iteration

From the results of the presentation session, I made a number of significant improvements to my prototype. The comments that my peers made on my design urged me to make a drastic difference and improve the final product. The link to the new prototype can be found here.

The changes I made were:

  • Z pattern – Integrated the Z pattern on the homepage for a more organised interface and to draw the users’ attention to the search facility at the bottom
  • Premium colour scheme – Switched the colour scheme to black and gold for a more lux feel
  • Mock search – Included a mock search query on the homepage to show how the real version would work
  • Consistent design – Added distinct buttons to keep elements consistent
  • Single text menu – Reduced the top-tier menu to plain white text on a black background for high contrast
  • Logo – Removed the logo symbol because the word ‘Switch’ with an upside down i is identifiable enough.
  • Search configuration – Added a prototyped vision of the search refinement section to the comparison page
  • Device selection – Added device selection comparison feature to the comparison page

  

Reflection

I admit, I do struggle with interface design. I see myself working towards a career in information architecture and user research because I don’t seem to have a good eye for aesthetically pleasing designs. It was tough to hear a lot of feedback about my work, but I knew it would happen and I’m glad it did. I believe this task has taught me to take criticism, think of it constructively and change my work for the better.

References

Cherry, K. (2018). Social Comparison Theory in Psychology. [online] Verywell Mind. Available at: https://www.verywellmind.com/what-is-the-social-comparison-process-2795872 [Accessed 2 Nov. 2018].