Tag: Redesign

Task Analysis in the Greenspring Review (UI/UX Article)

UI defines anything that a user may interact with on a digital screen. UI has been around since the 1980’s, and has since become more complex in nature. Actions that previously required manual inputs can now be done at the click of a button. UI evolved to fit many different types of technologies: phones, watches, tablets and more. UX, which stands for user experience, encompasses all aspects of a product. According to Peter Moreville, your product should be usable, useful, findable, credible, desirable, accessible and valuable.

With this in mind, The Greenspring Review should consider Task Analysis in their structure. Task analysis helps teams discover how they arrived at a certain conclusion. This is extremely useful, as it can make other aspects a lot more clear. It can also allow alternatives to get more room to shine, as this sort of basic questioning is often forgone. There are many different ways to perform Task Analysis, but they accomplish the same goals. Task Analyses cover every option available to you, discover how events occur, sees if desired outcome is more easily achievable and look at alternative goals.

There are two parts of Task Analysis that The Greenspring Review should look: desired and expected outcome. Expected outcome describes what the user thinks is the likely path, while the desired is the path that they want to use. The Greenspring Review needs to keep this in mind for ease of use. By creating UI and designs that are both desired and expected, The Greenspring Review could create something that is truly intuitive. However, it is important to recognize that a perfect design is usually not possible or feasible. Instead, pick the path that is most functional and fits the site’s design philosophy.

Task Analysis also makes something else clear: what angles/designs/questions will NOT work. While Task Analysis can break down the layers of dilemmas that seem simple on the surface, it can also open doors that have no business being open. Some issues, like figuring out why certain people would prefer certain page orders (alphabetical, by popularity, etc.), are best left unsolved. Not only is the work required significant for such a small issue, but these wants are always subject to change. The relevance of the change is also noteworthy, as functions that are essentially useless would act as a waste of space. However, useful user research, like a well put together student survey, would help lead The Greenspring Review in the right direction.

Sources:

Tarik, and Rick Dzekman. “Why Most UX Projects Could Use Task Analysis.” Medium, UX Collective, 16 Dec. 2019, uxdesign.cc/most-ux-projects-could-use-task-analysis-7244e8cf9916.

“UI vs. UX: What’s the Difference?” UserTesting Blog, 19 Nov. 2018, www.usertesting.com/blog/ui-vs-ux/.

Redesign Proposals: Pros And Cons

Team 1

Effective

  1. Logo relates to Stevenson University
  2. Format of issues on navigation bar.
  3. Issues are separated by genre.
  4. Navigation is simple.
  5. Contains space for users to subscribe via email.

Needs Improvement

  1. Books border is very busy and distracting.
  2. About section does not include the roles of those on staff.
  3. Event countdown does not actually countdown.
  4. Submission guidelines could be better formatted and organized.
  5. Link to social media.

 

Team 2

Effective

  1. Bold header and logo.
  2. Issues are organized by genre.
  3. Simple design is easy on eyes.
  4. Cover photos reflect content of posts.
  5. Quotes from editors is unique.

Needs Improvement

  1. Header disappears upon scrolling down.
  2. Lack of sufficient spacing between posts makes differentiating difficult
  3. Featured issues do not contain a link to full posts
  4. Archive tab should be more dynamic and not merely a link
  5. Side bar navigation takes up a lot of space and smushes content

 

Team 3

Effective

  1. Portrays activeness of organization and its affiliate.
  2. New events are easily found.
  3. Issue subcategories allow user to filter through options and narrow search.
  4. Search bar makes finding specific content easy.
  5. Submission form being at the top reduces amount of scrolling.

Needs Improvement

  1. Side navigation bar lacks organization.
  2. A lot of redirecting is needed to reach desired content.
  3. Pages are overly simplistic.
  4. Facebook feed lacks uniform formatting. A link may be a better fit.
  5. Embedded music video present without context.

GSR Redesign Pros and Cons

Team 1

-The header is stylized and has its own unique logo along with the color themes that match the clients(Stevenson)

-The latest Issue is on the front page for easy access.

-The background image scrolls with the page. It isn’t noticeable with the amount of info now but inspecting the pages code will show the background-attachment.
– The layout follows the Z-Pattern mentioned in the article, “What Newspapers Can Teach Us About Web Design.” The navigation bar starts in the top left-hand corner and as you follow the pattern it gives the reader all the information they need.
– There are a good amount of tabs in the navigation bar.

Needs Improvement

– I think the header should be stretched across the whole page and not cut off awkwardly.
– The background clashes with the white and green color scheme.
– The search bar on the Issues page seems unnecessary since there is a constant search bar on the right side bar.
– On the Issues page there is an oversized dropdown that overlaps with the Spring and Fall 2020 Issues.
– The Information written on the Submission Guidelines page could be arranged better. The words are too spaced out.
– The white background on top of the book background makes the page look amateur because of the white clashing with the colored books then those books clashing with the green color scheme on the white. I just think it would benefit if the whole page had the grey color background that can be found in the banner.
– Also, I think it would be better to categorize the Issues by the types of literature and then date them by the season and year. Similar to what Team 2 does.

Team 2
Effective UX/UI

– This team does what Team 1 didn’t and had a drop down with the different categories for the Issues.
– There are unique and Interesting images related to each topic on the page.
– It is a good idea that each Issue category ( Creative Writing, Journalistic, and Visual Art) has its own unique layout.
– The page is simple and clean. There aren’t any color clashes. The website seems to have a clear theme they stuck with.
– There is an actual form to submit original work and clear guidelines and reminders for the people that choose to send.

Needs Improvement

– I personally think the huge header takes away from the website. users will immediately scroll down which will bring them to a bland listing of categories that doesn’t interests them because there wasn’t anything that gave them a reason to.
– After clicking on the the Creative Writing Issue topic, I see there isn’t a clear separation between one writing and the next. So, when scrolling each entry kind of flow together.
– The homepage is basically the Issue page.
– The title of the page is EST.2016 in the HTML code when it should be something like ‘The Greenspring Review’. Now the websites tab title is Est. 2016.
– There is a lot of white space that maybe some borders could fix. All the white space makes the page feel empty.

Team 3
Effective UX/UI

– The homepage has a section that updates with the most recent upcoming events.
– Social media is present on the right sidebar and it also shows the latest posts.
– The creators do not deviate from the layout. Each page has 2 columns. Columns and grid systems are effective techniques used by news design (“What Newspapers Can Teach Us About Web Design”).
– There is a way for visitors to subscribe. This is a good way to get people to come back.
– This page also allows submissions with the help of a form.

Needs Improvement

– Almost greyscale color scheme, the bright blue title doesn’t really fit in with everything else.
– The Issue page uses the images as a link to the next page but it is not noticeable. The cursor does change when it is hovered over the image, but it would help if said image was highlighted to indicate it is clickable.
– The images are also too big, they should utilize more of the page.
– The page feels static. There is a lot of reused info especially on the sidebar.
– The subscription sign up does not check to see if the email is real. It goes though as long as there is an ‘@’ sign and ‘.com’

“What Newspapers Can Teach Us About Web Design.” Smashing Magazine, 8 Nov. 2019, https://www.smashingmagazine.com/2019/11/newspapers-teach-web-design/.

Redesign Greenspring Review

https://jennaaye.wordpress.com/__trashed-2/ 

Effective:

  • The tabs on the site are simple and easy to navigate with great usability. 
  • The photos are colorful and relevant to the topic or subheading they represent.
  • The submission page is super simple and easy to navigate for users who potentially would like to submit their work.
  • As you first login into the site and scroll, the interface takes you on a mini journey through the site and gives you a preview of the genres and different types of work they have.
  • When you log into a specific folder such as “journalistic”, the various stories are presented in an open and very clean and interactive manner.

Need Improvement:

  • The initial homepage logo is slightly out of resolution and this gives a “pixel” look to the logo
  • There isn’t much color on the site which means the user might get bored or not feel interested when using the site. 
  • Although the photos are colorful and relevant, they should be slightly bigger to compensate for the empty/white space on the site. 
  • The about page should have some more information rather than two short sentences about the site.
  • The site lacks any type of search button, which would make navigation much easier.

https://thegreenspringreview.art.blog 

Effective:

  • The use of a bookcase on the border of the site creates an image in the reader’s mind and kind of sticks, causing you to remember the brand/site.
  • The logo is very attractive and professional looking, while also being unique and relevant to the greenspring review.
  • The site utilizes a search button which is super useful and makes navigating the site much easier.
  • When clicking on the fall and spring subheadings, the drop down tab is easy to navigate and gives the user the ability to easily see what the site offers.
  • The event countdown tab is unique and attractive which makes the reader remember the event.

Need Improvement:

  • Although the logo is effective, I feel it should be slightly bigger or have the font be larger.
  • There is a lot of white space at the bottom of the homepage which could easily be taken up by something informative or useful. 
  • When looking to submit to the site, they could have utilized a much easier interface rather than giving the reader a paragraph to read.
  • The about us page could use some more useful information about the site and the green spring review. 
  • When you click on the issues tab, the spring and fall subheadings are useful but could definitely be presented in a much better manner.

https://greenspringreview.art.blog 

Effective:

  • The homepage of the site has tons of information and stuff that is useful for anyone visiting and inquiring about the site.
  • The use of social media is highly effective and gives the site a much better outlook and connection with those who utilize it.
  • The spring and fall subheadings under the issues tab are large and when you click them you have the ability to easily navigate between four unique genres. 
  • The submission tab is easy to navigate and use making any type of submission very easy to do. 
  • The use of a recent posts tab also gives greater usability on the site and allows the reader to choose from 10 different tabs. 

Need Improvement:

  • The homepage logo is unique but it could have been presented in a better and more attractive manner. 
  • The about us page has some slight discrepancies and could use some more information to better educate the reader and to give greater credibility.  
  • Some of the fonts within the articles are hard to read and don’t seem like they fit on the site. 
  • In general, the site has some decent and minimal use of color but if it used more color and unique designs it would be much more attractive. 
  • When you click on the art tab, I feel as if there needs to be some words or atleast a caption to give more information.

Redesign

https://thegreenspringreview.art.blog

Effective: 

  • The logo for the website is clean and fits the purpose of the website. 
  • The front page is appealing to the eye with the title and use of books around the borders
  • Layout is simple and easy to navigate 
  • Included search bar makes it easy to look up any particular piece of writing 
  • It does an effective job of keeping the colors simple and to a minimum 

Needs Improvement: 

  • Although the logo is fitting and clean, it could be larger and really stick out to the viewer 
  • The website as a whole lacks graphics which is an important piece of UI 
  • For several of the categories the font seems to be a little faded which can be difficult for some viewers to see as well as others 
  • More graphics can add to the UX to help leave a more lasting impression 
  • Adding more content with the Stevenson community to better connect the website 

 

https://jennaaye.wordpress.com

Effective:

  • A big header allows it stand out and let the reader know right away what content you will be seeing 
  • The modern style makes for a clean and stylish look
  • The use of graphics and pictures adds some needed color to the website 
  • The layout is simple and open making it an easy site to navigate through 
  • The difference of not using a sticky header is interesting and adds to the creativity and modern touch of the website 

Needs Improvement:

  • The header is large which is a plus but could use much better resolution making it more clear and appealing 
  • The logo does not seem to connect to the site or Stevenson as well as a shadow piece that can only be seen at certain angles 
  • No use of search bar on the website might make it more difficult for some viewers to navigate to what pieces or person they are looking for 
  • With the layout being as open as it is, I would expect the font to be a little larger and easier on the eyes of the viewer 
  • More information on the designers might help to better understand where the inspiration for the content and design came from 

 

https://greenspringreview.art.blog

Effective:

  • The website connects itself to the University with a quick link in the sidebar 
  • Promotion of events that will be held by Stevenson adds more content and shows the support from the website 
  • The use of art and media on the front page allow more for the reader than just looking up writings 
  • The added search bar for the website helps for easy navigation 
  • The headings are clear and simple in helping to find whatever it is the viewer is searching for.  

Needs Improvement:

  • The homepage does not include a logo which can be important for brand purposes as well as setting yourself apart from the other designers
  • The piece of art used in the top of the front page is not high resolution and is not appealing to the viewer’s eye 
  • The layout feels a little cluttered and does not give much space between sections 
  • More use of colors and graphics especially with the logo could improve the websites front page 
  • Although there is plenty of content on the front page, more content regarding the website itself would be beneficial

Greenspring Review Template Pros and Cons

Team 1

 

 

Pros

  • Clean and simple layout that’s easy on the eyes
  • Easily navigable, with unobtrusive drop downs within the issues
  • Consistent search bar and upcoming events keeps them within visibility and use
  • The about page connecting to the Greenspring campus of the University, feels official
  • Easily readable on mobile

 

 

Cons

  • No built-in direct submission function when many sites have it
  • Not optimized for mobile, drop downs for issues end up off screen
  • Mobile formatted poorly, site scrollable to the side to see background image, no real reason to do so, happens by accident
  • Submission guidelines feel very spaced out, feels a little awkward to read
  • Background image isn’t necessary on tablets, very little of it is visible

 

 

 

 

Team 2

 

 

Pros

 

  • Easily navigable on mobile
  • Eliminates previews of content on mobile, making it easier to read
  • Baked in submission box on the website
  • Separation of content by genre
  • Archives of previous content

 

 

Cons

  • Header feels too huge, feels gimmicky
  • Vertical focus leaves unused space on the sides
  • To navigate to a different section, the reader needs to scroll to the top
  • Minimalist about page with no delineation takes the reader a moment to recognize the difference with
  • The genre headings on the front page aren’t visually distinct enough, feels too close to the content titles

 

 

 

 

 

 

 

 

Team 3

 

 

Pros

  • Event focus promotes things that are often under-attended
  • The content being organized by issues and then genres makes finding something a bit easier, but also requires more pages to be viewed
  • Baked in submission tool makes submitting easier
  • About page very team focused
  • Text easily readable on mobile

 

 

Cons

  • Lack of drop downs in the ‘Issues’ section makes navigation slightly more time consuming
  • Should be an entire page to focus on events, with a calendar or list of dates
  • Aside from the header, there is a lack of color which feels less visually distinct
  • Lack of mobile optimization, content previews are still same size as full site
  • Menu at the top on mobile requires scrolling to the very top to navigate to new section